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

package/guidelines/Guidelines.md

@@ -158,7 +158,6 @@ Every named export from `@gtivr4/a1-design-system-react` — verified against `s
 | `MessageEmptyState` | Empty state block; `scale="page\|section\|card"`, `icon`, `title`, `description`, `action` |
 | `Notification` | Badge wrapper; `count`, `label`, `dot`, `variant`, `position`, `max` |
 | `Snackbar` | Toast notification; `open`, `onClose`, `message`, `action` |
-| `SystemBanner` | Full-width system alert; `status`, `title`, `message`, `onDismiss` |
 
 ### Overlay
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gtivr4/a1-design-system-react",
-  "version": "0.7.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/circular-progress/CircularProgress.d.ts

@@ -14,7 +14,7 @@ export interface CircularProgressProps {
    * Circle diameter. xs renders the smallest ring (no inner content — children
    * are placed inline after the ring instead). Default: "md"
    */
-  size?: "xs" | "sm" | "md" | "lg";
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
   /**
    * Shows a continuously rotating arc instead of a value-based fill.
    * Removes aria-valuenow so assistive technology announces an indeterminate

package/src/components/circular-progress/CircularProgress.jsx

@@ -1,6 +1,6 @@
 import "./circular-progress.css";
 
-const SIZES = ["xs", "sm", "md", "lg"];
+const SIZES = ["xs", "sm", "md", "lg", "xl"];
 
 // SVG uses a 100×100 viewBox with a 10-unit stroke so the ring scales
 // proportionally when the container size changes via CSS.

package/src/components/circular-progress/circular-progress.css

@@ -17,6 +17,7 @@
 .a1-circular-progress--sm { --a1-cp-size: var(--component-circular-progress-sm-size); }
 /* md is the default — no modifier needed */
 .a1-circular-progress--lg { --a1-cp-size: var(--component-circular-progress-lg-size); }
+.a1-circular-progress--xl { --a1-cp-size: var(--component-circular-progress-xl-size); }
 
 /* ─── Ring (SVG + optional inner content) ────────────────────────────────────── */
 

package/src/components/field/field.css

@@ -391,7 +391,7 @@
   padding-inline-start: var(--base-spacing-4);
   padding-inline-end: var(--a1-field-padding-inline);
   font-family: var(--component-paragraph-font-family);
-  font-size: var(--semantic-font-size-body-xs);
+  font-size: var(--a1-field-font-size);
   color: var(--semantic-color-text-muted);
   line-height: 1;
   pointer-events: auto;

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

@@ -8,6 +8,28 @@ import "./top-header.css";
 
 // ── Helpers ────────────────────────────────────────────────────────────────────
 
+// Breakpoint min-widths that match the system breakpoint tokens.
+const BP_QUERIES = {
+  sm: "(min-width: 481px)",
+  md: "(min-width: 641px)",
+  lg: "(min-width: 1025px)",
+  xl: "(min-width: 1441px)",
+};
+
+// Resolve a scalar or responsive { xs?, sm?, md?, lg?, xl? } navIconPosition
+// 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)) {
+    if (typeof window !== "undefined" && window.matchMedia(query).matches) {
+      resolved = prop[bp] ?? resolved;
+    }
+  }
+  return resolved; // "start" | "above" | "hidden"
+}
+
 // Split a flat items array into sections separated by { divider: true } markers.
 function splitIntoSections(items) {
   const sections = [];
@@ -211,7 +233,7 @@ function NavMenuItem({ item, onClose }) {
 
 // ── NavItem (desktop) ──────────────────────────────────────────────────────────
 
-function NavItem({ item, openId, onOpen }) {
+function NavItem({ item, openId, onOpen, iconAbove }) {
   const triggerRef = useRef(null);
   const hasSubmenu = item.items?.length > 0;
   const hasRoute = !!item.href;
@@ -234,7 +256,32 @@ function NavItem({ item, openId, onOpen }) {
     .filter(Boolean)
     .join(" ");
 
-  const linkContent = (
+  // In icon-above mode the chevron is nested inside the label span so it sits
+  // inline with the text in the column layout, rather than appearing as a
+  // third stacked row below the icon and label.
+  const linkContent = iconAbove ? (
+    <>
+      {item.icon && (
+        <Icon
+          name={item.icon}
+          className="a1-top-header__nav-link-icon"
+          aria-hidden="true"
+        />
+      )}
+      {!isIconOnly && (
+        <span className="a1-top-header__nav-link-label">
+          {item.label}
+          {hasSubmenu && (
+            <Icon
+              name="expand_more"
+              className="a1-top-header__nav-chevron"
+              aria-hidden="true"
+            />
+          )}
+        </span>
+      )}
+    </>
+  ) : (
     <>
       {item.icon && (
         <Icon
@@ -247,14 +294,13 @@ function NavItem({ item, openId, onOpen }) {
     </>
   );
 
-  const submenuChevron = (
-    hasSubmenu && (
-      <Icon
-        name="expand_more"
-        className="a1-top-header__nav-chevron"
-        aria-hidden="true"
-      />
-    )
+  // In icon-above mode the chevron lives inside linkContent (see above).
+  const submenuChevron = !iconAbove && hasSubmenu && (
+    <Icon
+      name="expand_more"
+      className="a1-top-header__nav-chevron"
+      aria-hidden="true"
+    />
   );
 
   const submenuButtonContent = (
@@ -540,8 +586,10 @@ export function TopHeader({
   navItems = [],
   actions = [],
   loginButton,
+  navIconPosition = "start",
   className = "",
 }) {
+  const [navMode, setNavMode] = useState(() => resolveNavMode(navIconPosition));
   const [openSubmenu, setOpenSubmenu] = useState(null);
   const [openAction, setOpenAction] = useState(null);
   const [mobileNavOpen, setMobileNavOpen] = useState(false);
@@ -569,10 +617,30 @@ export function TopHeader({
     return () => desktopQuery.removeListener(closeAtDesktop);
   }, [mobileNavOpen]);
 
+  // Re-resolve navMode whenever navIconPosition or the viewport changes.
+  useEffect(() => {
+    if (typeof window === "undefined" || !window.matchMedia) return undefined;
+
+    const update = () => setNavMode(resolveNavMode(navIconPosition));
+    const listeners = Object.values(BP_QUERIES).map((q) => {
+      const mq = window.matchMedia(q);
+      mq.addEventListener("change", update);
+      return [mq, update];
+    });
+    update();
+    return () => listeners.forEach(([mq, fn]) => mq.removeEventListener("change", fn));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [JSON.stringify(navIconPosition)]);
+
   return (
     <>
       <header
-        className={["a1-top-header", className].filter(Boolean).join(" ")}
+        className={[
+          "a1-top-header",
+          navMode === "above" && "a1-top-header--nav-icon-above",
+          navMode === "hidden" && "a1-top-header--nav-hidden",
+          className,
+        ].filter(Boolean).join(" ")}
       >
         <button
           type="button"
@@ -599,6 +667,7 @@ export function TopHeader({
                   item={item}
                   openId={openSubmenu}
                   onOpen={setOpenSubmenu}
+                  iconAbove={navMode === "above"}
                 />
               ))}
             </ul>
@@ -630,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

@@ -320,6 +320,44 @@
   margin-inline-start: var(--base-spacing-4);
 }
 
+/* ── Icon-above nav layout ────────────────────────────────────────────────── */
+
+/* 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(--a1-nav-stacked-gap, var(--base-spacing-2));
+  padding-block: var(--base-spacing-8);
+  padding-inline: var(--base-spacing-8);
+  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(--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;
+  align-items: center;
+  gap: var(--base-spacing-2);
+  line-height: 1;
+}
+
+/* Chevron in this context is a small inline decoration next to the label. */
+.a1-top-header--nav-icon-above .a1-top-header__nav-link-label .a1-top-header__nav-chevron {
+  font-size: var(--semantic-font-size-body-sm);
+  margin-inline-start: 0;
+  transition: transform var(--semantic-motion-duration-fast) var(--semantic-motion-easing-standard);
+}
+
 /* ── Responsive ──────────────────────────────────────────────────────────── */
 
 @media (max-width: 768px) {
@@ -334,4 +372,23 @@
   .a1-top-header__nav {
     display: none;
   }
+
+  /* Icon-above mode: nav is always visible; hamburger is not needed. */
+  .a1-top-header--nav-icon-above .a1-top-header__hamburger {
+    display: none;
+  }
+
+  .a1-top-header--nav-icon-above .a1-top-header__nav {
+    display: flex;
+  }
+
+  /* Allow horizontal scrolling if items overflow on very small screens. */
+  .a1-top-header--nav-icon-above .a1-top-header__nav-list {
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+
+  .a1-top-header--nav-icon-above .a1-top-header__nav-list::-webkit-scrollbar {
+    display: none;
+  }
 }

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,9 +127,11 @@
   --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;
+  --base-spacing-192: 12rem;
   --base-spacing-neg-4: -0.25rem;
   --base-spacing-neg-8: -0.5rem;
   --base-spacing-neg-12: -0.75rem;
@@ -180,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;
@@ -332,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;
@@ -414,6 +420,7 @@
   --component-circular-progress-sm-size: 4rem;
   --component-circular-progress-md-size: 6rem;
   --component-circular-progress-lg-size: 8rem;
+  --component-circular-progress-xl-size: 12rem;
   --component-circular-progress-track-color: #e1e8f3;
   --component-circular-progress-fill-color: #7c3aed;
   --component-circular-progress-gap: 0.5rem;

package/src/components/system-banner/SystemBanner.d.ts

@@ -1,17 +0,0 @@
-import * as React from "react";
-
-export interface SystemBannerProps {
-  /** Semantic status colour. Default: "neutral" */
-  status?: "neutral" | "info" | "success" | "warn" | "error";
-  /** Bold title text */
-  title?: string;
-  /** Override the default status icon with any Material Symbols name */
-  icon?: string;
-  /** Action element rendered at the trailing end */
-  action?: React.ReactNode;
-  /** Called when the dismiss button is clicked. Omit to hide the dismiss button. */
-  onDismiss?: () => void;
-  children?: React.ReactNode;
-}
-
-export declare function SystemBanner(props: SystemBannerProps): React.ReactElement;

package/src/components/system-banner/SystemBanner.jsx

@@ -1,57 +0,0 @@
-import "./system-banner.css";
-import { Icon } from "../icon/Icon.jsx";
-import { IconButton } from "../icon-button/IconButton.jsx";
-
-const STATUS_ICONS = {
-  neutral: "campaign",
-  info:    "info",
-  success: "check_circle",
-  warn:    "warning",
-  error:   "error",
-};
-
-const STATUSES = ["neutral", "info", "success", "warn", "error"];
-
-export function SystemBanner({
-  status = "neutral",
-  title,
-  icon,
-  action,
-  onDismiss,
-  children,
-}) {
-  const resolvedStatus = STATUSES.includes(status) ? status : "neutral";
-  const resolvedIcon = icon ?? STATUS_ICONS[resolvedStatus];
-
-  return (
-    <div
-      className={`a1-system-banner a1-system-banner--${resolvedStatus}`}
-      role="alert"
-      aria-live="polite"
-    >
-      <div className="a1-system-banner__inner">
-        <span className="a1-system-banner__icon" aria-hidden="true">
-          <Icon name={resolvedIcon} />
-        </span>
-
-        <div className="a1-system-banner__content">
-          {title    && <span className="a1-system-banner__title">{title}</span>}
-          {children && <span className="a1-system-banner__body">{children}</span>}
-        </div>
-
-        {action && (
-          <div className="a1-system-banner__action">{action}</div>
-        )}
-
-        {onDismiss && (
-          <IconButton
-            icon="close"
-            label="Dismiss"
-            onClick={onDismiss}
-            className="a1-system-banner__dismiss"
-          />
-        )}
-      </div>
-    </div>
-  );
-}

package/src/components/system-banner/system-banner.css

@@ -1,118 +0,0 @@
-/* ─── System Banner ────────────────────────────────────────────────────────── */
-
-.a1-system-banner {
-  --a1-sysbanner-bg: var(--semantic-color-surface-inverse);
-  --a1-sysbanner-fg: var(--semantic-color-text-inverse);
-
-  background: var(--a1-sysbanner-bg);
-  color: var(--a1-sysbanner-fg);
-  width: 100%;
-}
-
-.a1-system-banner--info    { --a1-sysbanner-bg: var(--semantic-color-status-info-background); }
-.a1-system-banner--success { --a1-sysbanner-bg: var(--semantic-color-status-success-background); }
-.a1-system-banner--warn    { --a1-sysbanner-bg: var(--semantic-color-status-warn-background); }
-.a1-system-banner--error   { --a1-sysbanner-bg: var(--semantic-color-status-error-background); }
-
-/* ─── Inner layout ─────────────────────────────────────────────────────────── */
-
-.a1-system-banner__inner {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: var(--base-spacing-8) var(--base-spacing-12);
-  max-width: var(--component-message-banner-system-max-width);
-  margin-inline: auto;
-  padding-block: var(--base-spacing-12);
-  padding-inline: var(--base-spacing-24);
-}
-
-/* ─── Icon ─────────────────────────────────────────────────────────────────── */
-
-.a1-system-banner__icon {
-  flex-shrink: 0;
-  display: flex;
-  font-size: var(--component-message-banner-icon-size);
-  line-height: 1;
-  --a1-icon-opsz: var(--component-message-banner-icon-optical-size);
-}
-
-/* ─── Content (title + body inline) ───────────────────────────────────────── */
-
-.a1-system-banner__content {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-  gap: 0 var(--base-spacing-8);
-  font-family: var(--component-paragraph-font-family);
-  font-size: var(--semantic-font-size-body-sm);
-  line-height: var(--semantic-font-line-height-body);
-}
-
-.a1-system-banner__title {
-  font-weight: var(--component-message-banner-title-font-weight);
-  color: var(--a1-sysbanner-fg);
-}
-
-.a1-system-banner__body {
-  font-weight: var(--semantic-font-weight-body);
-  color: var(--a1-sysbanner-fg);
-  opacity: 0.85;
-}
-
-/* ─── Action ───────────────────────────────────────────────────────────────── */
-
-.a1-system-banner__action {
-  flex-shrink: 0;
-}
-
-/* ─── Dismiss ──────────────────────────────────────────────────────────────── */
-
-.a1-system-banner__dismiss {
-  flex-shrink: 0;
-  margin-inline-start: var(--base-spacing-4);
-}
-
-/* ─── Link override on solid bg ────────────────────────────────────────────── */
-
-.a1-system-banner .a1-link {
-  color: var(--a1-sysbanner-fg);
-}
-
-.a1-system-banner .a1-link:hover {
-  color: color-mix(in srgb, var(--a1-sysbanner-fg) 80%, transparent);
-}
-
-.a1-system-banner .a1-link:active {
-  color: color-mix(in srgb, var(--a1-sysbanner-fg) 65%, transparent);
-}
-
-/* ─── Tertiary button override on solid bg ─────────────────────────────────── */
-
-.a1-system-banner .a1-button--tertiary {
-  --a1-button-foreground:         var(--a1-sysbanner-fg);
-  --a1-button-foreground-hover:   var(--a1-sysbanner-fg);
-  --a1-button-foreground-pressed: var(--a1-sysbanner-fg);
-  --a1-button-background:         transparent;
-  --a1-button-background-hover:   color-mix(in srgb, var(--a1-sysbanner-fg) 12%, transparent);
-  --a1-button-background-pressed: color-mix(in srgb, var(--a1-sysbanner-fg) 20%, transparent);
-  --a1-button-border:             color-mix(in srgb, var(--a1-sysbanner-fg) 40%, transparent);
-  --a1-button-border-hover:       color-mix(in srgb, var(--a1-sysbanner-fg) 60%, transparent);
-  --a1-button-border-pressed:     color-mix(in srgb, var(--a1-sysbanner-fg) 75%, transparent);
-}
-
-/* ─── Icon button (dismiss) override on solid bg ───────────────────────────── */
-
-.a1-system-banner .a1-icon-button {
-  --a1-icon-button-foreground:         var(--a1-sysbanner-fg);
-  --a1-icon-button-foreground-hover:   var(--a1-sysbanner-fg);
-  --a1-icon-button-foreground-pressed: var(--a1-sysbanner-fg);
-  --a1-icon-button-background:         transparent;
-  --a1-icon-button-background-hover:   color-mix(in srgb, var(--a1-sysbanner-fg) 12%, transparent);
-  --a1-icon-button-background-pressed: color-mix(in srgb, var(--a1-sysbanner-fg) 20%, transparent);
-  --a1-icon-button-border:             transparent;
-  --a1-icon-button-border-hover:       transparent;
-  --a1-icon-button-border-pressed:     transparent;
-}