@supersoniks/concorde 5.1.0 → 5.1.2

package/src/docs/getting-started/theming.md

@@ -0,0 +1,253 @@
+# Theming 
+
+## Theme-first customization
+
+Concorde components ship with **default styles** (fallback values in each component and in `<sonic-theme>`).  
+You do not need to define any CSS variables to get a usable UI.
+
+To align the kit with your brand, override **only the essential theme tokens** on `<sonic-theme>`, on `:root`, or in a project stylesheet.  
+Concorde derives radius steps, button/input rounding, shadows, and most per-component layout from these primitives—**do not copy long lists of derived variables** unless you have a specific need.
+
+<sonic-code language="html">
+  <template>
+<sonic-theme color font >
+  <!-- your app -->
+</sonic-theme>
+  </template>
+</sonic-code>
+
+<sonic-code language="javascript">
+  <template>
+import "@supersoniks/concorde/theme";
+  </template>
+</sonic-code>
+
+| Attribute | Effect |
+|-----------|--------|
+| *(omit)* \| `theme="custom"` | Default: core tokens + your `--sc-*`; no built-in light/dark palette |
+| `theme="light"` \| `"dark"` \| `"auto"` | Opt-in presets; `auto` follows `prefers-color-scheme` |
+| `class="bg-base block"` (Tailwind) | Page/surface background (`--sc-base`) |
+| `color` | Text color (`--sc-base-content`) |
+| `font` | Base font family/weight (`--sc-font-family-base`, etc.) |
+
+Popovers, modals, and toasts mount under the nearest `<sonic-theme>`.
+
+## Customization example
+
+Example (full brand override on `<sonic-theme>` or `:root`). Set every essential token below; derived radii and shadows still come from the theme engine—only `--sc-rounded` is listed here.
+
+<sonic-code language="css">
+  <template>
+sonic-theme {
+  /* Semantic fills */
+  --sc-primary: #353429;
+  --sc-secondary: #f43f5e;
+  --sc-info: #7c3aed;
+  --sc-danger: #d71839;
+  --sc-warning: #f97316;
+  --sc-success: #10b981;
+  --sc-contrast: #111;
+
+  /* Text/icons on semantic fills */
+  --sc-primary-content: #fff;
+  --sc-secondary-content: #fff;
+  --sc-info-content: #fff;
+  --sc-danger-content: #fff;
+  --sc-warning-content: #fff;
+  --sc-success-content: #fff;
+  --sc-contrast-content: #fff;
+
+  /* Neutral fills */
+  --sc-base: #fff;
+  --sc-base-50: #f6f6f5;
+  --sc-base-100: #ededec;
+  --sc-base-200: #d7d7d4;
+  --sc-base-300: #c8c7c4;
+  --sc-base-400: #a8a7a2;
+  --sc-base-500: #94938c;
+  --sc-base-600: #76756c;
+  --sc-base-700: #59584e;
+  --sc-base-800: #47463b;
+  --sc-base-900: #353429;
+
+  /* Text/icons on neutral surfaces */
+  --sc-base-content: var(--sc-base-900);
+
+  /* Typography */
+  --sc-font-family-base: "Oswald", system-ui, -apple-system, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, sans-serif;
+  --sc-headings-font-family: "alternate-gothic-compressed", system-ui, sans-serif;
+  --sc-headings-line-height: 1.1;
+  --sc-headings-font-weight: bold;
+  --sc-headings-text-transform: none;
+
+  /* Shape (primitive only) */
+  --sc-rounded: 0;
+
+  /* Forms */
+  --sc-border-width: 0.2rem;
+  --sc-form-height: 2em;
+  --sc-input-bg: var(--sc-base);
+  --sc-input-color: var(--sc-base-content);
+  --sc-input-border-color: var(--sc-input-color);
+  --sc-input-active-bg: var(--sc-primary);
+  --sc-input-active-color: var(--sc-primary-content);
+  --sc-input-active-border-color: var(--sc-primary);
+}
+  </template>
+</sonic-code>
+
+<sonic-button href="https://delanfranchi.github.io/concordecolors/"> Palette generator: concordecolors</sonic-button>
+
+
+**Without these overrides**, components keep Concorde’s per-component fallbacks. Built-in light/dark palettes apply only when you set `theme="light"`, `theme="dark"`, or `theme="auto"`.
+
+**What we intentionally avoid:** large public `--sc-alert-*` / `--sc-badge-*` APIs or `::part()` styling hooks on most components. Prefer attributes (`type`, `status`, `size`, …) and the theme tokens above.
+
+
+## Only essential CSS variables (public theme API)
+
+These are the **smallest set** we recommend customizing. Everything else should stay internal to the theme or to components (`--sc_*` private variables, attributes like `type`, `size`, `variant`).
+
+### Surfaces and foreground
+
+Tokens **without** a `-content` suffix are **fill / background** colors.  
+Tokens **with** `-content` are **text and icons** on top of the matching fill (solid buttons, badges, alerts, etc.).
+
+#### Neutral fills
+
+| Variable | Role |
+|----------|------|
+| `--sc-base` | Main surface / page background |
+| `--sc-base-50` … `--sc-base-900` | Neutral scale (borders, subtle backgrounds, muted UI) |
+
+#### Neutral foreground
+
+| Variable | Role |
+|----------|------|
+| `--sc-base-content` | Default body text and icons on neutral surfaces |
+
+#### Semantic fills
+
+| Variable | Role |
+|----------|------|
+| `--sc-primary` | Primary actions, links, emphasis |
+| `--sc-secondary` | Secondary brand accent (when used) |
+| `--sc-info`, `--sc-success`, `--sc-warning`, `--sc-danger` | Status and feedback |
+| `--sc-contrast` | High-contrast fills (e.g. on media) |
+
+#### Semantic foreground
+
+| Variable | Role |
+|----------|------|
+| `--sc-primary-content`, `--sc-secondary-content`, … | Text/icons on the matching semantic **fill** (`--sc-primary`, etc.) |
+
+### Shape
+
+| Variable | Role |
+|----------|------|
+| `--sc-rounded` | **Single primitive** corner radius; the theme computes `--sc-rounded-sm`, `--sc-btn-rounded`, `--sc-input-rounded`, etc. |
+
+### Typography
+
+| Variable | Role |
+|----------|------|
+| `--sc-font-family-base` | Body UI text |
+| `--sc-font-weight-base`, `--sc-font-style-base` | Optional |
+| `--sc-headings-font-family`, `--sc-headings-line-height`, `--sc-headings-font-weight`, `--sc-headings-text-transform` | Headings (modal titles, etc.) |
+
+### Forms (only if you customize inputs globally)
+
+Interactive controls expose a few extra **theme-level** tokens; prefer these over styling individual inputs from outside.
+
+| Variable | Role |
+|----------|------|
+| `--sc-border-width` | Default border thickness |
+| `--sc-form-height` | Control height |
+| `--sc-input-bg`, `--sc-input-color`, `--sc-input-border-color` | Default field chrome |
+| `--sc-input-active-bg`, `--sc-input-active-color`, `--sc-input-active-border-color` | Focus/active state |
+
+---
+
+## Tailwind in new components ?
+
+Set <code>tailwind.config.js</code> to match concorde style token in your custom component.
+
+<sonic-code language="js">
+  <template>
+...
+theme: {
+  borderRadius: {
+    DEFAULT: "var(--sc-rounded)",
+    none: "0",
+    sm: "var(--sc-rounded-sm)",
+    md: "var(--sc-rounded-md)",
+    lg: "var(--sc-rounded-lg)",
+    xl: "var(--sc-rounded-xl)",
+    full: "9999px",
+  },
+  boxShadow: {
+    DEFAULT: "var(--sc-shadow)",
+    none: "none",
+    sm: "var(--sc-shadow-sm)",
+    md: "var(--sc-shadow-md)",
+    lg: "var(--sc-shadow-lg)",
+    xl: "var(--sc-shadow-xl)",
+  },
+  colors: {
+    transparent: "transparent",
+    current: "currentColor",
+    content: "var(--sc-base-content)",
+    base: "var(--sc-base)",
+    neutral: {
+      0: "var(--sc-base)",
+      50: "var(--sc-base-50)",
+      100: "var(--sc-base-100)",
+      200: "var(--sc-base-200)",
+      300: "var(--sc-base-300)",
+      400: "var(--sc-base-400)",
+      500: "var(--sc-base-500)",
+      600: "var(--sc-base-600)",
+      700: "var(--sc-base-700)",
+      800: "var(--sc-base-800)",
+      900: "var(--sc-base-900)",
+      content: "var(--sc-base)",
+    },
+    primary: {
+      DEFAULT: "var(--sc-primary)",
+      content: "var(--sc-primary-content)",
+    },
+    success: {
+      DEFAULT: "var(--sc-success)",
+      content: "var(--sc-success-content)",
+    },
+    danger: {
+      DEFAULT: "var(--sc-danger)",
+      content: "var(--sc-danger-content)",
+    },
+    warning: {
+      DEFAULT: "var(--sc-warning)",
+      content: "var(--sc-warning-content)",
+    },
+    info: {
+      DEFAULT: "var(--sc-info)",
+      content: "var(--sc-info-content)",
+    },
+    contrast: {
+      DEFAULT: "var(--sc-contrast)",
+      content: "var(--sc-contrast-content)",
+    },
+  },
+  extend: {
+    borderWidth: {
+      DEFAULT: "var(--sc-border-width)",
+    },
+    fontFamily: {
+      headings: ["var(--sc-headings-font-family, var(--sc-font-family-base, sans-serif))"],
+      body: ["var(--sc-font-family-base)"],
+      monospace: ["var(--sc-font-family-monospace, monospace)"],
+    }
+  }
+  </template>
+</sonic-code>
+

package/src/docs/header/header.ts

@@ -1,4 +1,4 @@
-import { html, LitElement, nothing } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, state } from "lit/decorators.js";
 import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
 import { tailwind } from "../tailwind";
@@ -7,11 +7,95 @@ import { Theme } from "@supersoniks/concorde/core/components/ui/theme/theme";
 const tagName = "sonic-docs-header"; // For Astro.build
 @customElement(tagName)
 export class SonicComponent extends Subscriber(LitElement) {
-  static styles = [tailwind];
+  static styles = [
+    tailwind,
+    css`
+      /* paint the page gutters too, so content never shows beside the sticky bar */
+      .header-bar {
+        box-shadow:
+          -5rem 0 0 var(--sc-base),
+          5rem 0 0 var(--sc-base);
+      }
+      /* the rule under the bar runs on through the gutters, edge to edge */
+      .header-bar::after {
+        content: "";
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: -0.18rem;
+        height: 0.18rem;
+        background: currentColor;
+        box-shadow:
+          -5rem 0 0 currentColor,
+          5rem 0 0 currentColor;
+      }
+      .logo-plane path {
+        transform-box: view-box;
+        transform-origin: 33px 33px;
+        /* takes off every 6s (flight in the first ~1.1s, then parked) */
+        animation: takeoff 6s cubic-bezier(0.5, 0, 0.3, 1) 0.5s infinite;
+      }
+      .logo:hover .logo-plane path,
+      .logo:focus-visible .logo-plane path {
+        animation: takeoff-again 1.1s cubic-bezier(0.5, 0, 0.3, 1);
+      }
+      @keyframes takeoff-again {
+        12% {
+          transform: translateY(3px);
+        }
+        50% {
+          transform: translateY(-64px) scale(0.85);
+        }
+        50.01% {
+          transform: translateY(64px) scale(0.85);
+        }
+      }
+      @keyframes takeoff {
+        0% {
+          transform: translateY(0);
+        }
+        2% {
+          transform: translateY(3px);
+        }
+        9% {
+          transform: translateY(-64px) scale(0.85);
+        }
+        9.01% {
+          transform: translateY(64px) scale(0.85);
+        }
+        18%,
+        100% {
+          transform: translateY(0);
+        }
+      }
+      @media (prefers-reduced-motion: reduce) {
+        .logo-plane path,
+        .logo:hover .logo-plane path {
+          animation: none;
+        }
+      }
+    `,
+  ];
 
   @state() theme: "dark" | "light" = "light";
   @state() searchVisible = false;
 
+  /** Publishes the bar's height as --docs-header-h so sticky panels sit right under it. */
+  private headerResize = new ResizeObserver(([entry]) => {
+    const h = Math.round(entry.target.getBoundingClientRect().height);
+    document.documentElement.style.setProperty("--docs-header-h", `${h}px`);
+  });
+
+  firstUpdated() {
+    const bar = this.shadowRoot?.querySelector(".header-bar");
+    if (bar) this.headerResize.observe(bar);
+  }
+
+  disconnectedCallback() {
+    this.headerResize.disconnect();
+    super.disconnectedCallback();
+  }
+
   connectedCallback() {
     this.handleColorScheme();
     super.connectedCallback();
@@ -36,10 +120,13 @@ export class SonicComponent extends Subscriber(LitElement) {
       }
     });
 
-    // on hash change, hide search
-    window.addEventListener("hashchange", () => {
+    // on navigation, hide search and mobile navigation
+    const onNav = () => {
       this.hideSearch();
-    });
+      this.closeNavigation();
+    };
+    window.addEventListener("hashchange", onNav);
+    window.addEventListener("popstate", onNav);
   }
 
   handleColorScheme() {
@@ -63,6 +150,17 @@ export class SonicComponent extends Subscriber(LitElement) {
     this.handleColorScheme();
   }
 
+  openNavigation() {
+    this.shadowRoot
+      ?.querySelector<HTMLElement & { show(): void }>("#mobile-nav")
+      ?.show();
+  }
+  closeNavigation() {
+    this.shadowRoot
+      ?.querySelector<HTMLElement & { hide(): void }>("#mobile-nav")
+      ?.hide();
+  }
+
   hideSearch() {
     this.searchVisible = false;
   }
@@ -72,12 +170,22 @@ export class SonicComponent extends Subscriber(LitElement) {
 
   render() {
     return html`<div
-        class="flex items-center gap-4 border-b-[.18rem]  text-content border-current py-3 sticky top-0 z-40  bg-neutral-0"
+        class="flex items-center gap-2 sm:gap-4 border-b-[.18rem] text-content border-current py-3 sticky top-0 z-40 bg-neutral-0 header-bar"
       >
-        <div class="">
-          <sonic-link href="/" class="flex items-end gap-x-1">
+        <sonic-button
+          class="lg:hidden"
+          shape="circle"
+          variant="ghost"
+          icon
+          data-aria-label="Open navigation"
+          @click=${() => this.openNavigation()}
+        >
+          <sonic-icon name="menu" library="iconoir"></sonic-icon>
+        </sonic-button>
+        <div class="min-w-0">
+          <sonic-link pushState href="/" class="logo flex items-end gap-x-1">
             <svg
-              class="size-[2.4rem] inline-block  rotate-[55deg] "
+              class="size-8 sm:size-[2.4rem] inline-block rotate-[55deg]"
               viewBox="0 0 66 66"
               fill="none"
               xmlns="http://www.w3.org/2000/svg"
@@ -88,47 +196,62 @@ export class SonicComponent extends Subscriber(LitElement) {
                 r="30"
                 fill="var(--sc-base-content, #000)"
               />
-              <path
-                d="M33.2499 62.03C33.8799 59.24 34.26 56.17 34.39 53.08C34.57 52.78 34.9099 52.6 35.2599 52.64H35.39C35.48 52.64 35.5799 52.64 35.6899 52.64H35.7599C35.7599 52.64 35.7999 52.64 35.8299 52.64C36.2499 52.62 36.6799 52.58 36.9099 52.56C36.9399 52.56 36.9599 52.56 36.9799 52.56C37.0099 52.56 37.0299 52.56 37.0499 52.56H37.0899L37.2099 51.93H37.4799L37.5799 52.4L37.6899 52.49H39.2699L39.39 52.38L39.5099 51.93H39.7899L39.8399 52.21L39.9999 52.29L45.2099 51.86L46.2799 51.29C46.2799 51.29 46.2799 50.85 46.2399 50.25V50.18C46.2399 50.18 46.2399 50.13 46.2399 50.11C46.2099 49.62 46.1399 49.13 46.0399 48.65C45.7899 47.45 45.29 46 42.2 41.58C39.11 37.16 38.04 35.52 35.89 27.63C35.85 27.48 35.8199 27.35 35.7899 27.2C35.1399 24.53 34.6899 22.95 34.5199 22.38V10.89C34.4999 9.60996 34.3999 8.33996 34.2099 7.07996C34.0499 5.97996 33.6099 4.89996 33.3499 3.95996H32.6299C32.3599 4.89996 31.9299 5.97996 31.7699 7.06996C31.5799 8.33996 31.4799 9.60996 31.4599 10.89V22.38C31.2899 22.95 30.8299 24.52 30.1899 27.2C30.1599 27.35 30.1199 27.49 30.0899 27.63C27.9499 35.52 26.8699 37.16 23.7799 41.58C20.6899 46 20.1899 47.45 19.9399 48.65C19.8399 49.13 19.7799 49.62 19.7399 50.11C19.7399 50.13 19.7399 50.16 19.7399 50.18V50.25C19.6999 50.85 19.7 51.29 19.7 51.29L20.7699 51.86L25.9799 52.29L26.14 52.21L26.1899 51.93H26.4799L26.5999 52.38L26.7299 52.49H28.2999L28.4099 52.4L28.5099 51.93H28.7699L28.89 52.56H28.9399C28.9399 52.56 28.9799 52.56 29.0099 52.56C29.0299 52.56 29.0499 52.56 29.0799 52.56C29.3099 52.58 29.7499 52.63 30.1599 52.64C30.1799 52.64 30.2099 52.64 30.2299 52.64H30.2999C30.4099 52.64 30.5099 52.64 30.5999 52.64H30.7299C31.0799 52.6 31.4299 52.77 31.6099 53.08C31.7299 56.17 32.1099 59.24 32.7399 62.03H33.2499Z"
-                fill="var(--sc-base, #fff)"
-              />
+              <clipPath id="logo-circle">
+                <circle cx="33" cy="33" r="30" />
+              </clipPath>
+              <g class="logo-plane" clip-path="url(#logo-circle)">
+                <path
+                  d="M33.2499 62.03C33.8799 59.24 34.26 56.17 34.39 53.08C34.57 52.78 34.9099 52.6 35.2599 52.64H35.39C35.48 52.64 35.5799 52.64 35.6899 52.64H35.7599C35.7599 52.64 35.7999 52.64 35.8299 52.64C36.2499 52.62 36.6799 52.58 36.9099 52.56C36.9399 52.56 36.9599 52.56 36.9799 52.56C37.0099 52.56 37.0299 52.56 37.0499 52.56H37.0899L37.2099 51.93H37.4799L37.5799 52.4L37.6899 52.49H39.2699L39.39 52.38L39.5099 51.93H39.7899L39.8399 52.21L39.9999 52.29L45.2099 51.86L46.2799 51.29C46.2799 51.29 46.2799 50.85 46.2399 50.25V50.18C46.2399 50.18 46.2399 50.13 46.2399 50.11C46.2099 49.62 46.1399 49.13 46.0399 48.65C45.7899 47.45 45.29 46 42.2 41.58C39.11 37.16 38.04 35.52 35.89 27.63C35.85 27.48 35.8199 27.35 35.7899 27.2C35.1399 24.53 34.6899 22.95 34.5199 22.38V10.89C34.4999 9.60996 34.3999 8.33996 34.2099 7.07996C34.0499 5.97996 33.6099 4.89996 33.3499 3.95996H32.6299C32.3599 4.89996 31.9299 5.97996 31.7699 7.06996C31.5799 8.33996 31.4799 9.60996 31.4599 10.89V22.38C31.2899 22.95 30.8299 24.52 30.1899 27.2C30.1599 27.35 30.1199 27.49 30.0899 27.63C27.9499 35.52 26.8699 37.16 23.7799 41.58C20.6899 46 20.1899 47.45 19.9399 48.65C19.8399 49.13 19.7799 49.62 19.7399 50.11C19.7399 50.13 19.7399 50.16 19.7399 50.18V50.25C19.6999 50.85 19.7 51.29 19.7 51.29L20.7699 51.86L25.9799 52.29L26.14 52.21L26.1899 51.93H26.4799L26.5999 52.38L26.7299 52.49H28.2999L28.4099 52.4L28.5099 51.93H28.7699L28.89 52.56H28.9399C28.9399 52.56 28.9799 52.56 29.0099 52.56C29.0299 52.56 29.0499 52.56 29.0799 52.56C29.3099 52.58 29.7499 52.63 30.1599 52.64C30.1799 52.64 30.2099 52.64 30.2299 52.64H30.2999C30.4099 52.64 30.5099 52.64 30.5999 52.64H30.7299C31.0799 52.6 31.4299 52.77 31.6099 53.08C31.7299 56.17 32.1099 59.24 32.7399 62.03H33.2499Z"
+                  fill="var(--sc-base, #fff)"
+                />
+              </g>
             </svg>
 
             <span
-              class="font-headings text-4xl leading-none inline-block italic font-semibold"
+              class="font-headings text-3xl sm:text-4xl leading-none inline-block italic font-semibold"
               >concorde</span
             >
           </sonic-link>
         </div>
 
-        <div class="ml-auto flex gap-x-3 ">
+        <div class="ml-auto flex items-center gap-x-1 sm:gap-x-3">
           <sonic-button
-            class="lg:hidden"
-            shape="circle"
-            icon
-            @click=${() => (this.searchVisible = !this.searchVisible)}
+            class="hidden md:block"
+            variant="ghost"
+            size="sm"
+            pushState
+            href="/docs/getting-started/start"
+            >Docs</sonic-button
           >
-            <sonic-icon name="magnifying-glass" library="custom"></sonic-icon>
-          </sonic-button>
           <sonic-button
-            @click=${() => (this.searchVisible = !this.searchVisible)}
-            class="hidden lg:block lg:w-[19rem]"
-            shape="block"
-            align="left"
+            class="hidden md:block"
+            variant="ghost"
+            size="sm"
+            pushState
+            href="/docs/getting-started/components"
+            >Components</sonic-button
+          >
+          <sonic-button
+            variant="ghost"
+            shape="circle"
+            icon
+            target="_blank"
+            data-aria-label="npm package"
+            href="https://www.npmjs.com/package/@supersoniks/concorde"
           >
-            Search...
             <sonic-icon
-              name="magnifying-glass"
-              library="custom"
-              slot="prefix"
+              name="npm"
+              library="fontAwesome"
+              prefix="brands"
             ></sonic-icon>
           </sonic-button>
-
           <sonic-pop>
             <sonic-button shape="circle" variant="ghost" icon>
-              ${this.theme == "light"
-                ? html`<sonic-icon name="sun" library="custom"></sonic-icon>`
-                : html`<sonic-icon name="moon" library="custom"></sonic-icon>`}
+              ${
+                this.theme == "light"
+                  ? html`<sonic-icon name="sun" library="custom"></sonic-icon>`
+                  : html`<sonic-icon name="moon" library="custom"></sonic-icon>`
+              }
             </sonic-button>
 
             <sonic-menu slot="content">
@@ -156,67 +279,113 @@ export class SonicComponent extends Subscriber(LitElement) {
               </sonic-menu-item>
             </sonic-menu>
           </sonic-pop>
+          <sonic-button
+            class="lg:hidden"
+            shape="circle"
+            variant="ghost"
+            icon
+            @click=${() => (this.searchVisible = !this.searchVisible)}
+          >
+            <sonic-icon name="magnifying-glass" library="custom"></sonic-icon>
+          </sonic-button>
+          <sonic-button
+            @click=${() => (this.searchVisible = !this.searchVisible)}
+            class="hidden lg:block lg:w-[19rem]"
+            shape="block"
+            align="left"
+          >
+            Search...
+            <sonic-icon
+              name="magnifying-glass"
+              library="custom"
+              slot="prefix"
+            ></sonic-icon>
+          </sonic-button>
         </div>
       </div>
 
-      ${this.searchVisible
-        ? html`
-            <div
-              ${animate({
-                keyframeOptions: {
-                  duration: 250,
-                },
-                in: [
-                  {
-                    opacity: 0,
-                  },
-                ],
-                out: [
-                  {
-                    opacity: 0,
-                  },
-                ],
-                stabilizeOut: true,
-              })}
-              class="fixed top-0 w-full left-0  z-[3000] pt-[20vh] flex items-center justify-center "
-            >
-              <div
-                @click=${() => this.hideSearch()}
-                class="bg-neutral-0 dark:bg-neutral-300 opacity-90 fixed top-0 left-0 w-full h-full "
-              ></div>
+      <sonic-modal
+        id="mobile-nav"
+        effect="fade"
+        maxWidth="min(92vw, 22rem)"
+        maxHeight="88vh"
+        closeOnLocationChange
+      >
+        <sonic-modal-title>Documentation</sonic-modal-title>
+        <sonic-modal-content>
+          <docs-navigation
+            class="block"
+            @click=${(e: Event) => {
+              const onItem = e
+                .composedPath()
+                .some((n) => (n as HTMLElement).tagName === "SONIC-MENU-ITEM");
+              if (onItem) this.closeNavigation();
+            }}
+          ></docs-navigation>
+        </sonic-modal-content>
+      </sonic-modal>
 
+      ${
+        this.searchVisible
+          ? html`
               <div
                 ${animate({
                   keyframeOptions: {
                     duration: 250,
-                    easing: `cubic-bezier(0.250, 0.250, 0.420, 1.225)`,
                   },
                   in: [
                     {
-                      transform: "translateY(1rem) scale(1.05)",
                       opacity: 0,
                     },
                   ],
                   out: [
                     {
-                      transform: "scale(.90) ",
                       opacity: 0,
-                      duration: 3000,
-                      easing: `ease-in-out`,
                     },
                   ],
                   stabilizeOut: true,
                 })}
-                class="relative z-20 max-w-[30rem] lg:max-w-[35rem] w-full block   "
+                class="fixed top-0 w-full left-0  z-[3000] pt-[20vh] flex items-center justify-center "
               >
-                <docs-search
-                  setFocus
-                  class="max-w-[30rem] lg:max-w-[35rem] w-full block"
+                <div
+                  @click=${() => this.hideSearch()}
+                  class="bg-neutral-0 dark:bg-neutral-300 opacity-90 fixed top-0 left-0 w-full h-full "
+                ></div>
+
+                <div
+                  ${animate({
+                    keyframeOptions: {
+                      duration: 250,
+                      easing: `cubic-bezier(0.250, 0.250, 0.420, 1.225)`,
+                    },
+                    in: [
+                      {
+                        transform: "translateY(1rem) scale(1.05)",
+                        opacity: 0,
+                      },
+                    ],
+                    out: [
+                      {
+                        transform: "scale(.90) ",
+                        opacity: 0,
+                        duration: 3000,
+                        easing: `ease-in-out`,
+                      },
+                    ],
+                    stabilizeOut: true,
+                  })}
+                  class="relative z-20 max-w-[30rem] lg:max-w-[35rem] w-full block   "
                 >
-                </docs-search>
+                  <docs-search
+                    setFocus
+                    class="max-w-[30rem] lg:max-w-[35rem] w-full block"
+                    @docs-search-close=${() => this.hideSearch()}
+                  >
+                  </docs-search>
+                </div>
               </div>
-            </div>
-          `
-        : nothing}`;
+            `
+          : nothing
+      }`;
   }
 }