npm - wally-ui - Versions diffs - 1.9.0 → 1.10.0 - Mend

wally-ui 1.9.0 → 1.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "wally-ui",
-  "version": "1.9.0",
+  "version": "1.10.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/components/button/button.html CHANGED Viewed

@@ -1,28 +1,10 @@
-<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-white text-sm font-medium dark:text-[#0a0a0a]
-        bg-[#0a0a0a] hover:bg-[#0a0a0a]/85
-        disabled:bg-[#0a0a0a]/85
-        dark:bg-white dark:hover:bg-white/85
-        dark:disabled:bg-white/85
-        disabled:pointer-events-none
-        p-2.5
-        rounded-md
-        transition duration-300 ease-in-out
-        antialiased
-        cursor-pointer
-    ">
+<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 disabled:pointer-events-none p-2.5 rounded-md transition duration-300 ease-in-out antialiased cursor-pointer
+    " [ngClass]="{
+        'text-white dark:text-[#0a0a0a] bg-[#0a0a0a] hover:bg-[#0a0a0a]/85 disabled:bg-[#0a0a0a]/85 dark:bg-white dark:hover:bg-white/85 dark:disabled:bg-white/85 dark:disabled:text-[#0a0a0a]/60': variant() === 'primary',
+        'text-[#0a0a0a] bg-neutral-200 hover:bg-neutral-200/60 disabled:bg-neutral-200/60 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': variant() === 'secondary',
+    }">
     @if (showNotification()) {
     <span class="absolute top-0 right-0 -mt-1 -mr-1 flex size-3">
@@ -34,8 +16,10 @@
     }
     @if (loading()) {
-    <svg class="size-4 animate-spin text-white dark:text-[#0a0a0a]" xmlns="http://www.w3.org/2000/svg" fill="none"
-        viewBox="0 0 24 24">
+    <svg class="size-4 animate-spin" [ngClass]="{
+            'text-white dark:text-[#0a0a0a]': variant() === 'primary',
+            'dark:text-white': variant() === 'secondary',
+        }" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
         <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
         <path class="opacity-75" fill="currentColor"
             d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">

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

@@ -1,6 +1,8 @@
 import { Component, input, InputSignal, output, OutputEmitterRef } from '@angular/core';
 import { CommonModule } from '@angular/common';
+type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive';
 @Component({
   selector: 'wally-button',
   imports: [
@@ -14,6 +16,7 @@ export class Button {
   disabled: InputSignal<boolean> = input<boolean>(false);
   loading: InputSignal<boolean> = input<boolean>(false);
   showNotification: InputSignal<boolean> = input<boolean>(false);
+  variant: InputSignal<ButtonVariant> = input<ButtonVariant>('primary');
   // Accessibility properties
   ariaLabel: InputSignal<string> = input<string>('');

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

@@ -15,6 +15,10 @@ export const ButtonCodeExamples = {
   // Basic usage
   basicUsage: `<wally-button>Wally Button</wally-button>`,
+  // Variants
+  primaryVariant: `<wally-button variant="primary">Primary Button</wally-button>`,
+  secondaryVariant: `<wally-button variant="secondary">Secondary Button</wally-button>`,
   // States
   disabled: `<wally-button [disabled]="true">Disabled</wally-button>`,
   loading: `<wally-button [loading]="true">Loading</wally-button>`,

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

@@ -70,6 +70,10 @@
           <wally-button [loading]="true">
             Loading
           </wally-button>
+          <wally-button variant="primary">Primary Button</wally-button>
+          <wally-button variant="secondary">Secondary Button</wally-button>
+          <wally-button variant="secondary" [disabled]="true">Secondary Disabled</wally-button>
+          <wally-button variant="secondary" [loading]="true">Secondary Loading</wally-button>
           <div class="w-full flex justify-center items-center gap-2">
             <div class="w-full">
@@ -134,6 +138,45 @@
       </div>
     </section>
+    <!-- Button Variants -->
+    <section class="mb-8">
+      <h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">
+        Button Variants
+      </h2>
+      <div class="space-y-8">
+        <!-- Primary Variant -->
+        <div>
+          <h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">
+            Primary (Default)
+          </h3>
+          <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
+            <pre><code [innerHTML]="primaryVariantCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+          </div>
+          <div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
+            <wally-button variant="primary">Primary Button</wally-button>
+          </div>
+        </div>
+        <!-- Secondary Variant -->
+        <div>
+          <h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">
+            Secondary
+          </h3>
+          <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
+            <pre><code [innerHTML]="secondaryVariantCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+          </div>
+          <div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
+            <div class="flex flex-col gap-2">
+              <wally-button variant="secondary">Secondary Button</wally-button>
+              <wally-button variant="secondary" [disabled]="true">Secondary Disabled</wally-button>
+              <wally-button variant="secondary" [loading]="true">Secondary Loading</wally-button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
     <!-- States -->
     <section class="mb-8">
       <h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">
@@ -287,8 +330,10 @@
           </div>
           <div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
             <wally-button ariaLabel="Save document">
-              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0z" />
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                stroke="currentColor" class="size-5">
+                <path stroke-linecap="round" stroke-linejoin="round"
+                  d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0z" />
               </svg>
             </wally-button>
           </div>
@@ -318,65 +363,101 @@
               Processing...
             </wally-button>
           </div>
-          <p class="text-sm text-gray-600 dark:text-gray-400 mt-2">
-            Automatically sets <code class="bg-gray-200 dark:bg-[#121212] px-1 py-0.5 rounded text-xs">aria-busy="true"</code> when loading
-          </p>
         </div>
       </div>
     </section>
-    <!-- Properties -->
+    <!-- API Reference -->
     <section class="mb-8">
-      <h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Properties</h2>
-      <div class="space-y-4">
-        <div class="space-y-2">
-          <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
-            <pre><code [innerHTML]="propertyTypeCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
-          </div>
-          <p class="text-sm text-gray-700 dark:text-gray-400">HTML button type (button, submit, reset)</p>
-        </div>
-        <div class="space-y-2">
-          <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
-            <pre><code [innerHTML]="propertyDisabledCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
-          </div>
-          <p class="text-sm text-gray-700 dark:text-gray-400">Whether the button is disabled</p>
-        </div>
-        <div class="space-y-2">
-          <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
-            <pre><code [innerHTML]="propertyLoadingCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
-          </div>
-          <p class="text-sm text-gray-700 dark:text-gray-400">Shows loading spinner when true</p>
-        </div>
-        <div class="space-y-2">
-          <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
-            <pre><code [innerHTML]="propertyShowNotificationCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
-          </div>
-          <p class="text-sm text-gray-700 dark:text-gray-400">Shows notification badge when true</p>
-        </div>
-        <div class="space-y-2">
-          <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
-            <pre><code [innerHTML]="propertyAriaLabelCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
-          </div>
-          <p class="text-sm text-gray-700 dark:text-gray-400">Accessible label for screen readers (essential for icon-only buttons)</p>
-        </div>
-        <div class="space-y-2">
-          <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
-            <pre><code [innerHTML]="propertyAriaPressedCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
-          </div>
-          <p class="text-sm text-gray-700 dark:text-gray-400">Indicates pressed state for toggle buttons</p>
+      <h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">API Reference</h2>
+      <div class="bg-white dark:bg-[#0f0f0f] border border-gray-200 dark:border-gray-800 rounded-lg overflow-hidden">
+        <div class="overflow-x-auto">
+          <table class="w-full text-sm">
+            <thead class="bg-gray-50 dark:bg-gray-900">
+              <tr>
+                <th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Property</th>
+                <th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Type</th>
+                <th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Default</th>
+                <th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Description</th>
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
+              <tr>
+                <td class="p-4 font-mono text-blue-600 dark:text-blue-400">type</td>
+                <td class="p-4 font-mono text-purple-600 dark:text-purple-400">string</td>
+                <td class="p-4 font-mono text-green-600 dark:text-green-400">'button'</td>
+                <td class="p-4 text-gray-700 dark:text-gray-300">HTML button type (button, submit, reset)</td>
+              </tr>
+              <tr>
+                <td class="p-4 font-mono text-blue-600 dark:text-blue-400">variant</td>
+                <td class="p-4 font-mono text-purple-600 dark:text-purple-400">'primary' | 'secondary'</td>
+                <td class="p-4 font-mono text-green-600 dark:text-green-400">'primary'</td>
+                <td class="p-4 text-gray-700 dark:text-gray-300">Button visual style variant</td>
+              </tr>
+              <tr>
+                <td class="p-4 font-mono text-blue-600 dark:text-blue-400">disabled</td>
+                <td class="p-4 font-mono text-purple-600 dark:text-purple-400">boolean</td>
+                <td class="p-4 font-mono text-green-600 dark:text-green-400">false</td>
+                <td class="p-4 text-gray-700 dark:text-gray-300">Whether the button is disabled</td>
+              </tr>
+              <tr>
+                <td class="p-4 font-mono text-blue-600 dark:text-blue-400">loading</td>
+                <td class="p-4 font-mono text-purple-600 dark:text-purple-400">boolean</td>
+                <td class="p-4 font-mono text-green-600 dark:text-green-400">false</td>
+                <td class="p-4 text-gray-700 dark:text-gray-300">Shows loading spinner and disables button</td>
+              </tr>
+              <tr>
+                <td class="p-4 font-mono text-blue-600 dark:text-blue-400">showNotification</td>
+                <td class="p-4 font-mono text-purple-600 dark:text-purple-400">boolean</td>
+                <td class="p-4 font-mono text-green-600 dark:text-green-400">false</td>
+                <td class="p-4 text-gray-700 dark:text-gray-300">Shows notification badge indicator</td>
+              </tr>
+              <tr>
+                <td class="p-4 font-mono text-blue-600 dark:text-blue-400">ariaLabel</td>
+                <td class="p-4 font-mono text-purple-600 dark:text-purple-400">string</td>
+                <td class="p-4 font-mono text-green-600 dark:text-green-400">''</td>
+                <td class="p-4 text-gray-700 dark:text-gray-300">Accessible label for screen readers (essential for icon-only buttons)</td>
+              </tr>
+              <tr>
+                <td class="p-4 font-mono text-blue-600 dark:text-blue-400">ariaPressed</td>
+                <td class="p-4 font-mono text-purple-600 dark:text-purple-400">boolean | undefined</td>
+                <td class="p-4 font-mono text-green-600 dark:text-green-400">undefined</td>
+                <td class="p-4 text-gray-700 dark:text-gray-300">Indicates pressed state for toggle buttons</td>
+              </tr>
+              <tr>
+                <td class="p-4 font-mono text-blue-600 dark:text-blue-400">ariaDescribedBy</td>
+                <td class="p-4 font-mono text-purple-600 dark:text-purple-400">string</td>
+                <td class="p-4 font-mono text-green-600 dark:text-green-400">''</td>
+                <td class="p-4 text-gray-700 dark:text-gray-300">References element(s) that describe the button</td>
+              </tr>
+            </tbody>
+          </table>
         </div>
+      </div>
-        <div class="space-y-2">
-          <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
-            <pre><code [innerHTML]="propertyAriaDescribedByCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+      <!-- Events Table -->
+      <div class="mt-6">
+        <h3 class="text-md font-medium mb-4 text-[#0a0a0a] dark:text-white">Events</h3>
+        <div class="bg-white dark:bg-[#0f0f0f] border border-gray-200 dark:border-gray-800 rounded-lg overflow-hidden">
+          <div class="overflow-x-auto">
+            <table class="w-full text-sm">
+              <thead class="bg-gray-50 dark:bg-gray-900">
+                <tr>
+                  <th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Event</th>
+                  <th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Payload</th>
+                  <th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Description</th>
+                </tr>
+              </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-purple-600 dark:text-purple-400">void</td>
+                  <td class="p-4 text-gray-700 dark:text-gray-300">Emitted when button is clicked</td>
+                </tr>
+              </tbody>
+            </table>
           </div>
-          <p class="text-sm text-gray-700 dark:text-gray-400">References element(s) that describe the button</p>
         </div>
       </div>
     </section>
@@ -388,11 +469,11 @@
       <div class="space-y-4">
         <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
           <div class="flex items-center gap-2 mb-2">
-            <h3 class="text-md font-medium text-[#0a0a0a] dark:text-white">Button Variants</h3>
+            <h3 class="text-md font-medium text-[#0a0a0a] dark:text-white">Additional Button Variants</h3>
             <span class="text-xs bg-yellow-500 text-black px-2 py-1 rounded">Under Construction</span>
           </div>
           <p class="text-sm text-gray-700 dark:text-gray-400">
-            Multiple button styles including outline, ghost, destructive, and secondary variants.
+            Additional button styles including outline, ghost, and destructive variants.
           </p>
         </div>

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

@@ -29,6 +29,10 @@ export class ButtonDocs {
   importCode = getFormattedCode(ButtonCodeExamples.import, 'typescript');
   componentImportCode = getFormattedCode(ButtonCodeExamples.componentImport, 'typescript');
   basicUsageTemplateCode = getFormattedCode(ButtonCodeExamples.basicUsage, 'html');
+  // Variants
+  primaryVariantCode = getFormattedCode(ButtonCodeExamples.primaryVariant, 'html');
+  secondaryVariantCode = getFormattedCode(ButtonCodeExamples.secondaryVariant, 'html');
   disabledCode = getFormattedCode(ButtonCodeExamples.disabled, 'html');
   loadingCode = getFormattedCode(ButtonCodeExamples.loading, 'html');
   notificationCode = getFormattedCode(ButtonCodeExamples.notification, 'html');

package/playground/showcase/src/app/pages/documentation/documentation.html CHANGED Viewed

@@ -1,18 +1,19 @@
-<div class="max-w-4xl mx-auto p-6 font-mono">
-  <div class="mb-4">
+<main class="max-w-4xl mx-auto p-6 font-mono" role="main">
+  <nav class="mb-4" aria-label="Breadcrumb navigation">
     <wally-breadcrumb [items]="breadcrumbItems"></wally-breadcrumb>
-  </div>
-  <h1 class="text-2xl font-bold text-[#0a0a0a] dark:text-white mb-4">
-    Documentation
-  </h1>
-  <p class="text-gray-700 dark:text-gray-400 mb-6">
-    Welcome to Wally UI documentation. Learn how to get started and explore our component library.
-  </p>
-  <!-- Philosophy & Approach -->
-  <div id="philosophy" class="mb-8">
-    <h2 class="text-lg font-semibold text-[#0a0a0a] dark:text-white mb-4">
+  </nav>
+  <header class="mb-6">
+    <h1 class="text-2xl font-bold text-[#0a0a0a] dark:text-white mb-4">
+      Documentation
+    </h1>
+    <p class="text-gray-700 dark:text-gray-400">
+      Welcome to Wally UI documentation. Learn how to get started and explore our component library.
+    </p>
+  </header>
+  <section id="philosophy" class="mb-8" aria-labelledby="philosophy-heading">
+    <h2 id="philosophy-heading" class="text-lg font-semibold text-[#0a0a0a] dark:text-white mb-4">
       A Modern Approach to Angular UI Components
     </h2>
     <p class="text-gray-700 dark:text-gray-400 mb-4">
@@ -21,140 +22,143 @@
       via npx and becomes your code, ready to edit, customize, and evolve as needed.
     </p>
-    <div class="grid gap-3 md:grid-cols-2 mb-6">
-      <div class="bg-gray-200 dark:bg-[#121212] p-3 rounded-lg">
+    <div class="grid gap-3 md:grid-cols-2 mb-6" role="list" aria-label="Key features of Wally UI">
+      <article class="bg-gray-200 dark:bg-[#121212] p-3 rounded-lg" role="listitem">
         <h3 class="text-sm font-semibold text-[#0a0a0a] dark:text-white mb-2">No External Dependencies</h3>
         <p class="text-sm text-gray-700 dark:text-gray-400">
           You control the code, without being tied to third-party updates.
         </p>
-      </div>
+      </article>
-      <div class="bg-gray-200 dark:bg-[#121212] p-3 rounded-lg">
+      <article class="bg-gray-200 dark:bg-[#121212] p-3 rounded-lg" role="listitem">
         <h3 class="text-sm font-semibold text-[#0a0a0a] dark:text-white mb-2">Total Customization</h3>
         <p class="text-sm text-gray-700 dark:text-gray-400">
           Since the component is yours, it can be adapted to any design system or business rules.
         </p>
-      </div>
+      </article>
-      <div class="bg-gray-200 dark:bg-[#121212] p-3 rounded-lg">
+      <article class="bg-gray-200 dark:bg-[#121212] p-3 rounded-lg" role="listitem">
         <h3 class="text-sm font-semibold text-[#0a0a0a] dark:text-white mb-2">Lightweight</h3>
         <p class="text-sm text-gray-700 dark:text-gray-400">
           Only what you actually add goes into the bundle, without loading dozens of unused components.
         </p>
-      </div>
+      </article>
-      <div class="bg-gray-200 dark:bg-[#121212] p-3 rounded-lg">
+      <article class="bg-gray-200 dark:bg-[#121212] p-3 rounded-lg" role="listitem">
         <h3 class="text-sm font-semibold text-[#0a0a0a] dark:text-white mb-2">Tailwind Integrated</h3>
         <p class="text-sm text-gray-700 dark:text-gray-400">
           Modern, responsive, and consistent styles with the power of Tailwind CSS.
         </p>
-      </div>
+      </article>
-      <div class="bg-gray-200 dark:bg-[#121212] p-3 rounded-lg">
+      <article class="bg-gray-200 dark:bg-[#121212] p-3 rounded-lg" role="listitem">
         <h3 class="text-sm font-semibold text-[#0a0a0a] dark:text-white mb-2">Learning & Clarity</h3>
         <p class="text-sm text-gray-700 dark:text-gray-400">
           Each component serves as a practical example of Angular best practices.
         </p>
-      </div>
+      </article>
-      <div class="bg-gray-200 dark:bg-[#121212] p-3 rounded-lg">
+      <article class="bg-gray-200 dark:bg-[#121212] p-3 rounded-lg" role="listitem">
         <h3 class="text-sm font-semibold text-[#0a0a0a] dark:text-white mb-2">Standalone Components</h3>
         <p class="text-sm text-gray-700 dark:text-gray-400">
           Leverages Angular's latest features, reducing complexity and improving modularity.
         </p>
-      </div>
+      </article>
     </div>
     <p class="text-gray-700 dark:text-gray-400">
       With Wally UI, you gain agility to start projects, flexibility to shape your UI without limitations,
       and simplicity to maintain code long-term. It's the most practical and modern way to build Angular interfaces.
     </p>
-  </div>
+  </section>
-  <!-- Requirements -->
-  <div id="requirements" class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-6">
-    <h3 class="text-sm font-semibold text-[#0a0a0a] dark:text-white mb-3">Requirements</h3>
+  <section id="requirements" class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-6"
+    aria-labelledby="requirements-heading">
+    <h2 id="requirements-heading" class="text-sm font-semibold text-[#0a0a0a] dark:text-white mb-3">Requirements</h2>
-    <div class="space-y-3">
-      <div>
-        <p class="text-sm font-medium text-[#0a0a0a] dark:text-white mb-1">Angular Version</p>
+    <div class="space-y-3" role="list" aria-label="System requirements for Wally UI">
+      <div role="listitem">
+        <h3 class="text-sm font-medium text-[#0a0a0a] dark:text-white mb-1">Angular Version</h3>
         <p class="text-sm text-gray-700 dark:text-gray-400">
           Angular 17+ required for standalone component support
         </p>
       </div>
-      <div>
-        <p class="text-sm font-medium text-[#0a0a0a] dark:text-white mb-1">Tailwind CSS</p>
+      <div role="listitem">
+        <h3 class="text-sm font-medium text-[#0a0a0a] dark:text-white mb-1">Tailwind CSS</h3>
         <p class="text-sm text-gray-700 dark:text-gray-400 mb-2">
           Tailwind CSS v3 or v4 must be installed in your project.
         </p>
         <a href="https://tailwindcss.com/blog/tailwindcss-v4" target="_blank"
-          class="text-xs text-blue-500 underline hover:text-blue-700">
+          class="text-xs text-blue-500 underline hover:text-blue-700" rel="noopener noreferrer"
+          aria-label="Learn about Tailwind v4 (opens in new tab)">
           Learn about Tailwind v4
         </a>
       </div>
-      <div>
-        <p class="text-sm font-medium text-[#0a0a0a] dark:text-white mb-1">Installation</p>
+      <div role="listitem">
+        <h3 class="text-sm font-medium text-[#0a0a0a] dark:text-white mb-1">Installation</h3>
         <p class="text-sm text-gray-700 dark:text-gray-400 mb-2">
           Components are standalone and can be installed individually:
         </p>
-        <code class="text-sm text-[#0a0a0a] dark:text-white block">
+        <code class="text-sm text-[#0a0a0a] dark:text-white block" aria-label="Installation command example">
           npx wally-ui add {{ '<' }}component{{ '>' }}
         </code>
       </div>
     </div>
-  </div>
+  </section>
-  <!-- Important Notice -->
-  <div id="important-notice"
-    class="bg-yellow-100 dark:bg-yellow-900/20 border border-yellow-300 dark:border-yellow-700 p-4 rounded-lg mb-6">
-    <h3 class="text-sm font-semibold text-yellow-800 dark:text-yellow-200 mb-2">⚠️ Experimental Project</h3>
+  <aside id="important-notice"
+    class="bg-yellow-100 dark:bg-yellow-900/20 border border-yellow-300 dark:border-yellow-700 p-4 rounded-lg mb-6"
+    role="alert" aria-labelledby="experimental-heading">
+    <h2 id="experimental-heading" class="text-sm font-semibold text-yellow-800 dark:text-yellow-200 mb-2">⚠️
+      Experimental Project</h2>
     <p class="text-sm text-yellow-700 dark:text-yellow-300">
       Wally UI is currently in experimental development. Components may change and new features are being actively
       developed. Use in production with caution.
     </p>
-  </div>
+  </aside>
-  <!-- List Components -->
-  <div id="list-components" class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-6">
-    <h3 class="text-sm font-semibold text-[#0a0a0a] dark:text-white mb-2">List Available Components</h3>
-    <code class="text-sm text-[#0a0a0a] dark:text-white">
+  <section id="list-components" class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-6"
+    aria-labelledby="list-heading">
+    <h2 id="list-heading" class="text-sm font-semibold text-[#0a0a0a] dark:text-white mb-2">List Available Components
+    </h2>
+    <code class="text-sm text-[#0a0a0a] dark:text-white" aria-label="Command to list available components">
           npx wally-ui list
-        </code>
-  </div>
+    </code>
+  </section>
-  <!-- File Structure -->
-  <div id="installation-structure" class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-8">
-    <h3 class="text-sm font-semibold text-[#0a0a0a] dark:text-white mb-3">Installation Structure</h3>
+  <section id="installation-structure" class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-8"
+    aria-labelledby="structure-heading">
+    <h2 id="structure-heading" class="text-sm font-semibold text-[#0a0a0a] dark:text-white mb-3">Installation Structure
+    </h2>
     <p class="text-sm text-gray-700 dark:text-gray-400 mb-3">
       When installing a component, Wally UI will create the following folder structure:
     </p>
-    <div class="font-mono text-sm text-[#0a0a0a] dark:text-white">
-      <div>src/</div>
-      <div>└── app/</div>
-      <div>&nbsp;&nbsp;&nbsp;&nbsp;└── components/</div>
-      <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;└── wally-ui/</div>
-      <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;└── button/</div>
-      <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;├── button.ts
-      </div>
-      <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;└──
-        button.html</div>
-    </div>
-  </div>
-  <!-- Navigation to Components -->
-  <div class="space-y-4">
-    <h3 class="text-lg font-semibold text-[#0a0a0a] dark:text-white mb-4">Explore</h3>
-    <div class="bg-gray-200 dark:bg-[#121212] rounded-lg p-4">
-      <h4 class="text-md font-semibold text-[#0a0a0a] dark:text-white mb-2">Components</h4>
+    <pre class="font-mono text-sm text-[#0a0a0a] dark:text-white leading-tight" role="img"
+      aria-label="File structure diagram showing component installation path">
+src/
+└── app/
+    └── components/
+        └── wally-ui/
+            └── button/
+                ├── button.ts
+                └── button.html
+    </pre>
+  </section>
+  <section class="space-y-4" aria-labelledby="explore-heading">
+    <h2 id="explore-heading" class="text-lg font-semibold text-[#0a0a0a] dark:text-white mb-4">Explore</h2>
+    <article class="bg-gray-200 dark:bg-[#121212] rounded-lg p-4">
+      <h3 class="text-md font-semibold text-[#0a0a0a] dark:text-white mb-2">Components</h3>
       <p class="text-sm text-gray-700 dark:text-gray-400 mb-3">
         Browse our collection of reusable Angular components with examples and documentation.
       </p>
-      <a href="/documentation/components" class="text-blue-500 underline hover:text-blue-700 text-sm">
-        View Components →
+      <a [routerLink]="'/documentation/components'" class="text-blue-500 underline hover:text-blue-700 text-sm"
+        aria-label="Navigate to components documentation page">
+        View Components
       </a>
-    </div>
-  </div>
-</div>
+    </article>
+  </section>
+</main>

package/playground/showcase/src/app/pages/documentation/documentation.ts CHANGED Viewed

@@ -1,10 +1,14 @@
+import { RouterModule } from '@angular/router';
 import { Component } from '@angular/core';
 import { Breadcrumb, BreadcrumbItem } from '../../components/breadcrumb/breadcrumb';
 @Component({
   selector: 'wally-documentation',
-  imports: [Breadcrumb],
+  imports: [
+    Breadcrumb,
+    RouterModule
+  ],
   templateUrl: './documentation.html',
   styleUrl: './documentation.css'
 })

package/playground/showcase/src/app/pages/home/home.html CHANGED Viewed

@@ -1,48 +1,72 @@
-<div class="h-dvh antialiased font-mono">
-    <div class="w-full h-full flex flex-col items-center justify-center p-4">
-        <div class="max-w-md">
-            <h1 class="text-2xl font-bold text-[#0a0a0a] dark:text-white">
-                Wally UI
-            </h1>
-            <h2 class="text-xl font-semibold text-[#0a0a0a] dark:text-white">
-                Where's Wally? Right here!
-            </h2>
-            <p class="mt-4 text-gray-700 dark:text-gray-400">
-                Stop searching for the perfect Angular components. Wally UI brings you a
-                collection of ready-to-use, beautifully crafted Angular components built with
-                standalone architecture and Tailwind CSS that integrate seamlessly with your projects.
-            </p>
-        </div>
+<main class="h-dvh subpixel-antialiased font-mono" role="main">
+    <section class="w-full h-full flex flex-col items-center justify-center p-4">
+        <article class="max-w-xl">
+            <header class="w-full">
+                <hgroup>
+                    <h1 class="font-sans text-4xl font-medium tracking-tight text-[#0a0a0a] dark:text-white">
+                        Wally UI
+                    </h1>
-        <div class="w-full max-w-md">
-            <code
-                class="w-full mt-6 block bg-gray-200 dark:bg-[#121212] dark:text-white text-[#0a0a0a] p-4 rounded-md text-sm cursor-pointer hover:opacity-85 transition-colorsselect-all"
-                onclick="navigator.clipboard.writeText('npx wally-ui list')">
-                <pre class="m-0">$ npx wally-ui list</pre>
-            </code>
-        </div>
+                    <h2 class="font-sans text-lg font-normal tracking-wide text-[#0a0a0a] dark:text-white">
+                        Where's Wally? Right here!
+                    </h2>
+                </hgroup>
+                <p class="mt-4 text-gray-700 dark:text-neutral-300/75">
+                    Stop searching for the perfect Angular components. Wally UI is a free, open source
+                    design system built for modern developers and AI coding assistants. Copy-paste
+                    ready TypeScript components with accessibility-first design, SSR compatibility,
+                    and zero configuration. <strong>Own your code - just pure Angular + Tailwind CSS</strong>.
+                </p>
+            </header>
-        <div class="mt-4 w-full max-w-md flex flex-col gap-2">
-            <a href="/documentation" class="text-blue-500 underline">
-                Documentation
-            </a>
-            <a href="/documentation/components" class="text-blue-500 underline">
-                Components
-            </a>
-            <a href="/mcp" class="text-blue-500 underline">
-                MCP Server
-            </a>
+            <section class="w-full" aria-labelledby="installation-heading">
+                <h3 id="installation-heading" class="sr-only">Installation Command</h3>
+                <code
+                    class="w-full mt-6 block bg-gray-200 dark:bg-[#121212] dark:text-white text-[#0a0a0a] p-4 rounded-md text-sm cursor-pointer hover:opacity-85 transition-colorsselect-all"
+                    onclick="navigator.clipboard.writeText('npx wally-ui list')"
+                    tabindex="0"
+                    role="button"
+                    aria-label="Copy command to clipboard: npx wally-ui list">
+                    <pre class="m-0">$ npx wally-ui list</pre>
+                </code>
+            </section>
-            <div class="flex gap-4 mt-2">
-                <a href="https://github.com/WalissonCF/wally-ui" target="_blank"
-                    class="text-blue-500 underline text-sm">
-                    GitHub
-                </a>
-                <a href="https://www.npmjs.com/package/wally-ui" target="_blank"
-                    class="text-blue-500 underline text-sm">
-                    NPM
-                </a>
-            </div>
-        </div>
-    </div>
-</div>
+            <nav class="mt-6 w-full space-y-4" aria-label="Main navigation">
+                <div class="space-y-3">
+                    <a [routerLink]="'/documentation'"
+                       class="block text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 font-medium transition-colors duration-200 text-base"
+                       aria-label="View complete documentation and setup guide for Wally UI components">
+                        Documentation
+                    </a>
+                    <a [routerLink]="'/documentation/components'"
+                       class="block text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 font-medium transition-colors duration-200 text-base"
+                       aria-label="Browse all available Angular components with examples and API reference">
+                        Components
+                    </a>
+                    <a [routerLink]="'/mcp'"
+                       class="block text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 font-medium transition-colors duration-200 text-base"
+                       aria-label="Learn about Wally UI MCP Server for AI coding assistants integration">
+                        MCP Server
+                    </a>
+                </div>
+                <div class="flex gap-4 pt-3 mt-4 border-t border-gray-200 dark:border-white" aria-label="External links">
+                    <a href="https://github.com/WalissonCF/wally-ui"
+                       target="_blank"
+                       class="inline-flex items-center gap-1 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 transition-colors duration-200"
+                       rel="noopener noreferrer"
+                       aria-label="View Wally UI on GitHub (opens in new tab)">
+                        <span>GitHub</span>
+                    </a>
+                    <a href="https://www.npmjs.com/package/wally-ui"
+                       target="_blank"
+                       class="inline-flex items-center gap-1 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 transition-colors duration-200"
+                       rel="noopener noreferrer"
+                       aria-label="View Wally UI on NPM (opens in new tab)">
+                        <span>NPM</span>
+                    </a>
+                </div>
+            </nav>
+        </article>
+    </section>
+</main>

package/playground/showcase/src/app/pages/home/home.ts CHANGED Viewed

@@ -1,8 +1,9 @@
+import { RouterModule } from '@angular/router';
 import { Component } from '@angular/core';
 @Component({
   selector: 'wally-home',
-  imports: [],
+  imports: [RouterModule],
   templateUrl: './home.html',
   styleUrl: './home.css'
 })

package/playground/showcase/src/index.html CHANGED Viewed

@@ -3,11 +3,51 @@
 <head>
   <meta charset="utf-8">
-  <title>Wally UI</title>
+  <title>A Modern Approach to Angular UI Components - Wally UI</title>
   <base href="/">
+  <script type="application/ld+json">
+  {
+    "@context": "https://schema.org",
+    "@type": "SoftwareApplication",
+    "name": "Wally UI",
+    "description": "Free open source Angular component library built for modern developers and AI coding assistants. Copy-paste ready TypeScript components with accessibility-first design, SSR compatibility, and zero configuration.",
+    "applicationCategory": "DeveloperApplication",
+    "operatingSystem": "Any",
+    "programmingLanguage": ["TypeScript", "JavaScript"],
+    "softwareVersion": "1.9.0",
+    "url": "https://wally-ui.com",
+    "downloadUrl": "https://www.npmjs.com/package/wally-ui",
+    "codeRepository": "https://github.com/WalissonCF/wally-ui",
+    "author": {
+      "@type": "Person",
+      "name": "Walisson Carvalho Ferreira",
+      "url": "https://github.com/WalissonCF"
+    },
+    "license": "https://opensource.org/licenses/MIT",
+    "offers": {
+      "@type": "Offer",
+      "price": "0",
+      "priceCurrency": "USD"
+    },
+    "keywords": ["Angular", "TypeScript", "UI Components", "Design System", "Open Source", "Accessibility", "SSR", "Tailwind CSS", "Component Library"],
+    "featureList": [
+      "Copy-paste ready components",
+      "Angular 20+ compatibility",
+      "Accessibility-first design",
+      "SSR compatibility",
+      "Zero configuration",
+      "AI assistant ready",
+      "Dark mode support"
+    ],
+    "requirements": "Angular 17+, Tailwind CSS",
+    "installUrl": "https://www.npmjs.com/package/wally-ui",
+    "documentation": "https://wally-ui.com/documentation"
+  }
+  </script>
   <script>
-    // Baseado na documentação oficial do Tailwind 4
+    // Tailwind V4
     document.documentElement.classList.toggle(
       "dark",
       localStorage.theme === "dark" ||
@@ -19,9 +59,20 @@
   <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4944285767597175"
     crossorigin="anonymous"></script>
-  <meta name="robots" content="index, follow">
+  <!-- SEO Meta Tags -->
+  <meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <meta name="description" content="Wally UI - Angular component library">
+  <meta name="description" content="Free open source Angular component library for modern developers and AI assistants. Copy-paste ready TypeScript components with enterprise accessibility and zero configuration.">
+  <meta name="keywords" content="Angular, TypeScript, UI Components, Design System, Open Source, Accessibility, SSR, Tailwind CSS, Component Library, AI Assistant">
+  <meta name="author" content="Walisson Carvalho Ferreira">
+  <!-- Open Graph Tags -->
+  <meta property="og:type" content="website">
+  <meta property="og:title" content="Wally UI - Free Angular Component Library">
+  <meta property="og:description" content="Stop searching for the perfect Angular components. Free, open source design system built for developers and AI coding assistants.">
+  <meta property="og:url" content="https://wally-ui.com">
+  <meta property="og:site_name" content="Wally UI">
+  <meta property="og:locale" content="en_US">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>