@usefragments/ui 1.0.2 → 1.2.0

package/src/components/DataTable/index.tsx

@@ -82,6 +82,8 @@ export interface DataTableProps<T> extends Omit<React.HTMLAttributes<HTMLTableEl
   onRowSelectionChange?: OnChangeFn<RowSelectionState>;
   /** Row click handler */
   onRowClick?: (row: T, event: DataTableRowClickEvent) => void;
+  /** Props applied to each rendered data row. Use this for row-level ARIA labels, roles, and data attributes. */
+  getRowProps?: (row: T) => React.HTMLAttributes<HTMLTableRowElement>;
   /** Extract sub-rows from a row for expandable tree tables */
   getSubRows?: (row: T) => T[] | undefined;
   /** Controlled expanded state */
@@ -143,7 +145,11 @@ function isInteractiveTarget(target: EventTarget | null, currentTarget: HTMLTabl
     'button, a, input, select, textarea, [role="button"], [role="link"], [role="checkbox"], [role="switch"]'
   );
 
-  return Boolean(interactiveElement && currentTarget.contains(interactiveElement));
+  return Boolean(
+    interactiveElement &&
+    interactiveElement !== currentTarget &&
+    currentTarget.contains(interactiveElement)
+  );
 }
 
 function DataTableRoot<T>({
@@ -158,6 +164,7 @@ function DataTableRoot<T>({
   rowSelection: controlledRowSelection,
   onRowSelectionChange,
   onRowClick,
+  getRowProps,
   getSubRows,
   expanded: controlledExpanded,
   onExpandedChange,
@@ -411,13 +418,25 @@ function DataTableRoot<T>({
               const isSelected = selectable ? row.getIsSelected() : false;
               const depth: number = row.depth ?? 0;
               const canExpand = hasSubRows && row.getCanExpand();
+              const resolvedRowProps = getRowProps?.(row.original) ?? {};
+              const {
+                className: rowClassName,
+                onClick: rowOnClick,
+                onKeyDown: rowOnKeyDown,
+                tabIndex: rowTabIndex,
+                ...rowHtmlProps
+              } = resolvedRowProps;
               const handleRowClick = (event: React.MouseEvent<HTMLTableRowElement>) => {
+                rowOnClick?.(event);
+                if (event.defaultPrevented) return;
                 if (!onRowClick) return;
                 if (isInteractiveTarget(event.target, event.currentTarget)) return;
                 onRowClick(row.original, event);
               };
 
               const handleRowKeyDown = (event: React.KeyboardEvent<HTMLTableRowElement>) => {
+                rowOnKeyDown?.(event);
+                if (event.defaultPrevented) return;
                 if (!onRowClick) return;
                 if (isInteractiveTarget(event.target, event.currentTarget)) return;
                 if (event.key === "Enter" || event.key === " ") {
@@ -428,18 +447,20 @@ function DataTableRoot<T>({
 
               return (
                 <tr
+                  {...rowHtmlProps}
                   key={row.id}
                   className={[
                     styles.row,
                     isClickable && styles.clickable,
                     isSelected && styles.selected,
                     depth > 0 && styles.subRow,
+                    rowClassName,
                   ]
                     .filter(Boolean)
                     .join(" ")}
-                  onClick={isClickable ? handleRowClick : undefined}
-                  onKeyDown={isClickable ? handleRowKeyDown : undefined}
-                  tabIndex={isClickable ? 0 : undefined}
+                  onClick={isClickable || rowOnClick ? handleRowClick : undefined}
+                  onKeyDown={isClickable || rowOnKeyDown ? handleRowKeyDown : undefined}
+                  tabIndex={rowTabIndex ?? (isClickable ? 0 : undefined)}
                   data-selected={isSelected || undefined}
                   data-depth={depth > 0 ? depth : undefined}
                 >

package/src/components/DatePicker/index.tsx

@@ -2,6 +2,8 @@
 
 import * as React from "react";
 import { Popover as BasePopover } from "@base-ui/react/popover";
+import { DayFlag, DayPicker, SelectionState, UI } from "react-day-picker";
+import { format as formatDateWithPattern } from "date-fns";
 import { useFormFieldIds, type FormFieldProps } from "../../utils/aria";
 import { useResolvedControlSize } from "../ComponentDefaults";
 import styles from "./DatePicker.module.scss";
@@ -82,39 +84,6 @@ export interface DatePickerPresetProps extends React.ButtonHTMLAttributes<HTMLBu
   range?: DateRange;
 }
 
-// ============================================
-// Lazy-loaded dependencies (react-day-picker + date-fns)
-// ============================================
-
-let _DayPicker: any = null;
-let _dpUI: any = null;
-let _SelectionState: any = null;
-let _DayFlag: any = null;
-let _formatDate: ((date: Date, fmt: string) => string) | null = null;
-let _dpLoaded = false;
-let _dpFailed = false;
-
-function loadDatePickerDeps() {
-  if (_dpLoaded) return;
-  _dpLoaded = true;
-  try {
-    // eslint-disable-next-line @typescript-eslint/no-require-imports
-    const rdp = require("react-day-picker");
-    _DayPicker = rdp.DayPicker;
-    _dpUI = rdp.UI;
-    _SelectionState = rdp.SelectionState;
-    _DayFlag = rdp.DayFlag;
-  } catch {
-    _dpFailed = true;
-  }
-  try {
-    // eslint-disable-next-line @typescript-eslint/no-require-imports
-    _formatDate = require("date-fns").format;
-  } catch {
-    _dpFailed = true;
-  }
-}
-
 // ============================================
 // Icons
 // ============================================
@@ -219,18 +188,13 @@ function useDatePickerContext() {
 // ============================================
 
 function defaultFormatDate(date: Date): string {
-  if (_formatDate) return _formatDate(date, "PPP");
-  return date.toLocaleDateString();
+  return formatDateWithPattern(date, "PPP");
 }
 
 function defaultFormatRange(range: DateRange): string {
   if (!range.from) return "";
-  if (_formatDate) {
-    if (!range.to) return _formatDate(range.from, "LLL dd, y");
-    return `${_formatDate(range.from, "LLL dd, y")} - ${_formatDate(range.to, "LLL dd, y")}`;
-  }
-  if (!range.to) return range.from.toLocaleDateString();
-  return `${range.from.toLocaleDateString()} - ${range.to.toLocaleDateString()}`;
+  if (!range.to) return formatDateWithPattern(range.from, "LLL dd, y");
+  return `${formatDateWithPattern(range.from, "LLL dd, y")} - ${formatDateWithPattern(range.to, "LLL dd, y")}`;
 }
 
 function formatDateForHiddenInput(date?: Date): string {
@@ -246,32 +210,31 @@ function formatDateForHiddenInput(date?: Date): string {
 // ============================================
 
 function getCalendarClassNames() {
-  if (!_dpUI || !_SelectionState || !_DayFlag) return {};
   return {
-    [_dpUI.Root]: styles.calendar,
-    [_dpUI.Months]: styles.months,
-    [_dpUI.Month]: styles.month,
-    [_dpUI.MonthCaption]: styles.monthCaption,
-    [_dpUI.CaptionLabel]: styles.captionLabel,
-    [_dpUI.Nav]: styles.nav,
-    [_dpUI.PreviousMonthButton]: styles.navButton,
-    [_dpUI.NextMonthButton]: styles.navButton,
-    [_dpUI.MonthGrid]: styles.monthGrid,
-    [_dpUI.Weekdays]: styles.weekdays,
-    [_dpUI.Weekday]: styles.weekday,
-    [_dpUI.Weeks]: styles.weeks,
-    [_dpUI.Week]: styles.week,
-    [_dpUI.Day]: styles.day,
-    [_dpUI.DayButton]: styles.dayButton,
-    [_dpUI.Chevron]: styles.chevron,
-    [_SelectionState.selected]: styles.selected,
-    [_SelectionState.range_start]: styles.rangeStart,
-    [_SelectionState.range_middle]: styles.rangeMiddle,
-    [_SelectionState.range_end]: styles.rangeEnd,
-    [_DayFlag.today]: styles.today,
-    [_DayFlag.outside]: styles.outside,
-    [_DayFlag.disabled]: styles.disabled,
-    [_DayFlag.focused]: styles.focused,
+    [UI.Root]: styles.calendar,
+    [UI.Months]: styles.months,
+    [UI.Month]: styles.month,
+    [UI.MonthCaption]: styles.monthCaption,
+    [UI.CaptionLabel]: styles.captionLabel,
+    [UI.Nav]: styles.nav,
+    [UI.PreviousMonthButton]: styles.navButton,
+    [UI.NextMonthButton]: styles.navButton,
+    [UI.MonthGrid]: styles.monthGrid,
+    [UI.Weekdays]: styles.weekdays,
+    [UI.Weekday]: styles.weekday,
+    [UI.Weeks]: styles.weeks,
+    [UI.Week]: styles.week,
+    [UI.Day]: styles.day,
+    [UI.DayButton]: styles.dayButton,
+    [UI.Chevron]: styles.chevron,
+    [SelectionState.selected]: styles.selected,
+    [SelectionState.range_start]: styles.rangeStart,
+    [SelectionState.range_middle]: styles.rangeMiddle,
+    [SelectionState.range_end]: styles.rangeEnd,
+    [DayFlag.today]: styles.today,
+    [DayFlag.outside]: styles.outside,
+    [DayFlag.disabled]: styles.disabled,
+    [DayFlag.focused]: styles.focused,
   };
 }
 
@@ -309,7 +272,6 @@ const DatePickerRoot = React.forwardRef<HTMLDivElement, DatePickerProps>(functio
 ) {
   const size = useResolvedControlSize(sizeProp);
   // Load deps eagerly so date formatters are available in the trigger
-  loadDatePickerDeps();
   const [internalSelected, setInternalSelected] = React.useState<Date | null>(selectedProp ?? null);
   const [internalRange, setInternalRange] = React.useState<DateRange | null>(
     selectedRangeProp ?? null
@@ -544,8 +506,6 @@ function DatePickerCalendar({
   numberOfMonths: numberOfMonthsProp,
   className,
 }: DatePickerCalendarProps) {
-  loadDatePickerDeps();
-
   const ctx = useDatePickerContext();
   const monthCount = numberOfMonthsProp ?? ctx.numberOfMonths;
 
@@ -557,31 +517,19 @@ function DatePickerCalendar({
     []
   );
 
-  if (_dpFailed || !_DayPicker) {
-    if (_dpFailed && process.env.NODE_ENV === "development") {
-      console.warn(
-        "[@usefragments/ui] DatePicker: react-day-picker and date-fns are not installed. " +
-          "Install them with: npm install react-day-picker date-fns"
-      );
-    }
-    return null;
-  }
-
   const calendarClassNames = getCalendarClassNames();
 
   const calendarClasses = className
-    ? { ...calendarClassNames, [_dpUI.Root]: [styles.calendar, className].join(" ") }
+    ? { ...calendarClassNames, [UI.Root]: [styles.calendar, className].join(" ") }
     : calendarClassNames;
 
-  const DayPickerComponent = _DayPicker;
-
   if (ctx.mode === "range") {
     const rangeSelected = ctx.selectedRange
       ? { from: ctx.selectedRange.from ?? undefined, to: ctx.selectedRange.to ?? undefined }
       : undefined;
 
     return (
-      <DayPickerComponent
+      <DayPicker
         mode="range"
         selected={rangeSelected}
         onSelect={(range: any) => {
@@ -601,7 +549,7 @@ function DatePickerCalendar({
   }
 
   return (
-    <DayPickerComponent
+    <DayPicker
       mode="single"
       selected={ctx.selected ?? undefined}
       onSelect={(date: any) => {

package/src/components/Drawer/index.tsx

@@ -92,6 +92,18 @@ export interface DrawerSwipeAreaProps extends React.HTMLAttributes<HTMLDivElemen
   disabled?: boolean;
 }
 
+type DrawerSide = NonNullable<DrawerContentProps["side"]>;
+type DrawerSwipeDirection = NonNullable<DrawerProps["swipeDirection"]>;
+
+const SWIPE_DIRECTION_BY_SIDE: Record<DrawerSide, DrawerSwipeDirection> = {
+  left: "left",
+  right: "right",
+  top: "up",
+  bottom: "down",
+};
+
+const DrawerContentSideContext = React.createContext<(side: DrawerSide) => void>(() => {});
+
 function getAsChildElement(children: React.ReactNode, componentName: string): React.ReactElement {
   if (!React.isValidElement(children)) {
     throw new Error(`${componentName} with asChild requires a single valid React element child.`);
@@ -138,19 +150,24 @@ function DrawerRoot({
   snapPoints,
   disablePointerDismissal,
 }: DrawerProps) {
+  const [contentSide, setContentSide] = React.useState<DrawerSide>("right");
+  const resolvedSwipeDirection = swipeDirection ?? SWIPE_DIRECTION_BY_SIDE[contentSide];
+
   return (
-    <BaseDrawer.Root
-      open={open}
-      defaultOpen={defaultOpen}
-      onOpenChange={onOpenChange}
-      onOpenChangeComplete={onOpenChangeComplete}
-      modal={modal}
-      swipeDirection={swipeDirection}
-      snapPoints={snapPoints}
-      disablePointerDismissal={disablePointerDismissal}
-    >
-      {children}
-    </BaseDrawer.Root>
+    <DrawerContentSideContext.Provider value={setContentSide}>
+      <BaseDrawer.Root
+        open={open}
+        defaultOpen={defaultOpen}
+        onOpenChange={onOpenChange}
+        onOpenChangeComplete={onOpenChangeComplete}
+        modal={modal}
+        swipeDirection={resolvedSwipeDirection}
+        snapPoints={snapPoints}
+        disablePointerDismissal={disablePointerDismissal}
+      >
+        {children}
+      </BaseDrawer.Root>
+    </DrawerContentSideContext.Provider>
   );
 }
 
@@ -181,11 +198,20 @@ function DrawerContent({
   className,
   ...htmlProps
 }: DrawerContentProps) {
+  const registerContentSide = React.useContext(DrawerContentSideContext);
   const { className: viewportClassName, ...viewportHtmlProps } = viewportProps ?? {};
   const popupClasses = [styles.popup, styles[`side-${side}`], styles[`size-${size}`], className]
     .filter(Boolean)
     .join(" ");
 
+  React.useEffect(() => {
+    registerContentSide(side);
+
+    return () => {
+      registerContentSide("right");
+    };
+  }, [registerContentSide, side]);
+
   return (
     <BaseDrawer.Portal>
       {backdrop && <BaseDrawer.Backdrop className={styles.backdrop} />}

package/src/components/Field/index.tsx

@@ -1,8 +1,12 @@
-'use client';
+"use client";
 
-import * as React from 'react';
-import { Field as BaseField, type FieldValidityState } from '@base-ui/react/field';
-import styles from './Field.module.scss';
+import * as React from "react";
+import {
+  Field as BaseField,
+  type FieldControlProps as BaseFieldControlProps,
+  type FieldValidityState,
+} from "@base-ui/react/field";
+import styles from "./Field.module.scss";
 
 // ============================================
 // Types
@@ -14,7 +18,7 @@ export interface FieldProps extends React.HTMLAttributes<HTMLDivElement> {
   disabled?: boolean;
   invalid?: boolean;
   validate?: (value: unknown) => string | string[] | null | Promise<string | string[] | null>;
-  validationMode?: 'onSubmit' | 'onBlur' | 'onChange';
+  validationMode?: "onSubmit" | "onBlur" | "onChange";
   validationDebounceTime?: number;
 }
 
@@ -23,7 +27,10 @@ export interface FieldLabelProps {
   className?: string;
 }
 
-export interface FieldControlProps {
+export interface FieldControlProps extends Omit<
+  BaseFieldControlProps,
+  "children" | "className" | "ref" | "render"
+> {
   children: React.ReactElement;
   className?: string;
 }
@@ -35,7 +42,14 @@ export interface FieldDescriptionProps {
 
 export interface FieldErrorProps {
   children?: React.ReactNode;
-  match?: 'valueMissing' | 'typeMismatch' | 'tooShort' | 'tooLong' | 'patternMismatch' | 'customError' | boolean;
+  match?:
+    | "valueMissing"
+    | "typeMismatch"
+    | "tooShort"
+    | "tooLong"
+    | "patternMismatch"
+    | "customError"
+    | boolean;
   className?: string;
 }
 
@@ -60,7 +74,7 @@ function FieldRoot({
   className,
   ...htmlProps
 }: FieldProps) {
-  const classes = [styles.root, className].filter(Boolean).join(' ');
+  const classes = [styles.root, className].filter(Boolean).join(" ");
 
   return (
     <BaseField.Root
@@ -79,7 +93,7 @@ function FieldRoot({
 }
 
 function FieldLabel({ children, className }: FieldLabelProps) {
-  const classes = [styles.label, className].filter(Boolean).join(' ');
+  const classes = [styles.label, className].filter(Boolean).join(" ");
   return <BaseField.Label className={classes}>{children}</BaseField.Label>;
 }
 
@@ -90,31 +104,24 @@ function FieldLabel({ children, className }: FieldLabelProps) {
  *
  * Works with Input, Textarea, Checkbox, Switch, Select, or any element.
  */
-function FieldControl({ children, className }: FieldControlProps) {
-  const classes = [styles.control, className].filter(Boolean).join(' ');
-  return (
-    <BaseField.Control
-      className={classes}
-      render={children}
-    />
-  );
+function FieldControl({ children, className, ...controlProps }: FieldControlProps) {
+  const classes = [styles.control, className].filter(Boolean).join(" ");
+  return <BaseField.Control {...controlProps} className={classes} render={children} />;
 }
 
 function FieldDescription({ children, className }: FieldDescriptionProps) {
-  const classes = [styles.description, className].filter(Boolean).join(' ');
-  return (
-    <BaseField.Description className={classes}>
-      {children}
-    </BaseField.Description>
-  );
+  const classes = [styles.description, className].filter(Boolean).join(" ");
+  return <BaseField.Description className={classes}>{children}</BaseField.Description>;
 }
 
 function FieldError({ children, match, className }: FieldErrorProps) {
-  const classes = [styles.error, className].filter(Boolean).join(' ');
+  const classes = [styles.error, className].filter(Boolean).join(" ");
   return (
-    <BaseField.Error match={match} className={classes}>
-      {children}
-    </BaseField.Error>
+    <BaseField.Error
+      match={match}
+      className={classes}
+      {...(children === undefined ? {} : { children })}
+    />
   );
 }
 
@@ -134,11 +141,4 @@ export const Field = Object.assign(FieldRoot, {
   Validity: FieldValidity,
 });
 
-export {
-  FieldRoot,
-  FieldLabel,
-  FieldControl,
-  FieldDescription,
-  FieldError,
-  FieldValidity,
-};
+export { FieldRoot, FieldLabel, FieldControl, FieldDescription, FieldError, FieldValidity };

package/src/components/Header/Header.contract.json

@@ -18,6 +18,9 @@
     "children: node (required)",
     "height: string (default: 56px)",
     "position: static|fixed|sticky (default: static)",
+    "elevatedOnScroll: boolean|{ threshold?: number }",
+    "navAlign: start|center (default: start)",
+    "container: full|page (default: full)",
     "icons: object",
     "style: object"
   ],
@@ -44,6 +47,26 @@
         "sticky"
       ]
     },
+    "elevatedOnScroll": {
+      "type": "boolean|object",
+      "description": "Apply the elevated header border after scrolling. Object form accepts { threshold?: number }.",
+      "default": false,
+      "required": false
+    },
+    "navAlign": {
+      "type": "enum",
+      "description": "Navigation alignment inside the header",
+      "default": "start",
+      "required": false,
+      "values": ["start", "center"]
+    },
+    "container": {
+      "type": "enum",
+      "description": "Header content width",
+      "default": "full",
+      "required": false,
+      "values": ["full", "page"]
+    },
     "icons": {
       "type": "object",
       "description": "Optional icon overrides for Header.Trigger (menu/close) and Header.NavMenu chevron",
@@ -79,7 +102,12 @@
       "Use Header.NavMenu to group related nav items under a dropdown",
       "Use Header.NavMenuItem inside Header.NavMenu for dropdown items",
       "Header sub-components forward DOM props (id, aria-*, data-*, handlers) to their rendered elements",
+      "Header.Brand asChild composes custom link components while preserving canonical brand styling",
       "Header.NavItem asChild composes click handlers instead of overwriting the child handler",
+      "Use elevatedOnScroll on sticky marketing headers that need a boundary after scrolling",
+      "Use navAlign=\"center\" when navigation must stay centered independently of brand and actions",
+      "Use container=\"page\" when the header should share a bounded page gutter",
+      "Use Header.MobileNavActions for the primary action row inside Header.MobileNav",
       "Use the Header icons prop to replace internal mobile trigger and dropdown chevron icons with any icon package",
       "For rich dropdown content (titles, descriptions, icons), use NavigationMenu instead of Header.Nav",
       "NavigationMenu also provides an automatic mobile drawer, replacing Header.Trigger + Sidebar for mobile nav"
@@ -98,6 +126,11 @@
       "description": "Header with brand, nav, and actions. Use with AppShell layout=\"default\".",
       "code": "<ThemeProvider defaultMode=\"light\">\n  <Header>\n    <Header.SkipLink />\n    <Header.Trigger />\n    <Header.Brand href=\"/\">MyApp</Header.Brand>\n    <Header.Nav>\n      <Header.NavItem href=\"/dashboard\" active>Dashboard</Header.NavItem>\n      <Header.NavItem href=\"/projects\">Projects</Header.NavItem>\n      <Header.NavItem href=\"/settings\">Settings</Header.NavItem>\n    </Header.Nav>\n    <Header.Spacer />\n    <Header.Actions>\n      <ThemeToggle size=\"md\" />\n      <Button variant=\"secondary\" size=\"sm\">Sign In</Button>\n    </Header.Actions>\n  </Header>\n</ThemeProvider>"
     },
+    {
+      "name": "Marketing Header",
+      "description": "Sticky, page-width marketing header with centered navigation, scroll elevation, custom link composition, and mobile actions.",
+      "code": "<Header position=\"sticky\" elevatedOnScroll navAlign=\"center\" container=\"page\">\n  <Header.SkipLink href=\"#main-content\" />\n  <Header.Brand asChild>\n    <a href=\"/\" aria-label=\"Home\">Logo</a>\n  </Header.Brand>\n  <Header.Nav aria-label=\"Main navigation\">\n    <Header.NavItem href=\"/docs\">Docs</Header.NavItem>\n  </Header.Nav>\n  <Header.Actions>\n    <Button size=\"sm\">Start free</Button>\n  </Header.Actions>\n  <Header.Trigger />\n  <Header.MobileNav>\n    <Header.MobileNavLink href=\"/docs\">Docs</Header.MobileNavLink>\n    <Header.MobileNavActions>\n      <Button size=\"sm\">Start free</Button>\n    </Header.MobileNavActions>\n  </Header.MobileNav>\n</Header>"
+    },
     {
       "name": "With Dropdown Nav",
       "description": "Header with a dropdown menu grouping related navigation links.",
@@ -155,9 +188,14 @@
     "propsSummary": [
       "height: string - header height (default: 56px)",
       "position: static|fixed|sticky - positioning behavior",
+      "elevatedOnScroll: boolean|{ threshold?: number } - scroll-elevated boundary",
+      "navAlign: start|center - nav placement inside the header",
+      "container: full|page - content width and gutter",
       "icons: { menu?, close?, navMenuChevron? } - custom internal control icons (ReactNode or render function)",
+      "Header.Brand asChild composes custom link components",
       "Header.Trigger composes click handler with Sidebar toggle behavior",
-      "Header.NavMenu provides dropdown groups via Base UI Menu"
+      "Header.NavMenu provides dropdown groups via Base UI Menu",
+      "Header.MobileNavActions provides an action row inside the mobile drawer"
     ],
     "a11yRules": [
       "A11Y_HEADER_LANDMARK",
@@ -176,6 +214,7 @@
       "NavItem",
       "MobileNav",
       "MobileNavLink",
+      "MobileNavActions",
       "NavMenu",
       "NavMenuItem",
       "Search",
@@ -184,6 +223,7 @@
     ],
     "commonPatterns": [
       "<Header><Header.Brand href=\"/\">{appName}</Header.Brand><Header.Nav><Header.NavItem href=\"/home\" active>Home</Header.NavItem></Header.Nav><Header.Spacer /><Header.Actions>{actions}</Header.Actions></Header>",
+      "<Header position=\"sticky\" elevatedOnScroll navAlign=\"center\" container=\"page\"><Header.Brand asChild>{link}</Header.Brand><Header.Nav>{links}</Header.Nav><Header.Actions>{actions}</Header.Actions><Header.Trigger /><Header.MobileNav>{mobileLinks}<Header.MobileNavActions>{mobileActions}</Header.MobileNavActions></Header.MobileNav></Header>",
       "<Header><Header.Nav><Header.NavItem href=\"/home\">Home</Header.NavItem><Header.NavMenu label=\"Docs\" active><Header.NavMenuItem href=\"/cli\">CLI</Header.NavMenuItem><Header.NavMenuItem href=\"/mcp\">MCP</Header.NavMenuItem></Header.NavMenu></Header.Nav></Header>"
     ]
   },

package/src/components/Header/Header.module.scss

@@ -30,6 +30,24 @@
   top: 0;
 }
 
+.elevatedOnScroll {
+  border-bottom: var(--fui-space-px, $fui-space-px) solid transparent;
+  transition: border-color var(--fui-transition-fast, $fui-transition-fast);
+}
+
+.scrolled {
+  border-bottom-color: var(--fui-border, $fui-border);
+}
+
+.containerPage {
+  padding-inline: clamp(var(--fui-space-4, $fui-space-4), 4vw, var(--fui-space-12, $fui-space-12));
+
+  .container {
+    max-width: calc(var(--fui-space-12, $fui-space-12) * 31);
+    margin-inline: auto;
+  }
+}
+
 .container {
   display: flex;
   align-items: center;
@@ -43,6 +61,21 @@
   }
 }
 
+.navCentered {
+  .container {
+    position: relative;
+  }
+
+  .nav {
+    @include container-min($fui-breakpoint-md, fui-header) {
+      position: absolute;
+      inset-block: 0;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+}
+
 // ============================================
 // Brand
 // ============================================
@@ -381,6 +414,13 @@
   background-color: var(--fui-bg-secondary, $fui-bg-secondary);
 }
 
+.mobileNavActions {
+  display: flex;
+  align-items: center;
+  gap: var(--fui-space-2, $fui-space-2);
+  padding: var(--fui-space-3, $fui-space-3) 0 var(--fui-space-2, $fui-space-2);
+}
+
 @keyframes mobileNavFadeIn {
   from { opacity: 0; }
   to { opacity: 1; }