@gtivr4/a1-design-system-react 0.8.0 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gtivr4/a1-design-system-react",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "React components for the A1 token-driven design system.",
   "type": "module",
   "main": "./src/index.js",

package/src/color-scheme.css

@@ -43,6 +43,7 @@ body {
 .a1-inverse {
   color-scheme: dark;
   --semantic-color-surface-page:   var(--base-color-neutral-900);
+  --semantic-color-surface-card:   var(--base-color-neutral-800);
   --semantic-color-surface-panel:  var(--base-color-neutral-800);
   --semantic-color-surface-raised: var(--base-color-neutral-700);
   --semantic-color-text-default: var(--base-color-neutral-50);
@@ -122,6 +123,7 @@ body {
   :root {
     color-scheme: dark;
     --semantic-color-surface-page:   var(--base-color-neutral-900);
+    --semantic-color-surface-card:   var(--base-color-neutral-800);
     --semantic-color-surface-panel:  var(--base-color-neutral-800);
     --semantic-color-surface-raised: var(--base-color-neutral-700);
     --semantic-color-text-default: var(--base-color-neutral-50);
@@ -196,6 +198,7 @@ body {
   .a1-inverse {
     color-scheme: light;
     --semantic-color-surface-page:   var(--base-color-neutral-0);
+    --semantic-color-surface-card:   var(--base-color-neutral-0);
     --semantic-color-surface-panel:  var(--base-color-neutral-50);
     --semantic-color-surface-raised: var(--base-color-neutral-100);
     --semantic-color-text-default: var(--base-color-neutral-900);
@@ -273,6 +276,7 @@ body {
 html.a1-theme-dark {
   color-scheme: dark;
   --semantic-color-surface-page:   var(--base-color-neutral-900);
+  --semantic-color-surface-card:   var(--base-color-neutral-800);
   --semantic-color-surface-panel:  var(--base-color-neutral-800);
   --semantic-color-surface-raised: var(--base-color-neutral-700);
   --semantic-color-text-default: var(--base-color-neutral-50);
@@ -348,6 +352,7 @@ html.a1-theme-dark .a1-inverse,
 html.a1-theme-dark .a1-theme-light {
   color-scheme: light;
   --semantic-color-surface-page:   var(--base-color-neutral-0);
+  --semantic-color-surface-card:   var(--base-color-neutral-0);
   --semantic-color-surface-panel:  var(--base-color-neutral-50);
   --semantic-color-surface-raised: var(--base-color-neutral-100);
   --semantic-color-text-default: var(--base-color-neutral-900);

package/src/components/bottom-drawer/BottomDrawer.d.ts

@@ -0,0 +1,34 @@
+import { ReactNode } from "react";
+
+export interface BottomDrawerItem {
+  /** Unique identifier for the item. */
+  id: string;
+  /** Display label shown below the icon. */
+  label: string;
+  /** Material Symbols icon name. */
+  icon: string;
+  /** Navigate to this URL — renders an <a> element. */
+  href?: string;
+  /** Click handler — used when no href is provided; renders a <button>. */
+  onClick?: () => void;
+  /** Marks this item as the currently active destination. */
+  active?: boolean;
+  /** Numeric badge count shown on the icon (capped at 99+). */
+  badge?: number;
+  /** Disables the item. */
+  disabled?: boolean;
+}
+
+export interface BottomDrawerProps {
+  /**
+   * Up to 5 navigation items. Additional items beyond 5 are silently ignored.
+   */
+  items: BottomDrawerItem[];
+  /**
+   * Accessible name for the nav element.
+   * @default "Primary navigation"
+   */
+  "aria-label"?: string;
+}
+
+export declare function BottomDrawer(props: BottomDrawerProps): ReactNode;

package/src/components/bottom-drawer/BottomDrawer.jsx

@@ -0,0 +1,55 @@
+import { Icon } from "../icon/Icon.jsx";
+import "./bottom-drawer.css";
+
+export function BottomDrawer({ items = [], "aria-label": ariaLabel = "Primary navigation", className = "" }) {
+  const visibleItems = items.slice(0, 5);
+
+  return (
+    <nav className={["a1-bottom-drawer", className].filter(Boolean).join(" ")} aria-label={ariaLabel}>
+      <ul className="a1-bottom-drawer__list" role="list">
+        {visibleItems.map((item) => {
+          const Tag = item.href ? "a" : "button";
+          const tagProps = item.href
+            ? { href: item.href }
+            : { type: "button", onClick: item.onClick };
+
+          const linkClass = [
+            "a1-bottom-drawer__link",
+            item.active && "a1-bottom-drawer__link--active",
+            item.disabled && "a1-bottom-drawer__link--disabled",
+          ]
+            .filter(Boolean)
+            .join(" ");
+
+          return (
+            <li key={item.id} className="a1-bottom-drawer__item">
+              <Tag
+                className={linkClass}
+                aria-current={item.active ? "page" : undefined}
+                aria-disabled={item.disabled ? "true" : undefined}
+                {...tagProps}
+              >
+                <span className="a1-bottom-drawer__link-icon-wrap">
+                  <Icon
+                    name={item.icon}
+                    className="a1-bottom-drawer__link-icon"
+                    aria-hidden="true"
+                  />
+                  {item.badge > 0 && (
+                    <span
+                      className="a1-bottom-drawer__badge"
+                      aria-label={`${item.badge} unread`}
+                    >
+                      {item.badge > 99 ? "99+" : item.badge}
+                    </span>
+                  )}
+                </span>
+                <span className="a1-bottom-drawer__link-label">{item.label}</span>
+              </Tag>
+            </li>
+          );
+        })}
+      </ul>
+    </nav>
+  );
+}

package/src/components/bottom-drawer/bottom-drawer.css

@@ -0,0 +1,138 @@
+/* ═══════════════════════════════════════════════════════════════════════════
+   BottomDrawer
+   Fixed bottom navigation bar — up to 5 items, icon stacked above label.
+   Mirrors the TopHeader icon-above item style via shared --a1-nav-stacked-*
+   custom properties.
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+/* ── Shared stacked-nav-item variables ───────────────────────────────────── */
+/* These same names are referenced in top-header.css icon-above mode so both
+   components stay in sync when tokens change. */
+
+:root {
+  --a1-nav-stacked-icon-size:  var(--semantic-font-size-heading-sm);
+  --a1-nav-stacked-label-size: var(--semantic-font-size-body-xs);
+  --a1-nav-stacked-gap:        var(--base-spacing-2);
+}
+
+/* ── Shell ────────────────────────────────────────────────────────────────── */
+
+.a1-bottom-drawer {
+  position: fixed;
+  inset-block-end: 0;
+  inset-inline: 0;
+  z-index: var(--component-bottom-drawer-z-index);
+  display: flex;
+  align-items: stretch;
+  min-block-size: var(--component-bottom-drawer-height);
+  padding-block-end: env(safe-area-inset-bottom, 0px);
+  background: var(--semantic-color-surface-page);
+  border-block-start: var(--component-bottom-drawer-border-width) solid var(--semantic-color-border-subtle);
+  box-shadow: 0 -4px 12px color-mix(in srgb, var(--semantic-color-text-default) 8%, transparent);
+}
+
+/* ── Item list ────────────────────────────────────────────────────────────── */
+
+.a1-bottom-drawer__list {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.a1-bottom-drawer__item {
+  flex: 1;
+  display: flex;
+  align-items: stretch;
+  min-inline-size: 0;
+}
+
+/* ── Nav link — icon above label ─────────────────────────────────────────── */
+
+.a1-bottom-drawer__link {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--a1-nav-stacked-gap);
+  width: 100%;
+  padding-block: var(--base-spacing-8);
+  padding-inline: var(--base-spacing-4);
+  color: var(--semantic-color-text-muted);
+  font-family: var(--component-paragraph-font-family);
+  font-size: var(--a1-nav-stacked-label-size);
+  font-weight: 500;
+  line-height: 1;
+  text-decoration: none;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition:
+    color var(--semantic-motion-duration-fast) var(--semantic-motion-easing-standard),
+    background var(--semantic-motion-duration-fast) var(--semantic-motion-easing-standard);
+}
+
+.a1-bottom-drawer__link:hover:not(.a1-bottom-drawer__link--disabled) {
+  color: var(--semantic-color-text-default);
+  background: var(--semantic-color-surface-raised);
+}
+
+.a1-bottom-drawer__link:focus-visible {
+  outline: 2px solid var(--semantic-color-action-background);
+  outline-offset: -2px;
+}
+
+.a1-bottom-drawer__link--active {
+  color: var(--semantic-color-action-background);
+}
+
+.a1-bottom-drawer__link--disabled {
+  opacity: var(--component-button-disabled-opacity);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* ── Icon ─────────────────────────────────────────────────────────────────── */
+
+.a1-bottom-drawer__link-icon-wrap {
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
+.a1-bottom-drawer__link-icon {
+  font-size: var(--a1-nav-stacked-icon-size);
+  flex-shrink: 0;
+}
+
+/* ── Badge ────────────────────────────────────────────────────────────────── */
+
+.a1-bottom-drawer__badge {
+  position: absolute;
+  top: -3px;
+  right: -6px;
+  min-inline-size: 16px;
+  block-size: 16px;
+  padding-inline: var(--base-spacing-4);
+  background: var(--semantic-color-status-error-background);
+  color: var(--semantic-color-status-error-foreground);
+  border-radius: 8px;
+  font-family: var(--component-paragraph-font-family);
+  font-size: var(--component-tab-count-font-size, 10px);
+  font-weight: 700;
+  line-height: 16px;
+  text-align: center;
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+/* ── Label ────────────────────────────────────────────────────────────────── */
+
+.a1-bottom-drawer__link-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-inline-size: 100%;
+}

package/src/components/card/card.css

@@ -1,7 +1,7 @@
 .a1-card {
   container: a1-card / inline-size;
   box-sizing: border-box;
-  background: var(--semantic-color-surface-page);
+  background: var(--semantic-color-surface-card);
   border: var(--component-card-border-width) solid var(--semantic-color-border-subtle);
   border-radius: var(--component-card-border-radius);
   padding: var(--component-card-padding);

package/src/components/top-header/TopHeader.jsx

@@ -17,9 +17,9 @@ const BP_QUERIES = {
 };
 
 // Resolve a scalar or responsive { xs?, sm?, md?, lg?, xl? } navIconPosition
-// value to a boolean indicating whether icon-above mode is active right now.
-function resolveIconAbove(prop) {
-  if (!prop || typeof prop === "string") return prop === "above";
+// value to the mode active at the current viewport: "start" | "above" | "hidden".
+function resolveNavMode(prop) {
+  if (!prop || typeof prop === "string") return prop ?? "start";
   // Cascade xs → sm → md → lg → xl, carrying forward the last explicit value.
   let resolved = prop.xs ?? "start";
   for (const [bp, query] of Object.entries(BP_QUERIES)) {
@@ -27,7 +27,7 @@ function resolveIconAbove(prop) {
       resolved = prop[bp] ?? resolved;
     }
   }
-  return resolved === "above";
+  return resolved; // "start" | "above" | "hidden"
 }
 
 // Split a flat items array into sections separated by { divider: true } markers.
@@ -589,7 +589,7 @@ export function TopHeader({
   navIconPosition = "start",
   className = "",
 }) {
-  const [iconAbove, setIconAbove] = useState(() => resolveIconAbove(navIconPosition));
+  const [navMode, setNavMode] = useState(() => resolveNavMode(navIconPosition));
   const [openSubmenu, setOpenSubmenu] = useState(null);
   const [openAction, setOpenAction] = useState(null);
   const [mobileNavOpen, setMobileNavOpen] = useState(false);
@@ -617,11 +617,11 @@ export function TopHeader({
     return () => desktopQuery.removeListener(closeAtDesktop);
   }, [mobileNavOpen]);
 
-  // Re-resolve iconAbove whenever navIconPosition or the viewport changes.
+  // Re-resolve navMode whenever navIconPosition or the viewport changes.
   useEffect(() => {
     if (typeof window === "undefined" || !window.matchMedia) return undefined;
 
-    const update = () => setIconAbove(resolveIconAbove(navIconPosition));
+    const update = () => setNavMode(resolveNavMode(navIconPosition));
     const listeners = Object.values(BP_QUERIES).map((q) => {
       const mq = window.matchMedia(q);
       mq.addEventListener("change", update);
@@ -637,7 +637,8 @@ export function TopHeader({
       <header
         className={[
           "a1-top-header",
-          iconAbove && "a1-top-header--nav-icon-above",
+          navMode === "above" && "a1-top-header--nav-icon-above",
+          navMode === "hidden" && "a1-top-header--nav-hidden",
           className,
         ].filter(Boolean).join(" ")}
       >
@@ -666,7 +667,7 @@ export function TopHeader({
                   item={item}
                   openId={openSubmenu}
                   onOpen={setOpenSubmenu}
-                  iconAbove={iconAbove}
+                  iconAbove={navMode === "above"}
                 />
               ))}
             </ul>
@@ -698,7 +699,7 @@ export function TopHeader({
         </div>
       </header>
 
-      {mobileNavOpen && (
+      {mobileNavOpen && navMode !== "hidden" && (
         <MobileDrawer
           navItems={navItems}
           onClose={() => setMobileNavOpen(false)}

package/src/components/top-header/top-header.css

@@ -322,21 +322,27 @@
 
 /* ── Icon-above nav layout ────────────────────────────────────────────────── */
 
-/* Nav links become a column: icon above, label (+ optional chevron) below. */
+/* Nav links become a column: icon above, label (+ optional chevron) below.
+   Uses the same --a1-nav-stacked-* variables as BottomDrawer so both stay
+   visually in sync. */
 .a1-top-header--nav-icon-above .a1-top-header__nav-link {
   flex-direction: column;
   align-items: center;
-  gap: var(--base-spacing-2);
+  gap: var(--a1-nav-stacked-gap, var(--base-spacing-2));
   padding-block: var(--base-spacing-8);
   padding-inline: var(--base-spacing-8);
-  font-size: var(--semantic-font-size-body-xs);
+  font-size: var(--a1-nav-stacked-label-size, var(--semantic-font-size-body-xs));
 }
 
 /* Icon slightly larger so it reads clearly at the top of each item. */
 .a1-top-header--nav-icon-above .a1-top-header__nav-link-icon {
-  font-size: var(--semantic-font-size-heading-sm);
+  font-size: var(--a1-nav-stacked-icon-size, var(--semantic-font-size-heading-sm));
 }
 
+/* Nav-hidden mode: BottomDrawer provides nav — suppress hamburger and nav entirely. */
+.a1-top-header--nav-hidden .a1-top-header__hamburger { display: none; }
+.a1-top-header--nav-hidden .a1-top-header__nav { display: none; }
+
 /* Label row: inline-flex so the small chevron sits beside the text. */
 .a1-top-header--nav-icon-above .a1-top-header__nav-link-label {
   display: inline-flex;

package/src/index.js

@@ -54,6 +54,7 @@ export { LabelsProvider, useLabel } from "./components/labels/Labels.jsx";
 export { Menu, MenuSection, MenuItem } from "./components/menu/Menu.jsx";
 export { SideNav, SideNavItem, SideNavGroup } from "./components/side-nav/SideNav.jsx";
 export { TokenSelect } from "./components/token-select/TokenSelect.jsx";
+export { BottomDrawer } from "./components/bottom-drawer/BottomDrawer.jsx";
 export { TopHeader } from "./components/top-header/TopHeader.jsx";
 export { DataTable } from "./components/data-table/DataTable.jsx";
 export { DataTableFilters } from "./components/data-table/DataTableFilters.jsx";

package/src/themes.css

@@ -364,6 +364,7 @@ html.a1-theme-fresh {
   --semantic-color-text-inverse: var(--base-color-neutral-0);
   --semantic-color-text-accent: var(--base-color-accent-600);
   --semantic-color-surface-page: #D7FFF8;
+  --semantic-color-surface-card: var(--base-color-neutral-0);
   --semantic-color-surface-panel: var(--base-color-neutral-0);
   --semantic-color-surface-raised: var(--base-color-neutral-50);
   --semantic-color-border-subtle: var(--base-color-neutral-200);

package/src/tokens.css

@@ -127,6 +127,7 @@
   --base-spacing-32: 2rem;
   --base-spacing-40: 2.5rem;
   --base-spacing-48: 3rem;
+  --base-spacing-56: 3.5rem;
   --base-spacing-64: 4rem;
   --base-spacing-96: 6rem;
   --base-spacing-128: 8rem;
@@ -181,6 +182,7 @@
   --semantic-color-text-inverse: #ffffff;
   --semantic-color-text-accent: #7c3aed;
   --semantic-color-surface-page: #ffffff;
+  --semantic-color-surface-card: #ffffff;
   --semantic-color-surface-panel: #f0f6fe;
   --semantic-color-surface-raised: #e1e8f3;
   --semantic-color-surface-inverse: #060b14;
@@ -333,6 +335,9 @@
   --component-blockquote-padding-inline: 1.5rem;
   --component-blockquote-mark-size: 5rem;
   --component-blockquote-cite-font-weight: 500;
+  --component-bottom-drawer-height: 3.5rem;
+  --component-bottom-drawer-border-width: 1px;
+  --component-bottom-drawer-z-index: 200;
   --component-calendar-month-gap: 2rem;
   --component-calendar-heading-padding-block: 0.75rem;
   --component-calendar-heading-padding-block-compact: 0.5rem;