@fairgarden/design 0.1.0-alpha.0 → 0.1.0-alpha.1

package/components/NavigationBar/navigation-bar.module.css

@@ -1,413 +0,0 @@
-/*
- * Navigation Bar (§11.5) with the brand strip and utility bar (§11.3).
- * CVA function `navigationBar` in NavigationBar.tsx; the root (`base`) is
- * the header's `kind="band"` Ground, which paints --role-ground and draws
- * its --role-seam [D178, D179].
- *
- * Parts: base, frame (what docks), skipLink, strip, utility (utilityInner,
- * slot, utilityNav, utilityList, utilityItem, utilityLink, utilityLabel,
- * locale), bar, inner (the content container), logo, logoMark,
- * brandDrawing, nav, tools, iconButtons, action, menuSlot.
- *
- * Page frame: it responds to the viewport custom media only, with the
- * inline threshold --ds-nav-inline-n-above a build-time constant [D183].
- * Colors are role variables only; local custom properties carry dimensions
- * only: --navigation-bar-logo-size, --navigation-bar-flow-size (the
- * in-flow height held while docked, written by the sticky observer).
- */
-
-/* Composition sits in top-level rules, outside the layers: Lightning CSS
- * (Next.js with Turbopack) rejects `composes` inside @layer or any nesting.
- * The composed classes keep their own layers. */
-.skipLink {
-  composes: typeButtonSm from '../../utils/type.module.css';
-}
-
-.slot {
-  composes: typeLabel from '../../utils/type.module.css';
-}
-
-.utilityLink {
-  composes: typeLabel from '../../utils/type.module.css';
-}
-
-@layer base {
-  .base {
-    position: relative;
-  }
-
-  /* The opaque frame: never transparent over media (§1.3.5). */
-  .frame {
-    position: relative;
-    background-color: var(--role-ground);
-    color: var(--primary12);
-  }
-
-  /* Skip link: first in focus order, the ink pill at the bar's top start on focus. */
-  .skipLink {
-    position: absolute;
-    inset-block-start: var(--size-px-2);
-    inset-inline-start: var(--ds-space-margin);
-    z-index: var(--layer-3);
-    display: inline-flex;
-    align-items: center;
-    box-sizing: border-box;
-    min-block-size: var(--ds-size-hit);
-    padding-inline: var(--size-px-5);
-    border: var(--border-size-2) solid var(--primary12);
-    border-radius: var(--radius-round);
-    background-color: var(--primary12);
-    color: var(--role-inverse);
-    text-decoration-line: none;
-    white-space: nowrap;
-  }
-
-  /* The brand strip: the first bar's --ds-stroke-3 top line in --secondary9 (green, passed explicitly). */
-  .strip {
-    block-size: 0;
-    border-block-start: var(--ds-stroke-3) solid var(--secondary9);
-  }
-
-  /* ── Utility bar (§11.3) ───────────────────────────────────────────── */
-
-  .utility {
-    display: none;
-    border-block-end: var(--border-size-1) solid var(--role-hairline);
-  }
-
-  .utilityInner {
-    display: flex;
-    align-items: center;
-    gap: var(--size-px-5);
-    box-sizing: border-box;
-    inline-size: min(calc(100% - 2 * var(--ds-space-margin)), var(--ds-container-content));
-    block-size: var(--ds-size-bar-utility);
-    margin-inline: auto;
-  }
-
-  .slot {
-    color: var(--primary12);
-    white-space: nowrap;
-  }
-
-  .utilityNav {
-    margin-inline-start: auto;
-  }
-
-  .utilityList {
-    display: flex;
-    align-items: center;
-    gap: var(--size-px-5);
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
-
-  .utilityItem {
-    display: flex;
-  }
-
-  /* Text links only: a 24 px target at a 24 px pitch (§1.5.12), no rest underline [D80]. */
-  .utilityLink {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    min-block-size: var(--size-px-5);
-    min-inline-size: var(--size-px-5);
-    color: var(--primary12);
-    text-decoration-line: none;
-    white-space: nowrap;
-  }
-
-  /* The current bar: a border, so it survives forced colors. */
-  .utilityLink::after {
-    content: '';
-    position: absolute;
-    inset-inline: 0;
-    inset-block-end: 0;
-    border-block-end: 0 solid var(--primary12);
-    pointer-events: none;
-  }
-
-  .utilityLabel {
-    text-decoration-color: var(--role-accent);
-    text-decoration-thickness: var(--border-size-2);
-    text-underline-offset: var(--size-px-1);
-  }
-
-  .locale {
-    color: var(--primary12);
-  }
-
-  /* ── The bar ───────────────────────────────────────────────────────── */
-
-  /* 56 px at base, 64 px from --lg-n-above, over a full-bleed --border-size-1 --role-rule. */
-  .bar {
-    box-sizing: content-box;
-    block-size: var(--ds-size-control-xl);
-    border-block-end: var(--border-size-1) solid var(--role-rule);
-  }
-
-  /* Capped at --ds-container-content; the panels align to this box. */
-  .inner {
-    display: flex;
-    align-items: center;
-    gap: var(--size-px-5);
-    box-sizing: border-box;
-    inline-size: min(calc(100% - 2 * var(--ds-space-margin)), var(--ds-container-content));
-    block-size: 100%;
-    margin-inline: auto;
-  }
-
-  .logo {
-    --navigation-bar-logo-size: var(--size-px-6);
-
-    display: inline-flex;
-    flex: none;
-    align-items: center;
-    gap: var(--size-px-2);
-    min-block-size: var(--ds-size-hit);
-    color: var(--primary12);
-    text-decoration-line: none;
-  }
-
-  .logoMark {
-    display: inline-flex;
-    align-items: center;
-    block-size: var(--navigation-bar-logo-size);
-  }
-
-  .logoMark > * {
-    display: block;
-    inline-size: auto;
-    block-size: 100%;
-  }
-
-  /* A fine-line drawing in the logo's ink (--ds-stroke-0-75). */
-  .brandDrawing {
-    display: inline-flex;
-    block-size: var(--navigation-bar-logo-size);
-    color: var(--primary12);
-    stroke: currentColor;
-    stroke-width: var(--ds-stroke-0-75);
-    fill: none;
-  }
-
-  .brandDrawing > * {
-    display: block;
-    inline-size: auto;
-    block-size: 100%;
-  }
-
-  /* The Navigation Menu: removed below the inline threshold, where the drawer runs. */
-  .nav {
-    display: none;
-    align-self: stretch;
-    min-inline-size: 0;
-  }
-
-  .tools {
-    display: flex;
-    align-items: center;
-    gap: var(--size-px-3);
-    margin-inline-start: auto;
-  }
-
-  /* Utility icon Buttons, --size-px-1 apart. */
-  .iconButtons {
-    display: flex;
-    align-items: center;
-    gap: var(--size-px-1);
-  }
-
-  .action,
-  .menuSlot {
-    display: flex;
-    align-items: center;
-  }
-
-  /* Stack guard: below 360 px the action moves into the drawer [D73]. */
-  @media (max-width: 359.98px) {
-    .action {
-      display: none;
-    }
-  }
-
-  @media (min-width: 1024px) {
-    .bar {
-      block-size: var(--size-px-9);
-    }
-
-    .logo {
-      --navigation-bar-logo-size: var(--ds-size-icon-block);
-    }
-  }
-
-  /* Inline from the threshold: utility row and menu shown, the menu Button removed [D183]. */
-  @media (min-width: 1024px) {
-    .utility {
-      display: block;
-    }
-
-    .nav {
-      display: flex;
-    }
-
-    .menuSlot {
-      display: none;
-    }
-  }
-}
-
-@layer variants {
-  /* Ruled cells: vertical --border-size-1 --role-rule rules between items. */
-  .ruled {
-    --navigation-menu-item-rule: var(--border-size-1);
-    --navigation-menu-item-gap: 0px;
-    --navigation-menu-item-padding: var(--size-px-3);
-  }
-
-  /* Stacked masthead: a wordmark row over the caps nav row, ruled above and below. */
-  @media (min-width: 1024px) {
-    .masthead .bar {
-      block-size: auto;
-      border-block-start: var(--border-size-2) solid var(--role-rule);
-    }
-
-    .masthead .inner {
-      flex-wrap: wrap;
-      row-gap: 0;
-    }
-
-    .masthead .logo {
-      flex: 1 0 100%;
-      justify-content: center;
-      block-size: var(--ds-size-control-xl);
-      border-block-end: var(--border-size-1) solid var(--role-rule);
-    }
-
-    .masthead .nav {
-      block-size: var(--size-px-8);
-    }
-  }
-
-  /* Compact (the docked header): utility row and brand drawing dropped, one row, same height. */
-  .compact .utility,
-  .compact .brandDrawing {
-    display: none;
-  }
-
-  @media (min-width: 1024px) {
-    .compact .bar {
-      block-size: var(--size-px-9);
-      border-block-start-width: 0;
-    }
-
-    .compact .inner {
-      flex-wrap: nowrap;
-    }
-
-    .compact .logo {
-      flex: none;
-      justify-content: flex-start;
-      block-size: auto;
-      border-block-end-width: 0;
-    }
-
-    .compact .nav {
-      block-size: auto;
-    }
-  }
-}
-
-@layer states {
-  /* Docked: the frame holds the top edge on --layer-2; the root keeps the in-flow height. */
-  .base[data-docked] {
-    min-block-size: var(--navigation-bar-flow-size, 0px);
-  }
-
-  .base[data-docked] .frame {
-    position: fixed;
-    inset-block-start: 0;
-    inset-inline: 0;
-    z-index: var(--layer-2);
-    clip-path: inset(0);
-  }
-
-  /* The swap: a --ds-duration-quick clip cut from the top edge, instant under --motionNotOK [D183]. */
-  @media (prefers-reduced-motion: no-preference) {
-    .base[data-docked] .frame {
-      transition-property: clip-path;
-      transition-duration: var(--ds-duration-quick);
-      transition-timing-function: var(--ease-out-3);
-    }
-
-    @starting-style {
-      .base[data-docked] .frame {
-        clip-path: inset(0 0 100% 0);
-      }
-    }
-  }
-
-  /* The skip link stays out of sight until focused. */
-  .skipLink:not(:focus) {
-    inline-size: 1px;
-    block-size: 1px;
-    min-block-size: 0;
-    padding: 0;
-    border-width: 0;
-    overflow: hidden;
-    clip-path: inset(50%);
-  }
-
-  .skipLink:focus-visible,
-  .logo:focus-visible,
-  .utilityLink:focus-visible {
-    outline: var(--border-size-2) solid var(--primary12);
-    outline-offset: var(--border-size-2);
-  }
-
-  /* Utility link hover [D181]: the bare-text underline, --role-accent at --border-size-2. */
-  .utilityLink:hover .utilityLabel {
-    text-decoration-line: underline;
-  }
-
-  /* Current (aria-current="page"): the --ds-stroke-3 bar under the label [D15]. */
-  .utilityLink[aria-current='page']::after {
-    border-block-end-width: var(--ds-stroke-3);
-  }
-}
-
-@layer print {
-  @media print {
-    /*
-     * The header prints as the §7.8 masthead's logo only: un-stuck, no
-     * seam and no rule (the masthead's closing rule follows the title).
-     * The Ground's seam reads --border-size-1, zeroed here on the root.
-     */
-    .base {
-      --border-size-1: 0px;
-
-      min-block-size: 0;
-    }
-
-    .frame {
-      position: static;
-      clip-path: none;
-    }
-
-    .skipLink,
-    .strip,
-    .utility,
-    .nav,
-    .tools {
-      display: none;
-    }
-
-    .bar {
-      block-size: auto;
-      border-block-end-width: 0;
-    }
-  }
-}

package/components/NavigationMenu/NavigationMenu.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"NavigationMenu.d.ts","sourceRoot":"","sources":["../../src/components/NavigationMenu/NavigationMenu.tsx"],"names":[],"mappings":"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"}