wally-ui 1.12.1 → 1.13.0

package/dist/cli.js

@@ -64,11 +64,14 @@ program
     }
     const playgroundPath = path_1.default.join(__dirname, '..', 'playground', 'showcase', 'src', 'app', 'components', component);
     try {
-        const typescriptFile = await fs_extra_1.default.readFile(path_1.default.join(playgroundPath, `${component}.ts`), 'utf8');
-        const htmlFile = await fs_extra_1.default.readFile(path_1.default.join(playgroundPath, `${component}.html`), 'utf8');
-        await fs_extra_1.default.ensureDir(componentPath);
-        await fs_extra_1.default.writeFile(`${componentPath}/${component}.ts`, typescriptFile);
-        await fs_extra_1.default.writeFile(`${componentPath}/${component}.html`, htmlFile);
+        if (!await fs_extra_1.default.pathExists(playgroundPath)) {
+            console.log(chalk_1.default.red(`Component '${component}' not found in playground`));
+            return;
+        }
+        await fs_extra_1.default.copy(playgroundPath, componentPath, {
+            overwrite: true,
+            errorOnExist: false
+        });
         console.log(chalk_1.default.green('Template loaded successfully!'));
     }
     catch (error) {

package/dist/cli.js.map

@@ -1 +1 @@
-{"version":3,"file":"cli.js","sourceRoot":"","sources":["../src/cli.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"cli.js","sourceRoot":"","sources":["../src/cli.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wally-ui",
-  "version": "1.12.1",
+  "version": "1.13.0",
   "description": "About Where’s Wally? Right here — bringing you ready-to-use Angular components with Wally-UI. Stop searching, start building.",
   "bin": {
     "wally": "dist/cli.js"

package/playground/showcase/src/app/app.routes.server.ts

@@ -29,6 +29,10 @@ export const serverRoutes: ServerRoute[] = [
     path: 'documentation/components/tooltip',
     renderMode: RenderMode.Prerender,
   },
+  {
+    path: 'documentation/components/dropdown-menu',
+    renderMode: RenderMode.Prerender,
+  },
   {
     path: 'documentation/chat-sdk',
     renderMode: RenderMode.Prerender,

package/playground/showcase/src/app/components/ai/ai-composer/ai-composer.html

@@ -1,15 +1,12 @@
 <div class="w-full flex flex-col" role="region" aria-label="AI message composer">
     <!-- Selected Text Context -->
     <div class="p-0.5">
-        <div
-            id="selected-context"
+        <div id="selected-context"
             class="w-full flex items-center gap-1 justify-between border bg-neutral-100 border-neutral-300 dark:bg-[#121212] dark:border-neutral-700 rounded-t-3xl rounded-b-lg p-3"
-            role="status"
-            aria-live="polite">
+            role="status" aria-live="polite">
             <div class="w-full flex gap-4 items-center">
                 <svg viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
-                    class="size-5 text-[#0a0a0a] dark:text-white"
-                    aria-hidden="true">
+                    class="size-5 text-[#0a0a0a] dark:text-white" aria-hidden="true">
                     <path
                         d="M12.5293 6.5293C12.7566 6.30203 13.1081 6.27383 13.3662 6.44434L13.4707 6.5293L17.4707 10.5293C17.7304 10.789 17.7304 11.211 17.4707 11.4707L13.4707 15.4707C13.211 15.7304 12.789 15.7304 12.5293 15.4707C12.2696 15.211 12.2696 14.789 12.5293 14.5293L15.3936 11.665H6C3.97588 11.665 2.33496 10.0241 2.33496 8V4.5C2.33496 4.13273 2.63273 3.83496 3 3.83496C3.36727 3.83496 3.66504 4.13273 3.66504 4.5V8C3.66504 9.28958 4.71042 10.335 6 10.335H15.3936L12.5293 7.4707L12.4443 7.36621C12.2738 7.10808 12.302 6.75657 12.5293 6.5293Z">
                     </path>
@@ -21,10 +18,7 @@
             </div>
 
             <div>
-                <wally-button
-                    [variant]="'ghost'"
-                    [rounded]="true"
-                    [ariaLabel]="'Clear selected context'">
+                <wally-button [variant]="'ghost'" [rounded]="true" [ariaLabel]="'Clear selected context'">
                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                         stroke="currentColor" class="size-5" aria-hidden="true">
                         <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
@@ -40,30 +34,169 @@
 
     <!-- Action Buttons -->
     <div class="w-full flex justify-between px-2 pb-2" role="toolbar" aria-label="Composer actions">
-        <div class="size-10">
-            <wally-tooltip [text]="'Add files and more'" position="bottom">
-                <wally-button
-                    [variant]="'ghost'"
-                    [rounded]="true"
-                    [ariaLabel]="'Add attachment or insert content'">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
-                        stroke="currentColor" class="size-5" aria-hidden="true">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
-                    </svg>
+        <div class="w-full flex items-center gap-1">
+            <div class="size-10">
+                <wally-dropdown-menu>
+                    <wally-dropdown-menu-trigger>
+                        <wally-tooltip [text]="'Add files and more'" position="bottom">
+                            <wally-button [variant]="'ghost'" [rounded]="true"
+                                [ariaLabel]="'Add attachment or insert content'">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
+                                    stroke="currentColor" class="size-5" aria-hidden="true">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+                                </svg>
+                            </wally-button>
+                        </wally-tooltip>
+                    </wally-dropdown-menu-trigger>
+
+                    <wally-dropdown-menu-content [position]="'top'">
+                        <!-- Grupo 1: Configurações da conta -->
+                        <wally-dropdown-menu-group [ariaLabel]="'Account settings'">
+                            <wally-dropdown-menu-item (click)="onItemClick()">
+                                <div class="flex items-center gap-3">
+                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                        stroke-width="1.5" stroke="currentColor" class="size-6">
+                                        <path stroke-linecap="round" stroke-linejoin="round"
+                                            d="M12 18v-5.25m0 0a6.01 6.01 0 0 0 1.5-.189m-1.5.189a6.01 6.01 0 0 1-1.5-.189m3.75 7.478a12.06 12.06 0 0 1-4.5 0m3.75 2.383a14.406 14.406 0 0 1-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 1 0-7.517 0c.85.493 1.509 1.333 1.509 2.316V18" />
+                                    </svg>
+
+                                    <span>
+                                        Think
+                                    </span>
+                                </div>
+                            </wally-dropdown-menu-item>
+
+                            <wally-dropdown-menu-item (click)="onItemClick()">
+                                <div class="flex items-center gap-3">
+                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                        stroke-width="1.5" stroke="currentColor" class="size-6">
+                                        <path stroke-linecap="round" stroke-linejoin="round"
+                                            d="M9 8.25H7.5a2.25 2.25 0 0 0-2.25 2.25v9a2.25 2.25 0 0 0 2.25 2.25h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25H15m0-3-3-3m0 0-3 3m3-3V15" />
+                                    </svg>
+
+                                    <span>
+                                        Upload File
+                                    </span>
+                                </div>
+                            </wally-dropdown-menu-item>
+
+                            <!-- Submenu -->
+                            <wally-dropdown-menu-sub>
+                                <wally-dropdown-menu-sub-trigger>
+                                    <div class="flex items-center gap-3">
+                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                            stroke-width="1.5" stroke="currentColor" class="size-6">
+                                            <path stroke-linecap="round" stroke-linejoin="round"
+                                                d="M6.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM12.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM18.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" />
+                                        </svg>
+
+                                        <span>
+                                            More
+                                        </span>
+                                    </div>
+                                </wally-dropdown-menu-sub-trigger>
+
+                                <wally-dropdown-menu-sub-content>
+                                    <wally-dropdown-menu-item (click)="onItemClick()">
+                                        <div class="flex items-center gap-3">
+                                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                                stroke-width="1.5" stroke="currentColor" class="size-6">
+                                                <path stroke-linecap="round" stroke-linejoin="round"
+                                                    d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418" />
+                                            </svg>
+
+                                            <span>
+                                                Search the web
+                                            </span>
+                                        </div>
+                                    </wally-dropdown-menu-item>
+                                    <wally-dropdown-menu-item (click)="onItemClick()">
+                                        <div class="flex items-center gap-3">
+                                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                                stroke-width="1.5" stroke="currentColor" class="size-6">
+                                                <path stroke-linecap="round" stroke-linejoin="round"
+                                                    d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" />
+                                            </svg>
+
+                                            <span>
+                                                Study
+                                            </span>
+                                        </div>
+                                    </wally-dropdown-menu-item>
+                                    <!-- <wally-dropdown-menu-item (click)="onItemClick()">
+                                        Privacidade
+                                    </wally-dropdown-menu-item> -->
+                                </wally-dropdown-menu-sub-content>
+                            </wally-dropdown-menu-sub>
+                        </wally-dropdown-menu-group>
+
+                        <!-- <wally-dropdown-menu-separator></wally-dropdown-menu-separator> -->
+
+                        <!-- Item individual -->
+                        <!-- <wally-dropdown-menu-item (click)="onItemClick()">
+                            Sair
+                        </wally-dropdown-menu-item> -->
+                    </wally-dropdown-menu-content>
+
+                </wally-dropdown-menu>
+            </div>
+
+            <div>
+                <wally-button variant="ghost" [rounded]="true">
+                    <div class="group flex items-center gap-2">
+                        <div
+                            class="max-w-0 group-hover:max-w-6 overflow-hidden transition-all duration-300 ease-in-out">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                                stroke="currentColor"
+                                class="opacity-0 group-hover:opacity-100 transition-opacity duration-300 size-6 rounded-full p-0.5 bg-neutral-300/40 dark:bg-white/10"
+                                aria-hidden="true">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+                            </svg>
+                        </div>
+
+                        <svg class="size-5" viewBox="0 0 400 600" fill="none" xmlns="http://www.w3.org/2000/svg"
+                            aria-hidden="true">
+                            <path
+                                d="M0 500C0 444.772 44.772 400 100 400H200V500C200 555.228 155.228 600 100 600C44.772 600 0 555.228 0 500Z"
+                                fill="#24CB71" />
+                            <path d="M200 0V200H300C355.228 200 400 155.228 400 100C400 44.772 355.228 0 300 0H200Z"
+                                fill="#FF7237" />
+                            <path
+                                d="M299.167 400C354.395 400 399.167 355.228 399.167 300C399.167 244.772 354.395 200 299.167 200C243.939 200 199.167 244.772 199.167 300C199.167 355.228 243.939 400 299.167 400Z"
+                                fill="#00B6FF" />
+                            <path d="M0 100C0 155.228 44.772 200 100 200H200V0H100C44.772 0 0 44.772 0 100Z"
+                                fill="#FF3737" />
+                            <path d="M0 300C0 355.228 44.772 400 100 400H200V200H100C44.772 200 0 244.772 0 300Z"
+                                fill="#874FFF" />
+                        </svg>
+
+                        <span class="text-base">Figma</span>
+                    </div>
                 </wally-button>
-            </wally-tooltip>
+            </div>
         </div>
 
-        <div class="size-10">
-            <wally-button
-                [variant]="'primary'"
-                [rounded]="true"
-                [ariaLabel]="'Send message'">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3"
-                    stroke="currentColor" class="size-5" aria-hidden="true">
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18" />
-                </svg>
-            </wally-button>
+        <div class="w-full size-10 flex gap-2 justify-end">
+            <div>
+                <wally-tooltip [text]="'Use voice input'" position="bottom">
+                    <wally-button [variant]="'ghost'" [rounded]="true" [ariaLabel]="'Send message'">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
+                            stroke="currentColor" class="size-6">
+                            <path stroke-linecap="round" stroke-linejoin="round"
+                                d="M12 18.75a6 6 0 0 0 6-6v-1.5m-6 7.5a6 6 0 0 1-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 0 1-3-3V4.5a3 3 0 1 1 6 0v8.25a3 3 0 0 1-3 3Z" />
+                        </svg>
+                    </wally-button>
+                </wally-tooltip>
+            </div>
+
+            <div>
+                <wally-button [variant]="'primary'" [rounded]="true" [ariaLabel]="'Send message'">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3"
+                        stroke="currentColor" class="size-5" aria-hidden="true">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18" />
+                    </svg>
+                </wally-button>
+            </div>
         </div>
     </div>
 </div>

package/playground/showcase/src/app/components/ai/ai-composer/ai-composer.ts

@@ -1,19 +1,41 @@
 import { Component } from '@angular/core';
 
+import { DropdownMenuSubTrigger } from '../../dropdown-menu/dropdown-menu-sub-trigger/dropdown-menu-sub-trigger';
+import { DropdownMenuSubContent } from '../../dropdown-menu/dropdown-menu-sub-content/dropdown-menu-sub-content';
+import { DropdownMenuSeparator } from '../../dropdown-menu/dropdown-menu-separator/dropdown-menu-separator';
+import { DropdownMenuTrigger } from '../../dropdown-menu/dropdown-menu-trigger/dropdown-menu-trigger';
+import { DropdownMenuContent } from '../../dropdown-menu/dropdown-menu-content/dropdown-menu-content';
+import { DropdownMenuLabel } from '../../dropdown-menu/dropdown-menu-label/dropdown-menu-label';
+import { DropdownMenuGroup } from '../../dropdown-menu/dropdown-menu-group/dropdown-menu-group';
+import { DropdownMenuItem } from '../../dropdown-menu/dropdown-menu-item/dropdown-menu-item';
+import { DropdownMenuSub } from '../../dropdown-menu/dropdown-menu-sub/dropdown-menu-sub';
 import { AiPromptInput } from '../ai-prompt-input/ai-prompt-input';
-import { Button } from '../../button/button';
+import { DropdownMenu } from '../../dropdown-menu/dropdown-menu';
 import { Tooltip } from '../../tooltip/tooltip';
+import { Button } from '../../button/button';
 
 @Component({
   selector: 'wally-ai-composer',
   imports: [
     AiPromptInput,
     Tooltip,
-    Button
+    Button,
+    DropdownMenu,
+    DropdownMenuTrigger,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+    DropdownMenuGroup,
+    DropdownMenuSub,
+    DropdownMenuSubTrigger,
+    DropdownMenuSubContent
   ],
   templateUrl: './ai-composer.html',
   styleUrl: './ai-composer.css'
 })
 export class AiComposer {
-
+  onItemClick(): void {
+    console.log('Item clicked');
+  }
 }

package/playground/showcase/src/app/components/ai/ai-prompt-input/ai-prompt-input.html

@@ -1,4 +1,4 @@
-<textarea #textarea id="ai-prompt-input" class="w-full h-auto max-h-60 text-base placeholder:text-neutral-400 dark:text-white dark:placeholder:text-neutral-500 resize-none focus:outline-none focus:ring-0 overflow-y-auto [&::-webkit-scrollbar]:w-2
+<textarea #textarea id="ai-prompt-input" class="w-full h-auto max-h-48 text-base placeholder:text-neutral-400 dark:text-white dark:placeholder:text-neutral-500 resize-none focus:outline-none focus:ring-0 overflow-y-auto [&::-webkit-scrollbar]:w-2
       [&::-webkit-scrollbar-track]:bg-transparent
       [&::-webkit-scrollbar-thumb]:bg-neutral-300
       [&::-webkit-scrollbar-thumb]:rounded-full

package/playground/showcase/src/app/components/badge/badge.html

@@ -0,0 +1,3 @@
+<div [class]="'w-auto py-1.5 px-3 rounded-full ' + variantClasses()">
+    <ng-content></ng-content>
+</div>

package/playground/showcase/src/app/components/badge/badge.ts

@@ -0,0 +1,24 @@
+import { Component, computed, input, InputSignal, Signal } from '@angular/core';
+
+type Variant = 'default' | 'outline' | 'secondary' | 'destructive';
+
+@Component({
+  selector: 'wally-badge',
+  imports: [],
+  templateUrl: './badge.html',
+  styleUrl: './badge.css'
+})
+export class Badge {
+  variant: InputSignal<Variant> = input<Variant>('default');
+
+  variantClasses: Signal<string> = computed(() => {
+    const variantMap: Record<Variant, string> = {
+      default: '#0a0a0a] hover:bg-[#0a0a0a]/85 disabled:bg-[#0a0a0a]/85 dark:text-[#0a0a0a] dark:bg-white dark:hover:bg-white/85 dark:disabled:bg-white/85 dark:disabled:text-[#0a0a0a]/60 shadow',
+      outline: '',
+      secondary: '',
+      destructive: ''
+    };
+
+    return variantMap[this.variant()] || variantMap.default;
+  });
+}

package/playground/showcase/src/app/components/button/button.html

@@ -1,8 +1,6 @@
 <button [type]="type()" [disabled]="disabled() || loading()" [attr.aria-label]="ariaLabel() || null"
     [attr.aria-describedby]="ariaDescribedBy() || null" [attr.aria-pressed]="ariaPressed()" [attr.aria-busy]="loading()"
-    (click)="handleClick()"
-    [class]="'group relative w-full flex items-center justify-center gap-2 text-sm font-medium text-white disabled:pointer-events-none p-2.5 transition-all duration-300 ease-in-out antialiased cursor-pointer ' + variantClasses()"
-    [ngClass]="{
+    (click)="handleClick()" [class]="'group relative w-full flex items-center justify-center gap-2 text-sm font-medium text-white active:scale-95 disabled:pointer-events-none p-2.5 disabled:active:scale-100 transition-all duration-300 ease-in-out antialiased cursor-pointer ' + variantClasses()" [ngClass]="{
       'rounded-md': !rounded(),
       'rounded-full': rounded()
     }">

package/playground/showcase/src/app/components/button/button.ts

@@ -33,10 +33,10 @@ export class Button {
   // Computed classes based on variant
   variantClasses: Signal<string> = computed(() => {
     const variantMap: Record<ButtonVariant, string> = {
-      primary: 'bg-[#0a0a0a] hover:bg-[#0a0a0a]/85 disabled:bg-[#0a0a0a]/85 dark:text-[#0a0a0a] dark:bg-white dark:hover:bg-white/85 dark:disabled:bg-white/85 dark:disabled:text-[#0a0a0a]/60',
-      secondary: '!text-[#0a0a0a] bg-neutral-200 hover:bg-neutral-200/60 disabled:bg-neutral-200/80 disabled:!text-neutral-400 dark:!text-white dark:bg-white/20 dark:hover:bg-white/10 dark:disabled:bg-white/5 dark:disabled:text-white/50',
-      destructive: 'dark:text-white bg-red-500 hover:bg-red-500/80 disabled:bg-red-500/80 disabled:text-white/80 dark:disabled:text-white/60',
-      outline: '!text-[#0a0a0a] bg-transparent border border-neutral-400 hover:bg-neutral-200/60 disabled:!text-neutral-500 dark:!text-white dark:border-neutral-500 dark:bg-neutral-500/10 dark:hover:bg-neutral-500/20 dark:disabled:!text-white/60',
+      primary: 'bg-[#0a0a0a] hover:bg-[#0a0a0a]/85 disabled:bg-[#0a0a0a]/85 dark:text-[#0a0a0a] dark:bg-white dark:hover:bg-white/85 dark:disabled:bg-white/85 dark:disabled:text-[#0a0a0a]/60 shadow',
+      secondary: '!text-[#0a0a0a] bg-neutral-200 hover:bg-neutral-200/60 disabled:bg-neutral-200/80 disabled:!text-neutral-400 dark:!text-white dark:bg-white/20 dark:hover:bg-white/10 dark:disabled:bg-white/5 dark:disabled:text-white/50 shadow',
+      destructive: 'dark:text-white bg-red-500 hover:bg-red-500/80 disabled:bg-red-500/80 disabled:text-white/80 dark:disabled:text-white/60 shadow',
+      outline: '!text-[#0a0a0a] bg-transparent border border-neutral-400 hover:bg-neutral-200/60 disabled:!text-neutral-500 dark:!text-white dark:border-neutral-500 dark:bg-neutral-500/10 dark:hover:bg-neutral-500/20 dark:disabled:!text-white/60 shadow',
       ghost: '!text-[#0a0a0a] bg-transparent hover:bg-neutral-100 disabled:!text-neutral-400 dark:!text-white dark:hover:bg-white/5 dark:disabled:!text-white/50',
       link: '!text-blue-600 bg-transparent underline-offset-4 hover:underline disabled:!text-blue-400 dark:!text-blue-600 dark:hover:!text-blue-500 dark:disabled:!text-blue-400'
     };

package/playground/showcase/src/app/components/dropdown-menu/dropdown-menu-content/dropdown-menu-content.html

@@ -0,0 +1,9 @@
+@if (dropdownMenuService.isOpen()) {
+<div
+    (mouseenter)="onMouseEnter()"
+    (mouseleave)="onMouseLeave()"
+    [class]="'absolute bg-white dark:bg-[#1b1b1b] dark:border-neutral-700 rounded-xl shadow-2xl border border-neutral-300 min-w-72 z-50 transition-all duration-200 ease-out ' + positionClasses()"
+    role="menu">
+    <ng-content></ng-content>
+</div>
+}

package/playground/showcase/src/app/components/dropdown-menu/dropdown-menu-content/dropdown-menu-content.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DropdownMenuContent } from './dropdown-menu-content';
+
+describe('DropdownMenuContent', () => {
+  let component: DropdownMenuContent;
+  let fixture: ComponentFixture<DropdownMenuContent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DropdownMenuContent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DropdownMenuContent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/playground/showcase/src/app/components/dropdown-menu/dropdown-menu-content/dropdown-menu-content.ts

@@ -0,0 +1,167 @@
+import { Component, computed, effect, ElementRef, input, signal } from '@angular/core';
+
+import { DropdownMenuService } from '../dropdown-menu.service';
+
+export type DropdownPosition = 'bottom' | 'top' | 'left' | 'right';
+
+@Component({
+  selector: 'wally-dropdown-menu-content',
+  imports: [],
+  templateUrl: './dropdown-menu-content.html',
+  styleUrl: './dropdown-menu-content.css'
+})
+export class DropdownMenuContent {
+  position = input<DropdownPosition>('bottom');
+
+  calculatedPosition = signal<DropdownPosition>('bottom');
+
+  positionClasses = computed(() => {
+    const position = this.calculatedPosition();
+    const scrollClasses = 'max-h-96 overflow-visible';
+
+    const positionMap = {
+      bottom: 'top-full mt-1 left-0',
+      top: 'bottom-full mb-1 left-0',
+      right: 'left-full ml-1 top-0',
+      left: 'right-full mr-1 top-0'
+    };
+
+    return `${scrollClasses} ${positionMap[position]}`;
+  });
+
+  constructor(
+    public dropdownMenuService: DropdownMenuService,
+    private elementRef: ElementRef
+  ) {
+    effect(() => {
+      if (this.dropdownMenuService.isOpen()) {
+        setTimeout(() => {
+          const bestPosition = this.calculateBestPosition();
+          this.calculatedPosition.set(bestPosition);
+        }, 0);
+      }
+    });
+  }
+
+  /**
+   * Measures available space around the trigger element in all directions.
+   * @returns Object containing trigger dimensions and available space, or null if trigger not found
+   */
+  private measureAvailableSpace(): {
+    triggerRect: any;
+    spaceAbove: any;
+    spaceBelow: number;
+    spaceLeft: any;
+    spaceRight: number;
+  } | null {
+    const triggerElement = this.elementRef.nativeElement.parentElement;
+
+    if (!triggerElement) {
+      return null;
+    }
+
+    const triggerRect = triggerElement.getBoundingClientRect();
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+
+    const spaceAbove = triggerRect.top;
+    const spaceBelow = viewportHeight - triggerRect.bottom;
+    const spaceLeft = triggerRect.left;
+    const spaceRight = viewportWidth - triggerRect.right;
+
+    return {
+      triggerRect,
+      spaceAbove,
+      spaceBelow,
+      spaceLeft,
+      spaceRight
+    };
+  }
+
+  /**
+   * Calculates the best position for the dropdown based on available viewport space.
+   * Falls back to alternative positions if preferred position doesn't fit.
+   * @returns The optimal dropdown position
+   */
+  private calculateBestPosition(): DropdownPosition {
+    const space = this.measureAvailableSpace();
+
+    if (!space) {
+      return this.position();
+    }
+
+    const menuDimensions = this.getMenuDimensions();
+    const MENU_MIN_HEIGHT = menuDimensions.height + 20;
+    const MENU_MIN_WIDTH = menuDimensions.width + 20;
+
+    const preferred = this.position();
+
+    switch (preferred) {
+      case 'bottom':
+        if (space.spaceBelow >= MENU_MIN_HEIGHT) return 'bottom';
+        if (space.spaceAbove >= MENU_MIN_HEIGHT) return 'top';
+        if (space.spaceRight >= MENU_MIN_WIDTH) return 'right';
+        return 'left';
+
+      case 'top':
+        if (space.spaceAbove >= MENU_MIN_HEIGHT) return 'top';
+        if (space.spaceBelow >= MENU_MIN_HEIGHT) return 'bottom';
+        if (space.spaceRight >= MENU_MIN_WIDTH) return 'right';
+        return 'left';
+
+      case 'right':
+        if (space.spaceRight >= MENU_MIN_WIDTH) return 'right';
+        if (space.spaceLeft >= MENU_MIN_WIDTH) return 'left';
+        if (space.spaceBelow >= MENU_MIN_HEIGHT) return 'bottom';
+        return 'top';
+
+      case 'left':
+        if (space.spaceLeft >= MENU_MIN_WIDTH) return 'left';
+        if (space.spaceRight >= MENU_MIN_WIDTH) return 'right';
+        if (space.spaceBelow >= MENU_MIN_HEIGHT) return 'bottom';
+        return 'top';
+
+      default:
+        return 'bottom';
+    }
+  }
+
+  private getMenuDimensions(): {
+    height: number;
+    width: number;
+  } {
+    const menuElement = this.elementRef.nativeElement.querySelector('[role="menu"]');
+
+    if (!menuElement) {
+      return {
+        height: 200,
+        width: 224
+      };
+    }
+
+    const rect = menuElement.getBoundingClientRect();
+
+    return {
+      height: rect.height || 200,
+      width: rect.width || 224
+    };
+  }
+
+  onMouseEnter(): void {
+    if (this.dropdownMenuService.triggerMode() === 'hover') {
+      this.dropdownMenuService.setHoveringContent(true);
+    }
+  }
+
+  onMouseLeave(): void {
+    if (this.dropdownMenuService.triggerMode() === 'hover') {
+      this.dropdownMenuService.setHoveringContent(false);
+
+      setTimeout(() => {
+        if (!this.dropdownMenuService.isHoveringContent()) {
+          this.dropdownMenuService.close();
+        }
+      }, 100);
+    }
+  }
+}

package/playground/showcase/src/app/components/dropdown-menu/dropdown-menu-group/dropdown-menu-group.html

@@ -0,0 +1,5 @@
+<div
+    role="group"
+    [attr.aria-label]="ariaLabel() || null">
+    <ng-content></ng-content>
+</div>

package/playground/showcase/src/app/components/dropdown-menu/dropdown-menu-group/dropdown-menu-group.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DropdownMenuGroup } from './dropdown-menu-group';
+
+describe('DropdownMenuGroup', () => {
+  let component: DropdownMenuGroup;
+  let fixture: ComponentFixture<DropdownMenuGroup>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DropdownMenuGroup]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DropdownMenuGroup);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});