@nationaldesignstudio/react 0.0.8 → 0.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nationaldesignstudio/react",
-	"version": "0.0.8",
+	"version": "0.0.9",
 	"type": "module",
 	"publishConfig": {
 		"access": "restricted"

package/src/components/atoms/accordion/accordion.stories.tsx

@@ -19,7 +19,7 @@ const meta: Meta<typeof Accordion> = {
 	},
 	decorators: [
 		(Story) => (
-			<div className="bg-gray-1200 p-spacing-56 max-w-[746px]">
+			<div className="p-spacing-56 max-w-[746px]">
 				<Story />
 			</div>
 		),

package/src/components/atoms/button/button.stories.tsx

@@ -58,23 +58,14 @@ export const CharcoalOutlineQuiet = () => (
 );
 
 export const Ivory = () => <Button variant="ivory">Ivory</Button>;
-Ivory.parameters = {
-	backgrounds: { default: "dark" },
-};
 
 export const IvoryOutline = () => (
 	<Button variant="ivoryOutline">Ivory Outline</Button>
 );
-IvoryOutline.parameters = {
-	backgrounds: { default: "dark" },
-};
 
 export const IvoryOutlineQuiet = () => (
 	<Button variant="ivoryOutlineQuiet">Ivory Outline Quiet</Button>
 );
-IvoryOutlineQuiet.parameters = {
-	backgrounds: { default: "dark" },
-};
 
 // =============================================================================
 // Sizes

package/src/components/atoms/button/button.tsx

@@ -49,7 +49,7 @@ const buttonVariants = cva(
 				ivoryOutlineQuiet:
 					"border border-alpha-white-20 text-alpha-white-60 hover:border-alpha-white-30 hover:text-alpha-white-80 active:bg-alpha-white-5 focus-visible:ring-gray-50 focus-visible:ring-offset-gray-1000",
 				// Secondary - gray filled button (for dark backgrounds)
-				secondary:
+				gray:
 					"bg-gray-800 text-gray-100 hover:bg-gray-700 active:bg-gray-600 focus-visible:ring-gray-700 focus-visible:ring-offset-gray-1000",
 			},
 			size: {

package/src/components/atoms/button/icon-button.stories.tsx

@@ -120,27 +120,18 @@ export const Ivory = () => (
 		<SearchIcon />
 	</IconButton>
 );
-Ivory.parameters = {
-	backgrounds: { default: "dark" },
-};
 
 export const IvoryOutline = () => (
 	<IconButton variant="ivoryOutline">
 		<ArrowRightIcon />
 	</IconButton>
 );
-IvoryOutline.parameters = {
-	backgrounds: { default: "dark" },
-};
 
 export const IvoryOutlineQuiet = () => (
 	<IconButton variant="ivoryOutlineQuiet">
 		<ArrowRightIcon />
 	</IconButton>
 );
-IvoryOutlineQuiet.parameters = {
-	backgrounds: { default: "dark" },
-};
 
 // =============================================================================
 // Sizes

package/src/components/atoms/button/icon-button.tsx

@@ -6,6 +6,26 @@ import { cn } from "@/lib/utils";
 /**
  * IconButton component based on Figma BaseKit / Interface / Icon Button
  *
+ * **IMPORTANT: Accessibility Requirement**
+ * Icon-only buttons MUST have an accessible label. Provide one of:
+ * - `aria-label`: A text description of the button's action (recommended)
+ * - `aria-labelledby`: Reference to an element containing the label
+ * - `title`: Tooltip text (less preferred, but provides a label)
+ *
+ * @example
+ * ```tsx
+ * // Correct usage with aria-label
+ * <IconButton aria-label="Close menu">
+ *   <CloseIcon />
+ * </IconButton>
+ *
+ * // Correct usage with aria-labelledby
+ * <IconButton aria-labelledby="close-label">
+ *   <CloseIcon />
+ * </IconButton>
+ * <span id="close-label" className="sr-only">Close menu</span>
+ * ```
+ *
  * Variants:
  * - charcoal: Dark filled button (for light backgrounds)
  * - charcoalOutline: Dark outlined button (for light backgrounds)
@@ -75,6 +95,21 @@ export interface IconButtonProps
 
 const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
 	({ className, variant, size, asChild = false, ...props }, ref) => {
+		// Development warning for missing accessible label
+		React.useEffect(() => {
+			if (import.meta.env?.DEV) {
+				const hasAccessibleLabel =
+					props["aria-label"] ||
+					props["aria-labelledby"] ||
+					props.title;
+				if (!hasAccessibleLabel) {
+					console.warn(
+						"IconButton: Missing accessible label. Icon-only buttons must have an aria-label, aria-labelledby, or title attribute for screen reader users.",
+					);
+				}
+			}
+		}, [props["aria-label"], props["aria-labelledby"], props.title]);
+
 		const Comp = asChild ? Slot : "button";
 		return (
 			<Comp

package/src/components/atoms/pager-control/pager-control.stories.tsx

@@ -79,9 +79,6 @@ Playground.args = {
 export const Charcoal = () => <PagerControl count={4} variant="charcoal" />;
 
 export const Ivory = () => <PagerControl count={4} variant="ivory" />;
-Ivory.parameters = {
-	backgrounds: { default: "dark" },
-};
 
 // =============================================================================
 // Sizes

package/src/components/organisms/navbar/navbar.tsx

@@ -1,3 +1,4 @@
+import { Dialog } from "@base-ui-components/react/dialog";
 import { Slot } from "@radix-ui/react-slot";
 import * as React from "react";
 import { cn } from "@/lib/utils";
@@ -168,6 +169,7 @@ export interface NavbarMobileMenuProps
 /**
  * Mobile menu container that displays navigation links on mobile devices.
  * Hidden on desktop (md and above). Should be used with NavbarMobileMenuButton.
+ * Built on Base UI Dialog for accessibility (focus trap, escape key, click-outside).
  */
 const NavbarMobileMenu = React.forwardRef<
 	HTMLDivElement,
@@ -175,87 +177,37 @@ const NavbarMobileMenu = React.forwardRef<
 >(({ className, children, ...props }, ref) => {
 	const { isMobileMenuOpen, setIsMobileMenuOpen } =
 		React.useContext(NavbarContext);
-	const menuRef = React.useRef<HTMLDivElement>(null);
-
-	// Close menu when clicking outside
-	React.useEffect(() => {
-		if (!isMobileMenuOpen) return;
-
-		const handleClickOutside = (event: MouseEvent) => {
-			const target = event.target as Node;
-			if (menuRef.current && !menuRef.current.contains(target)) {
-				setIsMobileMenuOpen(false);
-			}
-		};
-
-		// Use setTimeout to avoid immediate close on button click
-		const timeoutId = setTimeout(() => {
-			document.addEventListener("mousedown", handleClickOutside);
-		}, 0);
-
-		return () => {
-			clearTimeout(timeoutId);
-			document.removeEventListener("mousedown", handleClickOutside);
-		};
-	}, [isMobileMenuOpen, setIsMobileMenuOpen]);
-
-	// Prevent body scroll when menu is open
-	React.useEffect(() => {
-		if (isMobileMenuOpen) {
-			document.body.style.overflow = "hidden";
-		} else {
-			document.body.style.overflow = "";
-		}
-		return () => {
-			document.body.style.overflow = "";
-		};
-	}, [isMobileMenuOpen]);
-
-	// Close menu on escape key
-	React.useEffect(() => {
-		if (!isMobileMenuOpen) return;
-
-		const handleEscape = (event: KeyboardEvent) => {
-			if (event.key === "Escape") {
-				setIsMobileMenuOpen(false);
-			}
-		};
-
-		document.addEventListener("keydown", handleEscape);
-		return () => document.removeEventListener("keydown", handleEscape);
-	}, [isMobileMenuOpen, setIsMobileMenuOpen]);
-
-	if (!isMobileMenuOpen) return null;
 
 	return (
-		<div
-			ref={menuRef}
-			className={cn(
-				"fixed inset-0 z-50 bg-gray-50 md:hidden",
-				// Position below navbar
-				"pt-[calc(var(--navbar-height,60px)+1px)]",
-				// Smooth transition
-				"transition-opacity duration-200",
-				className,
-			)}
-			role="dialog"
-			aria-modal="true"
-			aria-label="Mobile navigation menu"
-			{...props}
-		>
-			<div
-				ref={ref}
-				className={cn(
-					"flex flex-col",
-					// Padding matching navbar
-					"px-spacing-20 py-spacing-16",
-					// Gap between links
-					"gap-spacing-8",
-				)}
-			>
-				{children}
-			</div>
-		</div>
+		<Dialog.Root open={isMobileMenuOpen} onOpenChange={setIsMobileMenuOpen}>
+			<Dialog.Portal>
+				<Dialog.Popup
+					ref={ref}
+					className={cn(
+						"fixed inset-0 z-50 bg-gray-50 md:hidden",
+						// Position below navbar
+						"pt-[calc(var(--navbar-height,60px)+1px)]",
+						// Smooth transition
+						"transition-opacity duration-200",
+						className,
+					)}
+					{...props}
+				>
+					<Dialog.Title className="sr-only">Navigation menu</Dialog.Title>
+					<div
+						className={cn(
+							"flex flex-col",
+							// Padding matching navbar
+							"px-spacing-20 py-spacing-16",
+							// Gap between links
+							"gap-spacing-8",
+						)}
+					>
+						{children}
+					</div>
+				</Dialog.Popup>
+			</Dialog.Portal>
+		</Dialog.Root>
 	);
 });
 NavbarMobileMenu.displayName = "NavbarMobileMenu";

package/src/components/sections/banner/banner.tsx

@@ -86,8 +86,6 @@ export interface BannerProps
  */
 const Banner = React.forwardRef<HTMLElement, BannerProps>(
 	({ className, theme, heading, description, action, ...props }, ref) => {
-		const isDark = theme === "dark";
-
 		return (
 			<section
 				ref={ref}
@@ -98,7 +96,7 @@ const Banner = React.forwardRef<HTMLElement, BannerProps>(
 				<div
 					className={cn(
 						"flex flex-col md:flex-row gap-spacing-20 items-start md:items-center md:justify-between",
-						isDark && "border-t border-gray-700 py-spacing-36",
+						theme === "dark" && "border-t border-gray-700 py-spacing-36",
 					)}
 				>
 					{/* Copy section */}
@@ -106,7 +104,7 @@ const Banner = React.forwardRef<HTMLElement, BannerProps>(
 						<h2
 							className={cn(
 								"typography-subheading-small",
-								isDark ? "text-gray-100" : "text-gray-900",
+								theme === "dark" ? "text-gray-100" : "text-gray-900",
 							)}
 						>
 							{heading}
@@ -114,7 +112,7 @@ const Banner = React.forwardRef<HTMLElement, BannerProps>(
 						<p
 							className={cn(
 								"typography-body-small",
-								isDark ? "text-gray-500" : "text-gray-800",
+								theme === "dark" ? "text-gray-500" : "text-gray-800",
 							)}
 						>
 							{description}

package/src/components/sections/faq-section/faq-section.tsx

@@ -48,13 +48,14 @@ export interface FaqSectionProps
  */
 const FaqSection = React.forwardRef<HTMLElement, FaqSectionProps>(
 	(
-		{ className, theme = "dark", title = "Frequently Asked Questions", children, ...props },
+		{ className, theme = "dark", title = "Frequently Asked Questions", children, layout, ...props },
 		ref,
 	) => {
 		return (
 			<TwoColumnSection
 				ref={ref}
 				theme={theme}
+				layout={layout ?? undefined}
 				title={title}
 				className={cn(
 					// Override title typography to be larger

package/src/components/sections/hero/hero.tsx

@@ -154,6 +154,7 @@ const Hero = React.forwardRef<HTMLElement, HeroProps>(
 						loop
 						muted
 						playsInline
+						aria-hidden="true"
 						className="absolute inset-0 h-full w-full object-cover"
 					>
 						<source src={backgroundVideo} />

package/src/components/sections/tout/tout.tsx

@@ -192,6 +192,7 @@ const Tout = React.forwardRef<HTMLElement, ToutProps>(
 								className="hover:underline"
 							>
 								National Design Studio
+								<span className="sr-only"> (opens in new tab)</span>
 							</a>
 						</p>
 					</div>

package/src/components/sections/two-column-section/two-column-section.tsx

@@ -87,10 +87,7 @@ export interface TwoColumnSectionProps
  * ```
  */
 const TwoColumnSection = React.forwardRef<HTMLElement, TwoColumnSectionProps>(
-	({ className, theme, layout, title, lead, children, ...props }, ref) => {
-		const isDark = theme === "dark" || theme === undefined;
-		const isEqual = layout === "equal";
-
+	({ className, theme = "dark", layout, title, lead, children, ...props }, ref) => {
 		return (
 			<section
 				ref={ref}
@@ -101,10 +98,10 @@ const TwoColumnSection = React.forwardRef<HTMLElement, TwoColumnSectionProps>(
 				<div
 					className={cn(
 						"border-t pt-spacing-36",
-						isDark ? "border-gray-700" : "border-gray-300",
+						theme === "dark" ? "border-gray-700" : "border-gray-300",
 						// Grid layout
 						"grid grid-cols-1 gap-spacing-56",
-						isEqual
+						layout === "equal"
 							? "md:grid-cols-2"
 							: "lg:grid-cols-24 lg:gap-spacing-56",
 					)}
@@ -113,22 +110,22 @@ const TwoColumnSection = React.forwardRef<HTMLElement, TwoColumnSectionProps>(
 					<h2
 						className={cn(
 							"typography-subheading-medium",
-							isDark ? "text-gray-100" : "text-gray-900",
+							theme === "dark" ? "text-gray-100" : "text-gray-900",
 							// Column span based on layout
-							!isEqual && "lg:col-span-9",
+							layout !== "equal" && "lg:col-span-9",
 						)}
 					>
 						{title}
 					</h2>
 
 					{/* Content column */}
-					<div className={cn("flex flex-col gap-spacing-56", !isEqual && "lg:col-span-15")}>
+					<div className={cn("flex flex-col gap-spacing-56", layout !== "equal" && "lg:col-span-15")}>
 						{/* Lead content - brighter/prominent */}
 						{lead && (
 							<div
 								className={cn(
 									"typography-body-large",
-									isDark ? "text-gray-100" : "text-gray-900",
+									theme === "dark" ? "text-gray-100" : "text-gray-900",
 								)}
 							>
 								{typeof lead === "string" ? <p>{lead}</p> : lead}
@@ -139,7 +136,7 @@ const TwoColumnSection = React.forwardRef<HTMLElement, TwoColumnSectionProps>(
 						<div
 							className={cn(
 								"typography-body-medium flex flex-col gap-[1em]",
-								isDark ? "text-gray-400" : "text-gray-600",
+								theme === "dark" ? "text-gray-400" : "text-gray-600",
 							)}
 						>
 							{children}

package/src/stories/TokenShowcase.stories.tsx

@@ -39,7 +39,7 @@ export const Colors: Story = {
 
 export const Spacing: Story = {
 	render: () => (
-		<div className="p-8 bg-gray-50 min-h-screen">
+		<div className="p-8 min-h-screen">
 			<div className="max-w-4xl mx-auto">
 				<SpacingTokens />
 			</div>
@@ -49,7 +49,7 @@ export const Spacing: Story = {
 
 export const Typography: Story = {
 	render: () => (
-		<div className="p-8 bg-gray-50 min-h-screen">
+		<div className="p-8 min-h-screen">
 			<div className="max-w-6xl mx-auto">
 				<TypographyTokens />
 			</div>
@@ -59,7 +59,7 @@ export const Typography: Story = {
 
 export const SemanticSpacing: Story = {
 	render: () => (
-		<div className="p-8 bg-gray-50 min-h-screen">
+		<div className="p-8 min-h-screen">
 			<div className="max-w-4xl mx-auto">
 				<SemanticSpacingTokens />
 			</div>