wally-ui 1.16.0 → 1.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wally-ui",
-  "version": "1.16.0",
+  "version": "1.17.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"
@@ -58,4 +58,4 @@
     "commander": "^14.0.1",
     "fs-extra": "^11.3.2"
   }
-}
+}

package/playground/showcase/src/app/components/combobox/combobox-content/combobox-content.css

@@ -0,0 +1,33 @@
+[role="listbox"] {
+  scrollbar-width: thin;
+  scrollbar-color: #d4d4d4 transparent;
+}
+
+[role="listbox"]::-webkit-scrollbar {
+  width: 8px;
+}
+
+[role="listbox"]::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+[role="listbox"]::-webkit-scrollbar-thumb {
+  background: #d4d4d4;
+  border-radius: 4px;
+}
+
+.dark [role="listbox"] {
+  scrollbar-color: #525252 #1b1b1b;
+}
+
+.dark [role="listbox"]::-webkit-scrollbar-track {
+  background: #1b1b1b;
+}
+
+.dark [role="listbox"]::-webkit-scrollbar-thumb {
+  background: #525252;
+}
+
+.dark [role="listbox"]::-webkit-scrollbar-thumb:hover {
+  background: #737373;
+}

package/playground/showcase/src/app/components/combobox/combobox-content/combobox-content.ts

@@ -30,7 +30,7 @@ export class ComboboxContent {
 
   positionClasses = computed(() => {
     const position = this.calculatedPosition();
-    const scrollClasses = 'max-h-96 overflow-y-auto';
+    const scrollClasses = 'max-h-60 sm:max-h-80 md:max-h-96 overflow-y-auto';
 
     const positionMap = {
       bottom: 'top-full mt-2 left-0',

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

@@ -2,7 +2,7 @@
 <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()"
+    [class]="'absolute bg-white dark:bg-[#1b1b1b] dark:border-neutral-700 rounded-xl shadow-2xl border border-neutral-300 min-w-48 sm:min-w-56 md:min-w-64 lg:min-w-72 max-w-[calc(100vw-2rem)] 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.ts

@@ -1,4 +1,4 @@
-import { Component, computed, effect, ElementRef, input, signal } from '@angular/core';
+import { Component, computed, effect, ElementRef, HostListener, input, signal } from '@angular/core';
 
 import { DropdownMenuService } from '../dropdown-menu.service';
 
@@ -43,6 +43,17 @@ export class DropdownMenuContent {
     });
   }
 
+  /**
+   * Recalculates position on window resize to maintain optimal placement
+   */
+  @HostListener('window:resize')
+  onResize(): void {
+    if (this.dropdownMenuService.isOpen()) {
+      const bestPosition = this.calculateBestPosition();
+      this.calculatedPosition.set(bestPosition);
+    }
+  }
+
   /**
    * Measures available space around the trigger element in all directions.
    * @returns Object containing trigger dimensions and available space, or null if trigger not found
@@ -135,7 +146,7 @@ export class DropdownMenuContent {
     if (!menuElement) {
       return {
         height: 200,
-        width: 224
+        width: Math.min(224, window.innerWidth - 32)
       };
     }
 

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

@@ -2,7 +2,7 @@
 <div
   (mouseenter)="onMouseEnter()"
   (mouseleave)="onMouseLeave()"
-  [class]="'absolute bg-white dark:bg-[#1b1b1b] rounded-xl shadow-2xl border border-neutral-300 dark:border-neutral-700 min-w-56 z-50 transition-all duration-200 ease-out ' + positionClasses()"
+  [class]="'absolute bg-white dark:bg-[#1b1b1b] rounded-xl shadow-2xl border border-neutral-300 dark:border-neutral-700 min-w-40 sm:min-w-48 md:min-w-56 max-w-[calc(100vw-2rem)] 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-sub-content/dropdown-menu-sub-content.ts

@@ -17,10 +17,10 @@ export class DropdownMenuSubContent {
     const position = this.calculatedPosition();
 
     const positionMap = {
-      right: 'top-0 left-full ml-1',
-      left: 'top-0 right-full mr-1',
-      bottom: 'left-0 top-full mt-1',
-      top: 'left-0 bottom-full mb-1'
+      right: 'top-0 left-full',
+      left: 'top-0 right-full',
+      bottom: 'left-0 top-full',
+      top: 'left-0 bottom-full'
     };
 
     return positionMap[position];
@@ -111,7 +111,7 @@ export class DropdownMenuSubContent {
     if (!menuElement) {
       return {
         height: 200,
-        width: 224
+        width: Math.min(224, window.innerWidth - 32)
       };
     }
 
@@ -125,7 +125,6 @@ export class DropdownMenuSubContent {
 
   onMouseEnter(): void {
     this.subService.setHoveringContent(true);
-    this.subService.open();
   }
 
   onMouseLeave(): void {

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

@@ -1,4 +1,4 @@
-<main class="min-h-dvh bg-white dark:bg-[#0a0a0a] " role="main">
+<main class="min-h-dvh bg-white dark:bg-[#0a0a0a] font-mono" role="main">
   <div class="max-w-4xl mx-auto px-4 py-8 sm:px-6 md:px-8">
 
     <!-- Breadcrumb Navigation -->

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

@@ -152,6 +152,33 @@
           </a>
         </article>
 
+        <!-- Combobox Component -->
+        <article class="group border-b-2 border-neutral-300 dark:border-neutral-700 last:border-b-0" role="article"
+          aria-labelledby="combobox-heading">
+          <a href="/documentation/components/combobox"
+            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 Combobox component documentation with search, multi-select support, keyboard navigation, and intelligent viewport-aware positioning">
+            <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="combobox-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>Combobox
+                  </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">
+                  Flexible combobox with search, multi-select support, keyboard navigation, and intelligent viewport-aware positioning. Features input and custom trigger modes, item grouping, virtual scrolling, and zero external dependencies.
+                </p>
+              </div>
+            </div>
+          </a>
+        </article>
+
         <!-- Dropdown Menu Component -->
         <article class="group border-b-2 border-neutral-300 dark:border-neutral-700 last:border-b-0" role="article"
           aria-labelledby="dropdown-menu-heading">

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

@@ -400,5 +400,27 @@ export class ExampleComponent {
       Close
     </wally-dropdown-menu-item>
   </wally-dropdown-menu-content>
-</wally-dropdown-menu>`
+</wally-dropdown-menu>`,
+
+  centeredPosition: `<!-- Centralized trigger to test responsive positioning -->
+<div class="flex justify-center items-center min-h-[400px]">
+  <wally-dropdown-menu>
+    <wally-dropdown-menu-trigger>
+      <wally-button variant="outline">Centered Menu</wally-button>
+    </wally-dropdown-menu-trigger>
+
+    <wally-dropdown-menu-content>
+      <wally-dropdown-menu-item (click)="onProfile()">
+        Profile
+      </wally-dropdown-menu-item>
+      <wally-dropdown-menu-item (click)="onSettings()">
+        Settings
+      </wally-dropdown-menu-item>
+      <wally-dropdown-menu-separator></wally-dropdown-menu-separator>
+      <wally-dropdown-menu-item (click)="onLogout()">
+        Log out
+      </wally-dropdown-menu-item>
+    </wally-dropdown-menu-content>
+  </wally-dropdown-menu>
+</div>`
 };