wally-ui 1.11.1 → 1.12.0

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

@@ -0,0 +1,471 @@
+<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 -->
+    <nav class="mb-8" aria-label="Breadcrumb navigation">
+      <wally-breadcrumb [items]="breadcrumbItems"></wally-breadcrumb>
+    </nav>
+
+    <!-- Header -->
+    <header class="mb-12" role="banner">
+      <h1 id="page-title" class="text-3xl sm:text-4xl font-bold text-[#0a0a0a] dark:text-white mb-4 uppercase">
+        <span aria-hidden="true">&gt;_ </span>Tooltip
+      </h1>
+      <p
+        class="text-sm sm:text-base text-neutral-700 dark:text-neutral-300 border-l-2 border-neutral-300 dark:border-neutral-700 pl-4 leading-relaxed">
+        Accessible tooltip component with smart auto-positioning, overflow detection, and smooth animations. Wraps any element to provide contextual information on hover or focus.
+      </p>
+    </header>
+
+    <!-- AI Assistant Links -->
+    <div class="flex flex-wrap gap-0 mt-6 mb-12 border-2 border-neutral-300 dark:border-neutral-700" role="list"
+      aria-label="Open documentation in AI coding assistants">
+      <a [href]="claudeUrl" target="_blank"
+        class="group flex-1 min-w-[200px] flex items-center justify-center gap-2 px-4 py-3 bg-white dark:bg-[#0a0a0a] border-b-2 sm:border-b-0 sm:border-r-2 border-neutral-300 dark:border-neutral-700 hover:bg-[#0a0a0a] dark:hover:bg-white transition-all duration-150 cursor-pointer"
+        rel="noopener noreferrer" role="listitem"
+        aria-label="Open Tooltip component documentation in Claude AI assistant (opens in new tab)">
+        <svg xmlns="http://www.w3.org/2000/svg"
+          class="size-5 text-[#0a0a0a] dark:text-neutral-400 group-hover:text-white dark:group-hover:text-[#0a0a0a] transition-colors duration-150"
+          viewBox="0 0 24 24" aria-hidden="true">
+          <path fill="currentColor"
+            d="m4.714 15.956l4.718-2.648l.079-.23l-.08-.128h-.23l-.79-.048l-2.695-.073l-2.337-.097l-2.265-.122l-.57-.121l-.535-.704l.055-.353l.48-.321l.685.06l1.518.104l2.277.157l1.651.098l2.447.255h.389l.054-.158l-.133-.097l-.103-.098l-2.356-1.596l-2.55-1.688l-1.336-.972l-.722-.491L2 6.223l-.158-1.008l.656-.722l.88.06l.224.061l.893.686l1.906 1.476l2.49 1.833l.364.304l.146-.104l.018-.072l-.164-.274l-1.354-2.446l-1.445-2.49l-.644-1.032l-.17-.619a3 3 0 0 1-.103-.729L6.287.133L6.7 0l.995.134l.42.364l.619 1.415L9.735 4.14l1.555 3.03l.455.898l.243.832l.09.255h.159V9.01l.127-1.706l.237-2.095l.23-2.695l.08-.76l.376-.91l.747-.492l.583.28l.48.685l-.067.444l-.286 1.851l-.558 2.903l-.365 1.942h.213l.243-.242l.983-1.306l1.652-2.064l.728-.82l.85-.904l.547-.431h1.032l.759 1.129l-.34 1.166l-1.063 1.347l-.88 1.142l-1.263 1.7l-.79 1.36l.074.11l.188-.02l2.853-.606l1.542-.28l1.84-.315l.832.388l.09.395l-.327.807l-1.967.486l-2.307.462l-3.436.813l-.043.03l.049.061l1.548.146l.662.036h1.62l3.018.225l.79.522l.473.638l-.08.485l-1.213.62l-1.64-.389l-3.825-.91l-1.31-.329h-.183v.11l1.093 1.068l2.003 1.81l2.508 2.33l.127.578l-.321.455l-.34-.049l-2.204-1.657l-.85-.747l-1.925-1.62h-.127v.17l.443.649l2.343 3.521l.122 1.08l-.17.353l-.607.213l-.668-.122l-1.372-1.924l-1.415-2.168l-1.141-1.943l-.14.08l-.674 7.254l-.316.37l-.728.28l-.607-.461l-.322-.747l.322-1.476l.388-1.924l.316-1.53l.285-1.9l.17-.632l-.012-.042l-.14.018l-1.432 1.967l-2.18 2.945l-1.724 1.845l-.413.164l-.716-.37l.066-.662l.401-.589l2.386-3.036l1.439-1.882l.929-1.086l-.006-.158h-.055L4.138 18.56l-1.13.146l-.485-.456l.06-.746l.231-.243l1.907-1.312Z" />
+        </svg>
+        <span
+          class="text-xs sm:text-sm font-medium text-[#0a0a0a] dark:text-neutral-400 group-hover:text-white dark:group-hover:text-[#0a0a0a] transition-colors duration-150">
+          Open in Claude
+        </span>
+      </a>
+
+      <a [href]="chatGptUrl" target="_blank"
+        class="group flex-1 min-w-[200px] flex items-center justify-center gap-2 px-4 py-3 bg-white dark:bg-[#0a0a0a] hover:bg-[#0a0a0a] dark:hover:bg-white transition-all duration-150 cursor-pointer"
+        rel="noopener noreferrer" role="listitem"
+        aria-label="Open Tooltip component documentation in ChatGPT AI assistant (opens in new tab)">
+        <svg xmlns="http://www.w3.org/2000/svg"
+          class="size-5 text-[#0a0a0a] dark:text-neutral-400 group-hover:text-white dark:group-hover:text-[#0a0a0a] transition-colors duration-150"
+          viewBox="0 0 48 48" aria-hidden="true">
+          <path fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round"
+            d="M18.38 27.94v-14.4l11.19-6.46c6.2-3.58 17.3 5.25 12.64 13.33" />
+          <path fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round"
+            d="m18.38 20.94l12.47-7.2l11.19 6.46c6.2 3.58 4.1 17.61-5.23 17.61" />
+          <path fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round"
+            d="m24.44 17.44l12.47 7.2v12.93c0 7.16-13.2 12.36-17.86 4.28" />
+          <path fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round"
+            d="M30.5 21.2v14.14L19.31 41.8c-6.2 3.58-17.3-5.25-12.64-13.33" />
+          <path fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round"
+            d="m30.5 27.94l-12.47 7.2l-11.19-6.46c-6.21-3.59-4.11-17.61 5.22-17.61" />
+          <path fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round"
+            d="m24.44 31.44l-12.47-7.2V11.31c0-7.16 13.2-12.36 17.86-4.28" />
+        </svg>
+        <span
+          class="text-xs sm:text-sm font-medium text-[#0a0a0a] dark:text-neutral-400 group-hover:text-white dark:group-hover:text-[#0a0a0a] transition-colors duration-150">
+          Open in ChatGPT
+        </span>
+      </a>
+    </div>
+
+    <!-- Installation -->
+    <section id="installation" class="mb-12" aria-labelledby="installation-heading">
+      <h2 id="installation-heading"
+        class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
+        [ Installation ]
+      </h2>
+      <code
+        class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white block bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3"
+        aria-label="Installation command for Tooltip component">
+        <pre><code [innerHTML]="installationCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+      </code>
+    </section>
+
+    <!-- Import -->
+    <section id="import" class="mb-12" aria-labelledby="import-heading">
+      <h2 id="import-heading"
+        class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
+        [ Import ]
+      </h2>
+      <div class="space-y-3">
+        <div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3">
+          <pre><code [innerHTML]="importCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+        </div>
+        <div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3">
+          <pre><code [innerHTML]="componentImportCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+        </div>
+      </div>
+    </section>
+
+    <!-- Basic Usage -->
+    <section id="basic-usage" class="mb-12" aria-labelledby="basic-usage-heading">
+      <h2 id="basic-usage-heading"
+        class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
+        [ Basic Usage ]
+      </h2>
+      <div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3 mb-4">
+        <pre><code [innerHTML]="basicUsageCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+      </div>
+      <div class="p-8 border-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a] flex items-center justify-center" role="img"
+        aria-label="Live preview of basic tooltip on hover">
+        <wally-tooltip text="This is a tooltip">
+          <wally-button variant="secondary">Hover me</wally-button>
+        </wally-tooltip>
+      </div>
+    </section>
+
+    <!-- Positioning System -->
+    <section id="positioning" class="mb-12" aria-labelledby="positioning-heading">
+      <h2 id="positioning-heading"
+        class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
+        [ Smart Auto-Positioning ]
+      </h2>
+
+      <article class="mb-8" aria-labelledby="auto-position-heading">
+        <h3 id="auto-position-heading"
+          class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
+          <span aria-hidden="true">&gt; </span>Auto Position (Default)
+        </h3>
+        <p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 mb-3 leading-relaxed">
+          Automatically detects viewport space and positions tooltip optimally. Includes overflow detection for edge cases.
+        </p>
+        <div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3 mb-4">
+          <pre><code [innerHTML]="positionsCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+        </div>
+        <div class="p-8 border-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a] flex items-center justify-center" role="img"
+          aria-label="Live preview of tooltip positioning options">
+          <div class="flex flex-wrap gap-4 justify-center">
+            <wally-tooltip text="Auto positioned" position="auto">
+              <wally-button variant="outline">Auto</wally-button>
+            </wally-tooltip>
+            <wally-tooltip text="Always on top" position="top">
+              <wally-button variant="outline">Top</wally-button>
+            </wally-tooltip>
+            <wally-tooltip text="Always on bottom" position="bottom">
+              <wally-button variant="outline">Bottom</wally-button>
+            </wally-tooltip>
+            <wally-tooltip text="Always on left" position="left">
+              <wally-button variant="outline">Left</wally-button>
+            </wally-tooltip>
+            <wally-tooltip text="Always on right" position="right">
+              <wally-button variant="outline">Right</wally-button>
+            </wally-tooltip>
+          </div>
+        </div>
+      </article>
+    </section>
+
+    <!-- Usage Examples -->
+    <section id="examples" class="mb-12" aria-labelledby="examples-heading">
+      <h2 id="examples-heading"
+        class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
+        [ Usage Examples ]
+      </h2>
+
+      <!-- With Button -->
+      <article class="mb-8" aria-labelledby="with-button-heading">
+        <h3 id="with-button-heading"
+          class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
+          <span aria-hidden="true">&gt; </span>With Button Component
+        </h3>
+        <div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3 mb-4">
+          <pre><code [innerHTML]="withButtonCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+        </div>
+        <div class="p-8 border-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a] flex items-center justify-center" role="img"
+          aria-label="Live preview of tooltip with button component">
+          <wally-tooltip text="Save your changes">
+            <wally-button variant="primary">Save</wally-button>
+          </wally-tooltip>
+        </div>
+      </article>
+
+      <!-- With Icon Button -->
+      <article class="mb-8" aria-labelledby="with-icon-heading">
+        <h3 id="with-icon-heading"
+          class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
+          <span aria-hidden="true">&gt; </span>Icon-Only Button
+        </h3>
+        <p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 mb-3 leading-relaxed">
+          Essential for icon-only buttons to provide context for screen readers and visual users.
+        </p>
+        <div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3 mb-4">
+          <pre><code [innerHTML]="withIconCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+        </div>
+        <div class="p-8 border-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a] flex items-center justify-center" role="img"
+          aria-label="Live preview of tooltip with icon button">
+          <wally-tooltip text="Send message">
+            <wally-button [variant]="'ghost'" [rounded]="true" ariaLabel="Send">
+              <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="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5" />
+              </svg>
+            </wally-button>
+          </wally-tooltip>
+        </div>
+      </article>
+    </section>
+
+    <!-- Configuration -->
+    <section id="configuration" class="mb-12" aria-labelledby="configuration-heading">
+      <h2 id="configuration-heading"
+        class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
+        [ Configuration ]
+      </h2>
+
+      <!-- Custom Delay -->
+      <article class="mb-8" aria-labelledby="delay-heading">
+        <h3 id="delay-heading"
+          class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
+          <span aria-hidden="true">&gt; </span>Custom Delay
+        </h3>
+        <div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3 mb-4">
+          <pre><code [innerHTML]="customDelayCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+        </div>
+        <div class="p-8 border-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a] flex items-center justify-center" role="img"
+          aria-label="Live preview of tooltips with custom delays">
+          <div class="flex gap-4">
+            <wally-tooltip text="Quick tooltip" [delay]="100">
+              <wally-button variant="ghost">Fast (100ms)</wally-button>
+            </wally-tooltip>
+            <wally-tooltip text="Delayed tooltip" [delay]="500">
+              <wally-button variant="ghost">Slow (500ms)</wally-button>
+            </wally-tooltip>
+          </div>
+        </div>
+      </article>
+
+      <!-- Disabled State -->
+      <article class="mb-8" aria-labelledby="disabled-heading">
+        <h3 id="disabled-heading"
+          class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
+          <span aria-hidden="true">&gt; </span>Disabled State
+        </h3>
+        <div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3 mb-4">
+          <pre><code [innerHTML]="disabledCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+        </div>
+        <div class="p-8 border-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a] flex items-center justify-center" role="img"
+          aria-label="Live preview of disabled tooltip">
+          <wally-tooltip text="This won't show" [disabled]="true">
+            <wally-button variant="secondary">Disabled Tooltip</wally-button>
+          </wally-tooltip>
+        </div>
+      </article>
+
+      <!-- Custom Offset -->
+      <article class="mb-8" aria-labelledby="offset-heading">
+        <h3 id="offset-heading"
+          class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
+          <span aria-hidden="true">&gt; </span>Custom Offset
+        </h3>
+        <div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3 mb-4">
+          <pre><code [innerHTML]="customOffsetCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+        </div>
+        <div class="p-8 border-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a] flex items-center justify-center" role="img"
+          aria-label="Live preview of tooltips with custom offset spacing">
+          <div class="flex gap-4">
+            <wally-tooltip text="More space" [offset]="4">
+              <wally-button variant="secondary">Large offset</wally-button>
+            </wally-tooltip>
+            <wally-tooltip text="Close" [offset]="1">
+              <wally-button variant="secondary">Small offset</wally-button>
+            </wally-tooltip>
+          </div>
+        </div>
+      </article>
+    </section>
+
+    <!-- Production Examples -->
+    <section id="production-examples" class="mb-12" aria-labelledby="production-heading">
+      <h2 id="production-heading"
+        class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
+        [ Production Examples ]
+      </h2>
+
+      <!-- Dashboard Toolbar -->
+      <article class="mb-8" aria-labelledby="dashboard-heading">
+        <h3 id="dashboard-heading"
+          class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
+          <span aria-hidden="true">&gt; </span>Dashboard Toolbar
+        </h3>
+        <div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3 mb-4">
+          <pre><code [innerHTML]="dashboardCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+        </div>
+        <div class="p-8 border-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a] flex items-center justify-center" role="img"
+          aria-label="Live preview of dashboard toolbar with tooltips">
+          <div class="flex gap-2">
+            <wally-tooltip text="Export data to CSV">
+              <wally-button variant="outline" ariaLabel="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">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
+                </svg>
+              </wally-button>
+            </wally-tooltip>
+
+            <wally-tooltip text="Refresh dashboard">
+              <wally-button variant="outline" ariaLabel="Refresh">
+                <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="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
+                </svg>
+              </wally-button>
+            </wally-tooltip>
+
+            <wally-tooltip text="Settings">
+              <wally-button variant="outline" ariaLabel="Settings">
+                <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="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" />
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+                </svg>
+              </wally-button>
+            </wally-tooltip>
+          </div>
+        </div>
+      </article>
+
+      <!-- Form Field Help -->
+      <article class="mb-8" aria-labelledby="form-field-heading">
+        <h3 id="form-field-heading"
+          class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
+          <span aria-hidden="true">&gt; </span>Form Field Help
+        </h3>
+        <div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3 mb-4">
+          <pre><code [innerHTML]="formFieldCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+        </div>
+        <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 form field with help tooltip">
+          <div class="flex items-start gap-2">
+            <wally-input label="Email" type="email" placeholder="your@email.com" class="flex-1" />
+            <wally-tooltip text="We'll never share your email">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4 text-neutral-500 cursor-help mt-[30px]">
+                <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
+              </svg>
+            </wally-tooltip>
+          </div>
+        </div>
+      </article>
+    </section>
+
+    <!-- Future Features -->
+    <section id="future-features" class="mb-12" aria-labelledby="future-heading">
+      <h2 id="future-heading"
+        class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
+        [ Future Features ]
+      </h2>
+
+      <article class="mb-8" aria-labelledby="rich-content-heading">
+        <h3 id="rich-content-heading"
+          class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
+          <span aria-hidden="true">&gt; </span>Rich Content Support (Coming Soon)
+        </h3>
+        <p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 mb-3 leading-relaxed">
+          Future version will support custom HTML content projection, allowing images, formatted text, and interactive elements inside tooltips.
+        </p>
+        <div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3">
+          <pre><code [innerHTML]="richContentCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+        </div>
+      </article>
+    </section>
+
+    <!-- API Reference -->
+    <section id="api-reference" class="mb-12" aria-labelledby="api-heading">
+      <h2 id="api-heading"
+        class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
+        [ API Reference ]
+      </h2>
+
+      <!-- Input Properties -->
+      <article class="mb-8" aria-labelledby="input-properties-heading">
+        <h3 id="input-properties-heading"
+          class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-4 uppercase">
+          <span aria-hidden="true">&gt; </span>Input Properties
+        </h3>
+        <div class="bg-white dark:bg-[#0f0f0f] border-2 border-neutral-300 dark:border-neutral-800 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">text</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">required</td>
+                  <td class="p-4 text-gray-700 dark:text-gray-300">Text content displayed in the tooltip</td>
+                </tr>
+                <tr>
+                  <td class="p-4 font-mono text-blue-600 dark:text-blue-400">position</td>
+                  <td class="p-4 font-mono text-purple-600 dark:text-purple-400">'top' | 'bottom' | 'left' | 'right' | 'auto'</td>
+                  <td class="p-4 font-mono text-green-600 dark:text-green-400">'auto'</td>
+                  <td class="p-4 text-gray-700 dark:text-gray-300">Tooltip position. 'auto' intelligently detects best position based on viewport space</td>
+                </tr>
+                <tr>
+                  <td class="p-4 font-mono text-blue-600 dark:text-blue-400">delay</td>
+                  <td class="p-4 font-mono text-purple-600 dark:text-purple-400">number</td>
+                  <td class="p-4 font-mono text-green-600 dark:text-green-400">200</td>
+                  <td class="p-4 text-gray-700 dark:text-gray-300">Show delay in milliseconds</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">Disables tooltip display</td>
+                </tr>
+                <tr>
+                  <td class="p-4 font-mono text-blue-600 dark:text-blue-400">offset</td>
+                  <td class="p-4 font-mono text-purple-600 dark:text-purple-400">number</td>
+                  <td class="p-4 font-mono text-green-600 dark:text-green-400">2</td>
+                  <td class="p-4 text-gray-700 dark:text-gray-300">Distance from target element in pixels</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </article>
+
+      <!-- Technical Features -->
+      <article class="mb-8" aria-labelledby="technical-heading">
+        <h3 id="technical-heading"
+          class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-4 uppercase">
+          <span aria-hidden="true">&gt; </span>Technical Features
+        </h3>
+        <div class="bg-white dark:bg-[#0f0f0f] border-2 border-neutral-300 dark:border-neutral-800 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">Feature</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">Auto-Positioning</td>
+                  <td class="p-4 text-gray-700 dark:text-gray-300">Detects viewport space and positions tooltip automatically with priority: top → bottom → right → left</td>
+                </tr>
+                <tr>
+                  <td class="p-4 font-mono text-blue-600 dark:text-blue-400">Overflow Detection</td>
+                  <td class="p-4 text-gray-700 dark:text-gray-300">Automatically shifts tooltip horizontally/vertically when near viewport edges (8px padding)</td>
+                </tr>
+                <tr>
+                  <td class="p-4 font-mono text-blue-600 dark:text-blue-400">Arrow Indicator</td>
+                  <td class="p-4 text-gray-700 dark:text-gray-300">Dynamic arrow that points to target element, adjusts based on position</td>
+                </tr>
+                <tr>
+                  <td class="p-4 font-mono text-blue-600 dark:text-blue-400">Smooth Animation</td>
+                  <td class="p-4 text-gray-700 dark:text-gray-300">GPU-accelerated fade transitions (150ms show, 100ms hide)</td>
+                </tr>
+                <tr>
+                  <td class="p-4 font-mono text-blue-600 dark:text-blue-400">Accessibility</td>
+                  <td class="p-4 text-gray-700 dark:text-gray-300">role="tooltip", aria-hidden, keyboard support (focus/blur events)</td>
+                </tr>
+                <tr>
+                  <td class="p-4 font-mono text-blue-600 dark:text-blue-400">Dark Mode</td>
+                  <td class="p-4 text-gray-700 dark:text-gray-300">Automatic theme detection and color adaptation</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </article>
+    </section>
+
+  </div>
+</main>

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

@@ -0,0 +1,69 @@
+import { Component } from '@angular/core';
+
+import { AiPromptService } from '../../../../core/services/ai-prompt.service';
+import { getFormattedCode } from '../../../../core/utils/prism';
+
+import { TooltipCodeExamples } from './tooltip-docs.examples';
+
+import { Breadcrumb, BreadcrumbItem } from '../../../../components/breadcrumb/breadcrumb';
+import { Button } from '../../../../components/button/button';
+import { Tooltip } from '../../../../components/tooltip/tooltip';
+import { Input } from '../../../../components/input/input';
+
+@Component({
+  selector: 'app-tooltip-docs',
+  imports: [
+    Button,
+    Breadcrumb,
+    Tooltip,
+    Input
+  ],
+  templateUrl: './tooltip-docs.html',
+  styleUrl: './tooltip-docs.css'
+})
+export class TooltipDocs {
+  breadcrumbItems: BreadcrumbItem[] = [
+    { label: 'Home', url: '/' },
+    { label: 'Documentation', url: '/documentation' },
+    { label: 'Components', url: '/documentation/components' },
+    { label: 'Tooltip' }
+  ];
+
+  // Installation & Import
+  installationCode = getFormattedCode(TooltipCodeExamples.installation, 'bash');
+  importCode = getFormattedCode(TooltipCodeExamples.import, 'typescript');
+  componentImportCode = getFormattedCode(TooltipCodeExamples.componentImport, 'typescript');
+  basicUsageCode = getFormattedCode(TooltipCodeExamples.basicUsage, 'html');
+
+  // Positioning
+  positionsCode = getFormattedCode(TooltipCodeExamples.positions, 'html');
+
+  // Examples
+  withButtonCode = getFormattedCode(TooltipCodeExamples.withButton, 'html');
+  withIconCode = getFormattedCode(TooltipCodeExamples.withIcon, 'html');
+  customDelayCode = getFormattedCode(TooltipCodeExamples.customDelay, 'html');
+  disabledCode = getFormattedCode(TooltipCodeExamples.disabled, 'html');
+  customOffsetCode = getFormattedCode(TooltipCodeExamples.customOffset, 'html');
+
+  // Production Examples
+  dashboardCode = getFormattedCode(TooltipCodeExamples.dashboard, 'html');
+  formFieldCode = getFormattedCode(TooltipCodeExamples.formField, 'html');
+  navigationCode = getFormattedCode(TooltipCodeExamples.navigation, 'html');
+  avatarCode = getFormattedCode(TooltipCodeExamples.avatar, 'html');
+  statusBadgeCode = getFormattedCode(TooltipCodeExamples.statusBadge, 'html');
+
+  // Future Features
+  richContentCode = getFormattedCode(TooltipCodeExamples.richContent, 'html');
+
+  constructor(
+    private aiPromptService: AiPromptService
+  ) { }
+
+  get claudeUrl(): string {
+    return this.aiPromptService.generateClaudeUrl();
+  }
+
+  get chatGptUrl(): string {
+    return this.aiPromptService.generateChatGptUrl();
+  }
+}

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

@@ -8,5 +8,9 @@ export const documentationRoutes: Routes = [
     {
         path: 'components',
         loadChildren: () => import('./components/components.routes').then(m => m.componentsRoutes)
+    },
+    {
+        path: 'chat-sdk',
+        loadComponent: () => import('./chat-sdk/chat-sdk').then(m => m.ChatSdk)
     }
 ];

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

@@ -1,5 +1,9 @@
 <main class="min-h-dvh subpixel-antialiased font-mono bg-white dark:bg-[#0a0a0a]" role="main">
     <div class="w-full min-h-dvh flex flex-col items-center justify-center px-4 py-12 sm:px-6 md:px-8 lg:px-12">
+        <!-- <div class="w-full max-w-4xl">
+            <wally-ai-chat></wally-ai-chat>
+        </div> -->
+
         <article class="w-full max-w-3xl">
             <header class="w-full mb-10 sm:mb-12 space-y-6">
                 <hgroup class="space-y-6">
@@ -121,6 +125,28 @@
                         </div>
                     </a>
 
+                    <a [routerLink]="'/documentation/chat-sdk'"
+                        class="group block px-4 py-3 sm:py-4 bg-white dark:bg-[#0a0a0a] border-b-2 border-neutral-300 dark:border-neutral-700 hover:bg-[#0a0a0a] dark:hover:bg-white hover:border-[#0a0a0a] dark:hover:border-white transition-all duration-150 cursor-pointer"
+                        aria-label="Chat SDK - Complete chat development SDK with AI interface, message matrix, streaming service, and Wally UI components">
+                        <div class="flex items-start justify-between gap-4">
+                            <div class="flex-1 min-w-0">
+                                <div class="flex items-center gap-3 mb-1">
+                                    <h4
+                                        class="text-sm sm:text-base 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>Chat SDK
+                                    </h4>
+                                    <span class="text-[10px] font-bold bg-blue-500 text-white px-2 py-1 uppercase tracking-wider" aria-label="Status: Coming Soon">
+                                        COMING SOON
+                                    </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">
+                                    Complete chat development SDK: AI interface with message matrix (ai: 1/2, me: 1/1), streaming data service, and full visual customization using Wally UI components
+                                </p>
+                            </div>
+                        </div>
+                    </a>
+
                     <a [routerLink]="'/mcp'"
                         class="group block px-4 py-3 sm:py-4 bg-white dark:bg-[#0a0a0a] hover:bg-[#0a0a0a] dark:hover:bg-white hover:border-[#0a0a0a] dark:hover:border-white transition-all duration-150 cursor-pointer"
                         aria-label="Learn about Wally UI MCP Server integration with AI coding assistants like Claude, ChatGPT, and Cursor">

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

@@ -1,10 +1,11 @@
 import { RouterModule } from '@angular/router';
 import { Component } from '@angular/core';
-import { Carousel } from "../../components/carousel/carousel";
+
+import { AiChat } from '../../components/ai/ai-chat/ai-chat';
 
 @Component({
   selector: 'wally-home',
-  imports: [RouterModule, Carousel],
+  imports: [RouterModule, AiChat],
   templateUrl: './home.html',
   styleUrl: './home.css'
 })

package/playground/showcase/src/index.html

@@ -47,12 +47,15 @@
   </script>
 
   <script>
-    // Tailwind V4
+    // Tailwind V4 - Auto theme detection (ignores localStorage)
     function updateTheme() {
-      const isDark = localStorage.theme === "dark" ||
-        (!("theme" in localStorage) &&
-          window.matchMedia("(prefers-color-scheme: dark)").matches);
+      // Remove any cached theme preference from other projects
+      if (localStorage.theme) {
+        localStorage.removeItem('theme');
+      }
 
+      // Always use system preference
+      const isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
       document.documentElement.classList.toggle("dark", isDark);
     }