@fluid-theme/core 0.4.3

package/src/components/nav.css

@@ -0,0 +1,726 @@
+/**
+ * Fluid Framework - Navigation Component
+ * @layer components
+ *
+ * Navigation should guide, not dominate.
+ * Clear hierarchy, gentle transitions, natural flow.
+ *
+ * Usage:
+ *   <nav class="nav">
+ *     <a href="/" class="nav__brand">Brand</a>
+ *     <ul class="nav__menu" role="list">
+ *       <li><a href="#" class="nav__link">Link</a></li>
+ *       <li><a href="#" class="nav__link" aria-current="page">Current</a></li>
+ *     </ul>
+ *   </nav>
+ *
+ * Variants:
+ *   data-variant="transparent" - Transparent background
+ *   data-variant="elevated" - With shadow
+ *   data-sticky - Sticky positioning
+ */
+
+@layer components {
+  /* ========================================
+     MAIN NAVIGATION
+     ======================================== */
+
+  .nav {
+    /* Layout */
+    display: flex;
+    align-items: center;
+    gap: var(--space-6);
+    padding-block: var(--space-4);
+    padding-inline: var(--space-5);
+
+    /* Visual */
+    background-color: var(--_nav-bg, var(--color-background));
+    border-block-end: 1px solid var(--_nav-border, var(--color-border-subtle));
+
+    /* Container for responsive behavior */
+    container-type: inline-size;
+    container-name: nav;
+  }
+
+  /* Sticky navigation */
+  .nav[data-sticky] {
+    position: sticky;
+    inset-block-start: 0;
+    z-index: var(--z-sticky);
+    backdrop-filter: blur(8px);
+    background-color: oklch(from var(--color-background) l c h / 0.9);
+  }
+
+  /* Transparent variant */
+  .nav[data-variant="transparent"] {
+    --_nav-bg: transparent;
+    --_nav-border: transparent;
+  }
+
+  /* Elevated variant */
+  .nav[data-variant="elevated"] {
+    --_nav-border: transparent;
+    box-shadow: var(--shadow-sm);
+  }
+
+
+  /* Brand / Logo - adopts active preset's font */
+  .nav__brand {
+    font-family: var(--font-heading, var(--font-body, var(--font-system)));
+    font-size: var(--font-size-lg);
+    font-weight: var(--weight-semibold);
+    color: var(--color-text);
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    flex-shrink: 0;
+    transition:
+      opacity var(--duration-normal) var(--ease-fluid),
+      font-family var(--duration-normal) var(--ease-fluid);
+  }
+
+  .nav__brand:hover {
+    opacity: 0.8;
+  }
+
+  .nav__brand img,
+  .nav__brand svg {
+    block-size: 2rem;
+    inline-size: auto;
+  }
+
+  /* Active preset name indicator */
+  .nav__preset-name {
+    font-family: var(--font-heading, var(--font-body, var(--font-system)));
+    font-size: var(--font-size-xs);
+    font-weight: var(--weight-medium);
+    color: var(--accent);
+    letter-spacing: var(--tracking-wide);
+    text-transform: uppercase;
+    white-space: nowrap;
+    flex-shrink: 0;
+    transition:
+      color var(--duration-normal) var(--ease-fluid),
+      font-family var(--duration-normal) var(--ease-fluid);
+  }
+
+  .nav__preset-name:empty {
+    display: none;
+  }
+
+
+  /* Menu container */
+  .nav__menu {
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
+    margin: 0;
+    margin-inline-start: auto; /* Default: push menu to end */
+    padding: 0;
+    list-style: none;
+    overflow: visible; /* Allow dropdowns to overflow */
+  }
+
+  /* Menu items - ensure alignment and reset base styles */
+  .nav__menu > li {
+    display: flex;
+    align-items: center;
+    margin: 0; /* Override base li margin that can cause misalignment */
+    position: relative; /* For dropdown positioning */
+  }
+
+  /* Keep menu at start (next to brand) */
+  .nav__menu[data-align="start"] {
+    margin-inline-start: 0;
+  }
+
+  /* Center menu */
+  .nav__menu[data-align="center"] {
+    margin-inline: auto;
+  }
+
+
+  /* Navigation links */
+  .nav__link {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-2) var(--space-3);
+    font-size: var(--font-size-sm);
+    font-weight: var(--weight-medium);
+    line-height: 1; /* Prevent line-height variance affecting alignment */
+    color: var(--color-text-muted);
+    text-decoration: none;
+    border-radius: var(--radius-md);
+    white-space: nowrap; /* Prevent wrapping that can affect height */
+    transition:
+      color var(--duration-normal) var(--ease-fluid),
+      background-color var(--duration-normal) var(--ease-fluid);
+  }
+
+  .nav__link:hover {
+    color: var(--color-text);
+    background-color: var(--color-surface);
+  }
+
+  .nav__link[aria-current="page"],
+  .nav__link[data-active] {
+    color: var(--accent);
+    background-color: var(--accent-subtle);
+  }
+
+
+  /* Actions area (buttons, search, etc.) */
+  .nav__actions {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    margin-inline-start: auto;
+  }
+
+
+  /* ========================================
+     DROPDOWN MENUS
+     ======================================== */
+
+  .nav__dropdown {
+    position: relative;
+  }
+
+  .nav__dropdown-trigger {
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
+    padding: var(--space-2) var(--space-3);
+    font-size: var(--font-size-sm);
+    font-weight: var(--weight-medium);
+    color: var(--color-text-muted);
+    text-decoration: none;
+    background: none;
+    border: none;
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    transition:
+      color var(--duration-normal) var(--ease-fluid),
+      background-color var(--duration-normal) var(--ease-fluid);
+  }
+
+  .nav__dropdown-trigger:hover,
+  .nav__dropdown:hover .nav__dropdown-trigger,
+  .nav__dropdown:focus-within .nav__dropdown-trigger {
+    color: var(--color-text);
+    background-color: var(--color-surface);
+  }
+
+  .nav__dropdown-trigger[data-active] {
+    color: var(--accent);
+  }
+
+  .nav__dropdown-trigger svg {
+    inline-size: 1em;
+    block-size: 1em;
+    transition: transform var(--duration-normal) var(--ease-fluid);
+  }
+
+  .nav__dropdown:hover .nav__dropdown-trigger svg,
+  .nav__dropdown:focus-within .nav__dropdown-trigger svg {
+    transform: rotate(180deg);
+  }
+
+  .nav__dropdown-menu {
+    position: absolute;
+    inset-block-start: 100%;
+    inset-inline-start: 0;
+    min-inline-size: 12rem;
+    padding: var(--space-2);
+    margin: 0;
+    margin-block-start: var(--space-1);
+    list-style: none;
+    background-color: var(--color-background);
+    border: 1px solid var(--color-border-subtle);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-lg);
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(-0.5rem);
+    transition:
+      opacity var(--duration-normal) var(--ease-fluid),
+      visibility var(--duration-normal) var(--ease-fluid),
+      transform var(--duration-normal) var(--ease-fluid);
+    z-index: var(--z-dropdown);
+  }
+
+  .nav__dropdown:hover .nav__dropdown-menu,
+  .nav__dropdown:focus-within .nav__dropdown-menu {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+  }
+
+  .nav__dropdown-menu li {
+    margin: 0;
+  }
+
+  .nav__dropdown-link {
+    display: block;
+    padding: var(--space-2) var(--space-3);
+    font-size: var(--font-size-sm);
+    color: var(--color-text-muted);
+    text-decoration: none;
+    border-radius: var(--radius-md);
+    transition:
+      color var(--duration-normal) var(--ease-fluid),
+      background-color var(--duration-normal) var(--ease-fluid);
+  }
+
+  .nav__dropdown-link:hover {
+    color: var(--color-text);
+    background-color: var(--color-surface);
+  }
+
+  .nav__dropdown-link[aria-current="page"] {
+    color: var(--accent);
+    background-color: var(--accent-subtle);
+  }
+
+  /* CTA Button in nav */
+  .nav__cta {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-2) var(--space-4);
+    font-size: var(--font-size-sm);
+    font-weight: var(--weight-medium);
+    color: var(--white);
+    text-decoration: none;
+    background-color: var(--accent);
+    border-radius: var(--radius-md);
+    transition:
+      background-color var(--duration-normal) var(--ease-fluid),
+      transform var(--duration-fast) var(--ease-settle);
+  }
+
+  .nav__cta:hover {
+    background-color: var(--accent-hover);
+    transform: translateY(-1px);
+  }
+
+
+  /* ========================================
+     RESPONSIVE NAVIGATION
+     Adapts to container width
+     ======================================== */
+
+  /* Mobile toggle button */
+  .nav__toggle {
+    display: none;
+    padding: var(--space-2);
+    background: none;
+    border: none;
+    color: var(--color-text);
+    cursor: pointer;
+  }
+
+  .nav__toggle svg {
+    inline-size: 1.5rem;
+    block-size: 1.5rem;
+  }
+
+  /* Theme Toggle Button */
+  .nav__theme-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--space-2);
+    background: none;
+    border: none;
+    border-radius: var(--radius-md);
+    color: var(--color-text-muted);
+    cursor: pointer;
+    transition:
+      color var(--duration-normal) var(--ease-fluid),
+      background-color var(--duration-normal) var(--ease-fluid);
+  }
+
+  .nav__theme-toggle:hover {
+    color: var(--color-text);
+    background-color: var(--color-surface);
+  }
+
+  .nav__theme-toggle svg {
+    inline-size: 1.25rem;
+    block-size: 1.25rem;
+  }
+
+  /* Show appropriate icon based on theme */
+  .nav__theme-toggle .icon-sun { display: none; }
+  .nav__theme-toggle .icon-moon { display: block; }
+
+  [data-theme="dark"] .nav__theme-toggle .icon-sun { display: block; }
+  [data-theme="dark"] .nav__theme-toggle .icon-moon { display: none; }
+
+
+  /* Narrow container - stack navigation */
+  @container nav (max-width: 40rem) {
+    .nav {
+      flex-wrap: wrap;
+    }
+
+    .nav__toggle {
+      display: flex;
+      margin-inline-start: auto;
+      order: 1;
+    }
+
+    .nav__theme-toggle {
+      order: 0;
+      margin-inline-start: auto;
+    }
+
+    /* Mobile menu with smooth reveal animation */
+    .nav__menu {
+      flex-basis: 100%;
+      flex-direction: column;
+      align-items: stretch;
+      gap: var(--space-1);
+      padding-block-start: var(--space-4);
+      order: 2;
+      /* Hidden state */
+      display: flex;
+      visibility: hidden;
+      opacity: 0;
+      max-block-size: 0;
+      overflow: hidden;
+      transition:
+        opacity var(--duration-normal) var(--ease-fluid),
+        visibility var(--duration-normal) var(--ease-fluid),
+        max-block-size var(--duration-normal) var(--ease-fluid);
+    }
+
+    /* Show menu when toggle is open */
+    .nav__menu[data-open],
+    .nav:has(.nav__toggle[aria-expanded="true"]) .nav__menu {
+      visibility: visible;
+      opacity: 1;
+      max-block-size: 100vh; /* Large enough for any menu */
+    }
+
+    .nav__menu > li {
+      display: block;
+      opacity: 0;
+      transform: translateY(-0.5rem);
+      transition:
+        opacity var(--duration-fast) var(--ease-fluid),
+        transform var(--duration-fast) var(--ease-settle);
+    }
+
+    /* Animate items in when menu opens */
+    .nav__menu[data-open] > li,
+    .nav:has(.nav__toggle[aria-expanded="true"]) .nav__menu > li {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    /* Stagger the item animations */
+    .nav__menu > li:nth-child(1) { transition-delay: 50ms; }
+    .nav__menu > li:nth-child(2) { transition-delay: 100ms; }
+    .nav__menu > li:nth-child(3) { transition-delay: 150ms; }
+    .nav__menu > li:nth-child(4) { transition-delay: 200ms; }
+    .nav__menu > li:nth-child(5) { transition-delay: 250ms; }
+    .nav__menu > li:nth-child(6) { transition-delay: 300ms; }
+
+    .nav__link {
+      display: block;
+      padding: var(--space-3);
+    }
+
+    /* Mobile dropdowns - always visible, stacked */
+    .nav__dropdown-menu {
+      position: static;
+      opacity: 1;
+      visibility: visible;
+      transform: none;
+      box-shadow: none;
+      border: none;
+      padding-inline-start: var(--space-4);
+      margin-block-start: 0;
+      background-color: transparent;
+    }
+
+    .nav__dropdown-trigger svg {
+      display: none;
+    }
+
+    .nav__dropdown-trigger {
+      padding: var(--space-3);
+      font-weight: var(--weight-semibold);
+      color: var(--color-text);
+    }
+
+    .nav__cta {
+      margin-block-start: var(--space-3);
+      justify-content: center;
+    }
+
+    .nav__actions {
+      flex-basis: 100%;
+      padding-block-start: var(--space-4);
+      border-block-start: 1px solid var(--color-border-subtle);
+      margin-block-start: var(--space-4);
+      order: 3;
+    }
+  }
+
+
+  /* ========================================
+     BREADCRUMB NAVIGATION
+     ======================================== */
+
+  .breadcrumb {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-2);
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    font-size: var(--font-size-sm);
+  }
+
+  .breadcrumb__item {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    line-height: 1;
+  }
+
+  .breadcrumb__item::after {
+    content: "/";
+    color: var(--color-text-subtle);
+  }
+
+  .breadcrumb__item:last-child::after {
+    content: none;
+  }
+
+  .breadcrumb__link {
+    display: inline-flex;
+    align-items: center;
+    color: var(--color-text-muted);
+    text-decoration: none;
+    line-height: 1;
+    transition: color var(--duration-normal) var(--ease-fluid);
+  }
+
+  .breadcrumb__link:hover {
+    color: var(--accent);
+  }
+
+  .breadcrumb__item:last-child .breadcrumb__link,
+  .breadcrumb__link[aria-current="page"] {
+    color: var(--color-text);
+    pointer-events: none;
+  }
+
+  /* Mobile: collapse to "← Back to [Parent]" */
+  @media (max-width: 40rem) {
+    .breadcrumb .breadcrumb__item {
+      display: none;
+    }
+
+    /* Show only the second-to-last item (parent) as a back link */
+    .breadcrumb .breadcrumb__item:nth-last-child(2) {
+      display: inline-flex;
+    }
+
+    .breadcrumb .breadcrumb__item:nth-last-child(2)::before {
+      content: "← ";
+      color: var(--color-text-muted);
+    }
+
+    .breadcrumb .breadcrumb__item:nth-last-child(2)::after {
+      content: none;
+    }
+
+    .breadcrumb .breadcrumb__item:nth-last-child(2) .breadcrumb__link {
+      color: var(--color-text-muted);
+      pointer-events: auto;
+    }
+
+    .breadcrumb .breadcrumb__item:nth-last-child(2) .breadcrumb__link::before {
+      content: "Back to ";
+    }
+  }
+
+
+  /* ========================================
+     PAGINATION
+     ======================================== */
+
+  .pagination {
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  .pagination__link {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-inline-size: 2.5rem;
+    min-block-size: 2.5rem;
+    padding: var(--space-2);
+    font-size: var(--font-size-sm);
+    font-weight: var(--weight-medium);
+    color: var(--color-text-muted);
+    text-decoration: none;
+    border-radius: var(--radius-md);
+    transition:
+      color var(--duration-normal) var(--ease-fluid),
+      background-color var(--duration-normal) var(--ease-fluid);
+  }
+
+  .pagination__link:hover {
+    color: var(--color-text);
+    background-color: var(--color-surface);
+  }
+
+  .pagination__link[aria-current="page"],
+  .pagination__link[data-active] {
+    color: var(--white);
+    background-color: var(--accent);
+  }
+
+  .pagination__link[data-disabled] {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  /* Prev/Next buttons */
+  .pagination__link[data-prev],
+  .pagination__link[data-next] {
+    gap: var(--space-2);
+  }
+
+  .pagination__ellipsis {
+    padding: var(--space-2);
+    color: var(--color-text-subtle);
+  }
+
+
+  /* ========================================
+     TABS NAVIGATION
+     ======================================== */
+
+  .tabs {
+    display: flex;
+    gap: var(--space-1);
+    border-block-end: 1px solid var(--color-border-subtle);
+  }
+
+  .tabs__tab {
+    position: relative;
+    padding: var(--space-3) var(--space-4);
+    font-size: var(--font-size-sm);
+    font-weight: var(--weight-medium);
+    color: var(--color-text-muted);
+    text-decoration: none;
+    background: none;
+    border: none;
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    outline: 2px solid transparent;
+    transition:
+      color var(--duration-normal) var(--ease-fluid),
+      background-color var(--duration-normal) var(--ease-fluid);
+  }
+
+  /* Focus state - subtle ring */
+  .tabs__tab:focus-visible {
+    background-color: var(--color-surface);
+    box-shadow: 0 0 0 2px var(--accent-subtle);
+  }
+
+  .tabs__tab::after {
+    content: "";
+    position: absolute;
+    inset-inline: var(--space-2); /* Inset from edges for rounded look */
+    inset-block-end: -1px;
+    block-size: 3px; /* Slightly thicker for visible rounded ends */
+    background-color: transparent;
+    border-radius: var(--radius-full);
+    transition: background-color var(--duration-normal) var(--ease-fluid);
+  }
+
+  .tabs__tab:hover {
+    color: var(--color-text);
+    background-color: var(--color-surface);
+  }
+
+  .tabs__tab[aria-selected="true"],
+  .tabs__tab[data-active] {
+    color: var(--accent);
+  }
+
+  .tabs__tab[aria-selected="true"]::after,
+  .tabs__tab[data-active]::after {
+    background-color: var(--accent);
+  }
+
+  /* Contained tabs variant */
+  .tabs[data-variant="contained"] {
+    background-color: var(--color-surface);
+    border-radius: var(--radius-md);
+    border: none;
+    padding: var(--space-1);
+  }
+
+  .tabs[data-variant="contained"] .tabs__tab {
+    border-radius: var(--radius-sm);
+  }
+
+  .tabs[data-variant="contained"] .tabs__tab::after {
+    display: none;
+  }
+
+  .tabs[data-variant="contained"] .tabs__tab[aria-selected="true"],
+  .tabs[data-variant="contained"] .tabs__tab[data-active] {
+    background-color: var(--color-background);
+    box-shadow: var(--shadow-xs);
+  }
+
+
+  /* ========================================
+     REDUCED MOTION
+     ======================================== */
+
+  @media (prefers-reduced-motion: reduce) {
+    .nav__menu > li {
+      transition: none;
+      opacity: 1;
+      transform: none;
+    }
+
+    .nav__menu > li:nth-child(1),
+    .nav__menu > li:nth-child(2),
+    .nav__menu > li:nth-child(3),
+    .nav__menu > li:nth-child(4),
+    .nav__menu > li:nth-child(5),
+    .nav__menu > li:nth-child(6) {
+      transition-delay: 0ms;
+    }
+
+    .nav__link,
+    .nav__dropdown-menu,
+    .breadcrumb__link,
+    .pagination__link,
+    .tabs__tab,
+    .tabs__tab::after {
+      transition: none;
+    }
+  }
+}