@xenide-io/the-old-ui-theme 0.2.9 → 0.3.0

package/src/components/ui/Loader.tsx

@@ -0,0 +1,96 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import { cn } from "@/lib/cn";
+
+export type LoaderVariant = "spinner" | "dots" | "pulse";
+export type LoaderSize = "sm" | "md" | "lg";
+export type SkeletonShape = "title" | "text" | "short-text" | "avatar" | "button" | "block";
+
+export interface LoaderProps extends Omit<ComponentPropsWithoutRef<"span">, "children"> {
+  variant?: LoaderVariant;
+  size?: LoaderSize;
+  label?: string;
+}
+
+export interface SkeletonProps extends ComponentPropsWithoutRef<"span"> {
+  shape?: SkeletonShape;
+}
+
+export interface LoadingStateProps extends Omit<ComponentPropsWithoutRef<"div">, "title"> {
+  label?: string;
+  title?: ReactNode;
+  description?: ReactNode;
+  variant?: LoaderVariant;
+  size?: LoaderSize;
+}
+
+const loaderSizeClass: Record<LoaderSize, string> = {
+  sm: "ph-loader-sm",
+  md: "ph-loader-md",
+  lg: "ph-loader-lg",
+};
+
+const skeletonShapeClass: Record<SkeletonShape, string> = {
+  title: "ph-skeleton-title",
+  text: "ph-skeleton-text",
+  "short-text": "ph-skeleton-text-short",
+  avatar: "ph-skeleton-avatar",
+  button: "ph-skeleton-button",
+  block: "ph-skeleton-block",
+};
+
+export function Loader({
+  variant = "spinner",
+  size = "md",
+  label = "Loading",
+  className,
+  ...props
+}: LoaderProps) {
+  return (
+    <span
+      role="status"
+      aria-label={label}
+      className={cn("ph-loader", loaderSizeClass[size], className)}
+      {...props}
+    >
+      {variant === "spinner" ? <span className="ph-loading" aria-hidden /> : null}
+      {variant === "dots" ? (
+        <span className="ph-loading-dots" aria-hidden>
+          <span />
+          <span />
+          <span />
+        </span>
+      ) : null}
+      {variant === "pulse" ? <span className="ph-loading-pulse" aria-hidden /> : null}
+    </span>
+  );
+}
+
+export function Skeleton({ shape = "text", className, ...props }: SkeletonProps) {
+  return (
+    <span
+      className={cn("ph-skeleton", skeletonShapeClass[shape], className)}
+      aria-hidden="true"
+      {...props}
+    />
+  );
+}
+
+export function LoadingState({
+  label = "Loading",
+  title = "Loading",
+  description,
+  variant = "spinner",
+  size = "lg",
+  className,
+  ...props
+}: LoadingStateProps) {
+  return (
+    <div className={cn("ph-loading-state", className)} role="status" aria-label={label} {...props}>
+      <Loader variant={variant} size={size} label={label} aria-hidden="true" />
+      <div className="ph-loading-state__copy">
+        <strong>{title}</strong>
+        {description ? <span>{description}</span> : null}
+      </div>
+    </div>
+  );
+}

package/src/components/ui/Modal.tsx

@@ -1,4 +1,7 @@
-import type { ReactNode } from "react";
+"use client";
+
+import * as Dialog from "@radix-ui/react-dialog";
+import { useRef, type ReactNode } from "react";
 import { IconClose } from "@/components/icons";
 import { cn } from "@/lib/cn";
 
@@ -14,6 +17,9 @@ export interface ModalProps {
   size?: ModalSize;
   className?: string;
   showCloseButton?: boolean;
+  closeOnOutsideClick?: boolean;
+  closeOnEscape?: boolean;
+  "aria-label"?: string;
 }
 
 const sizeMap: Record<ModalSize, string> = {
@@ -21,7 +27,7 @@ const sizeMap: Record<ModalSize, string> = {
   md: "max-w-lg",
   lg: "max-w-2xl",
   xl: "max-w-4xl",
-  full: "max-w-[calc(100%-2rem)]",
+  full: "max-w-none",
 };
 
 export function Modal({
@@ -34,42 +40,66 @@ export function Modal({
   size = "md",
   className,
   showCloseButton = true,
+  closeOnOutsideClick = true,
+  closeOnEscape = true,
+  "aria-label": ariaLabel,
 }: ModalProps) {
-  if (!open) return null;
+  const canDismiss = Boolean(onClose);
+  const restoreFocusRef = useRef<HTMLElement | null>(null);
 
   return (
-    <div className="ph-modal-overlay" role="presentation" onClick={onClose}>
-      <div
-        role="dialog"
-        aria-modal
-        className={cn(
-          "ph-modal-panel",
-          sizeMap[size],
-          className
-        )}
-        onClick={(e) => e.stopPropagation()}
-      >
-        {(title || showCloseButton) && (
-          <header className="flex items-start justify-between gap-4">
-            <div>
-              {title && <h3 className="text-lg font-bold text-ph-ink">{title}</h3>}
-              {description && <p className="mt-1 text-sm text-ph-subtle">{description}</p>}
-            </div>
-            {showCloseButton && onClose && (
-              <button
-                type="button"
-                onClick={onClose}
-                className="shrink-0 rounded-md p-1 text-ph-subtle hover:bg-black/5 hover:text-ph-ink"
-                aria-label="Close"
-              >
-                <IconClose className="h-5 w-5" />
-              </button>
-            )}
-          </header>
-        )}
-        <div className="mt-4">{children}</div>
-        {footer && <div className="mt-6 flex justify-end gap-2 border-t border-ph-border pt-5">{footer}</div>}
-      </div>
-    </div>
+    <Dialog.Root
+      open={open}
+      onOpenChange={(nextOpen) => {
+        if (!nextOpen) onClose?.();
+      }}
+    >
+      <Dialog.Portal>
+        <Dialog.Overlay className="ph-modal-overlay" />
+        <Dialog.Content
+          className={cn("ph-modal-panel", sizeMap[size], className)}
+          aria-label={ariaLabel}
+          {...(description ? {} : { "aria-describedby": undefined })}
+          onOpenAutoFocus={() => {
+            restoreFocusRef.current = document.activeElement instanceof HTMLElement
+              ? document.activeElement
+              : null;
+          }}
+          onCloseAutoFocus={(event) => {
+            event.preventDefault();
+            restoreFocusRef.current?.focus();
+          }}
+          onEscapeKeyDown={(event) => {
+            if (!canDismiss || !closeOnEscape) event.preventDefault();
+          }}
+          onPointerDownOutside={(event) => {
+            if (!canDismiss || !closeOnOutsideClick) event.preventDefault();
+          }}
+        >
+          {title ? null : <Dialog.Title className="sr-only">{ariaLabel ?? "Dialog"}</Dialog.Title>}
+          {(title || description || (showCloseButton && canDismiss)) ? (
+            <header className="ph-modal-header">
+              <div className="min-w-0">
+                {title ? <Dialog.Title className="text-lg font-bold text-ph-ink">{title}</Dialog.Title> : null}
+                {description ? (
+                  <Dialog.Description className="mt-1 text-sm text-ph-subtle">
+                    {description}
+                  </Dialog.Description>
+                ) : null}
+              </div>
+              {showCloseButton && canDismiss ? (
+                <Dialog.Close asChild>
+                  <button type="button" className="ph-modal-close" aria-label="Close dialog">
+                    <IconClose className="h-5 w-5" aria-hidden />
+                  </button>
+                </Dialog.Close>
+              ) : null}
+            </header>
+          ) : null}
+          <div className="ph-modal-body">{children}</div>
+          {footer ? <div className="ph-modal-footer">{footer}</div> : null}
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
   );
 }

package/src/components/ui/SettingsLayout.tsx

@@ -0,0 +1,94 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import { IconTuning } from "@/components/icons";
+import { cn } from "@/lib/cn";
+
+export interface SettingsNavItem {
+  id: string;
+  label: ReactNode;
+  href: string;
+  icon?: ReactNode;
+  active?: boolean;
+  badge?: ReactNode;
+}
+
+export interface SettingsNavGroup {
+  label: ReactNode;
+  items: readonly SettingsNavItem[];
+}
+
+export interface SettingsNavProps extends ComponentPropsWithoutRef<"div"> {
+  groups: readonly SettingsNavGroup[];
+}
+
+export interface SettingsLayoutProps extends Omit<ComponentPropsWithoutRef<"section">, "title"> {
+  title: ReactNode;
+  description?: ReactNode;
+  actions?: ReactNode;
+  navigation: ReactNode;
+  navigationLabel?: string;
+  children: ReactNode;
+}
+
+export function SettingsNav({ groups, className, ...props }: SettingsNavProps) {
+  return (
+    <div className={cn("ph-settings-nav", className)} {...props}>
+      {groups.map((group, index) => (
+        <div className="ph-settings-nav__group" key={index}>
+          <h3>{group.label}</h3>
+          <div className="ph-settings-nav__items">
+            {group.items.map((item) => (
+              <a
+                key={item.id}
+                href={item.href}
+                className={cn("ph-settings-nav__item", item.active && "ph-settings-nav__item--active")}
+                aria-current={item.active ? "page" : undefined}
+              >
+                {item.icon ? <span className="ph-settings-nav__icon">{item.icon}</span> : null}
+                <span>{item.label}</span>
+                {item.badge ? <span className="ph-settings-nav__badge">{item.badge}</span> : null}
+              </a>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function SettingsLayout({
+  title,
+  description,
+  actions,
+  navigation,
+  navigationLabel = "Settings",
+  children,
+  className,
+  ...props
+}: SettingsLayoutProps) {
+  return (
+    <section className={cn("ph-settings-layout", className)} {...props}>
+      <header className="ph-settings-layout__header">
+        <div>
+          <h2>{title}</h2>
+          {description ? <p>{description}</p> : null}
+        </div>
+        {actions ? <div className="ph-settings-layout__actions">{actions}</div> : null}
+      </header>
+
+      <details className="ph-settings-layout__mobile-nav">
+        <summary>
+          <IconTuning className="h-4 w-4" aria-hidden />
+          Settings menu
+        </summary>
+        <nav aria-label={navigationLabel}>{navigation}</nav>
+      </details>
+
+      <div className="ph-settings-layout__grid">
+        <aside className="ph-settings-layout__sidebar">
+          <nav aria-label={navigationLabel}>{navigation}</nav>
+        </aside>
+        <div className="ph-settings-layout__content">{children}</div>
+      </div>
+    </section>
+  );
+}

package/src/components/ui/ShowcaseWrapper.tsx

@@ -3,6 +3,7 @@
 import { useState, type ReactNode } from "react";
 import { cn } from "@/lib/cn";
 import { CodeBlock } from "@/components/ui";
+import { IconCodePreview } from "@/components/icons";
 
 interface ShowcaseWrapperProps {
   id?: string;
@@ -39,26 +40,13 @@ export function ShowcaseWrapper({
             className={cn(
               "flex h-10 w-10 items-center justify-center rounded-full border transition-all",
               showCode
-                ? "border-ph-brand bg-ph-brand text-white shadow-lg shadow-ph-brand/25"
+                ? "border-ph-brand bg-ph-brand text-[var(--ph-on-accent)] shadow-lg shadow-ph-brand/25"
                 : "border-ph-border bg-ph-surface text-ph-subtle hover:border-ph-brand hover:text-ph-brand"
             )}
             title={showCode ? "Hide code" : "Show code"}
+            aria-label={showCode ? "Hide code" : "Show code"}
           >
-            <svg
-              className="h-5 w-5"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            >
-              <rect x="2" y="3" width="20" height="14" rx="2" ry="2" />
-              <line x1="8" y1="21" x2="16" y2="21" />
-              <line x1="12" y1="17" x2="12" y2="21" />
-              <line x1="6" y1="8" x2="6" y2="8" />
-              <line x1="10" y1="8" x2="10" y2="8" />
-            </svg>
+            <IconCodePreview className="h-5 w-5" aria-hidden />
           </button>
         </div>
         <hr />

package/src/components/ui/Stepper.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { cn } from "@/lib/cn";
+import { IconCheck } from "@/components/icons";
 
 interface Step {
   id: string;
@@ -30,16 +31,14 @@ export function Stepper({ steps, currentStep, className }: StepperProps) {
               <div
                 className={cn(
                   "flex h-9 w-9 items-center justify-center rounded-full text-sm font-bold transition-colors",
-                  isCompleted && "bg-ph-success text-white",
-                  isCurrent && !isError && "bg-ph-brand text-white ring-4 ring-ph-brand/20",
-                  isCurrent && isError && "bg-ph-danger text-white",
+                  isCompleted && "bg-ph-success text-[var(--ph-on-success)]",
+                  isCurrent && !isError && "bg-ph-brand text-[var(--ph-on-accent)] ring-4 ring-ph-brand/20",
+                  isCurrent && isError && "bg-ph-danger text-[var(--ph-on-danger)]",
                   isPending && "bg-ph-muted text-ph-mutedtext"
                 )}
               >
                 {isCompleted ? (
-                  <svg className="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3">
-                    <path d="M5 13l4 4L19 7" />
-                  </svg>
+                  <IconCheck className="h-5 w-5" aria-hidden />
                 ) : (
                   index + 1
                 )}

package/src/components/ui/first-slice.test.tsx

@@ -0,0 +1,98 @@
+import { createRef, useState } from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { Alert } from "@/components/ui/Alert";
+import { Badge } from "@/components/ui/Badge";
+import { Button } from "@/components/ui/Button";
+import { Card } from "@/components/ui/Card";
+import { Input } from "@/components/ui/Input";
+import { Modal } from "@/components/ui/Modal";
+
+describe("first-slice components", () => {
+  it("forwards a button ref and exposes loading state", () => {
+    const ref = createRef<HTMLButtonElement>();
+    render(<Button ref={ref} loading>Save changes</Button>);
+
+    expect(ref.current).toBe(screen.getByRole("button", { name: "Save changes" }));
+    expect(ref.current).toBeDisabled();
+    expect(ref.current).toHaveAttribute("aria-busy", "true");
+  });
+
+  it("uses the same tactile chrome for every filled variant", () => {
+    const { rerender } = render(<Button variant="signal">Launch</Button>);
+    expect(screen.getByRole("button", { name: "Launch" })).toHaveClass("ph-btn-raised");
+    expect(screen.getByRole("button", { name: "Launch" }).querySelector(".ph-btn-chrome")).toBeInTheDocument();
+
+    rerender(<Button variant="danger">Delete</Button>);
+    expect(screen.getByRole("button", { name: "Delete" }).querySelector(".ph-btn-chrome")).toBeInTheDocument();
+  });
+
+  it("associates input help and error messages", () => {
+    const { rerender } = render(
+      <Input label="Email" helperText="Use your work address" />,
+    );
+
+    expect(screen.getByLabelText("Email")).toHaveAccessibleDescription("Use your work address");
+
+    rerender(<Input label="Email" error="Enter a valid email address" />);
+    const input = screen.getByLabelText("Email");
+    expect(input).toHaveAttribute("aria-invalid", "true");
+    expect(input).toHaveAccessibleErrorMessage("Enter a valid email address");
+  });
+
+  it("keeps cards static unless explicitly interactive", () => {
+    const { rerender } = render(<Card title="Static card" />);
+    expect(screen.getByText("Static card").closest(".ph-card")).not.toHaveClass("ph-card-interactive");
+
+    rerender(<Card title="Interactive card" interactive />);
+    expect(screen.getByText("Interactive card").closest(".ph-card")).toHaveClass("ph-card-interactive");
+  });
+
+  it("forwards badge attributes and keeps static alerts out of live regions", () => {
+    render(
+      <>
+        <Badge data-testid="badge">Live</Badge>
+        <Alert title="Saved" />
+        <Alert title="Background sync complete" live="polite" />
+      </>,
+    );
+
+    expect(screen.getByTestId("badge")).toHaveTextContent("Live");
+    expect(screen.getByText("Saved").closest(".ph-alert")).not.toHaveAttribute("role");
+    expect(screen.getByRole("status")).toHaveTextContent("Background sync complete");
+  });
+
+  it("closes the modal with Escape and restores trigger focus", async () => {
+    const user = userEvent.setup();
+    const onClose = vi.fn();
+
+    function Fixture() {
+      const [open, setOpen] = useState(false);
+
+      return (
+        <>
+          <button type="button" onClick={() => setOpen(true)}>Open settings</button>
+          <Modal
+            open={open}
+            onClose={() => {
+              onClose();
+              setOpen(false);
+            }}
+            title="Workspace settings"
+          >
+            <button type="button">Save settings</button>
+          </Modal>
+        </>
+      );
+    }
+
+    render(<Fixture />);
+    const trigger = screen.getByRole("button", { name: "Open settings" });
+    await user.click(trigger);
+    expect(screen.getByRole("dialog", { name: "Workspace settings" })).toBeInTheDocument();
+    await user.keyboard("{Escape}");
+    expect(onClose).toHaveBeenCalledTimes(1);
+    expect(trigger).toHaveFocus();
+  });
+});

package/src/components/ui/index.ts

@@ -4,14 +4,47 @@ export { Alert as Alert, type AlertProps as AlertProps, type AlertStatus as Aler
 export { Badge as Badge, type BadgeProps as BadgeProps, type BadgeSize as BadgeSize, type BadgeVariant as BadgeVariant } from "@/components/ui/Badge";
 export { Card as Card, type CardProps as CardProps, type CardVariant as CardVariant } from "@/components/ui/Card";
 export { Drawer as Drawer, type DrawerProps as DrawerProps, type DrawerSide as DrawerSide, type DrawerSize as DrawerSize } from "@/components/ui/Drawer";
-export { Kbd as Kbd, type KbdProps as KbdProps, type KbdVariant as KbdVariant } from "@/components/ui/Kbd";
+export { Kbd as Kbd, type KbdPlatform as KbdPlatform, type KbdProps as KbdProps, type KbdVariant as KbdVariant } from "@/components/ui/Kbd";
+export {
+  Loader,
+  LoadingState,
+  Skeleton,
+  type LoaderProps,
+  type LoaderSize,
+  type LoaderVariant,
+  type LoadingStateProps,
+  type SkeletonProps,
+  type SkeletonShape,
+} from "@/components/ui/Loader";
+export {
+  AuthCard,
+  AuthDivider,
+  AuthLayout,
+  type AuthCardProps,
+  type AuthDividerProps,
+  type AuthLayoutProps,
+} from "@/components/ui/AuthLayout";
+export {
+  SettingsLayout,
+  SettingsNav,
+  type SettingsLayoutProps,
+  type SettingsNavGroup,
+  type SettingsNavItem,
+  type SettingsNavProps,
+} from "@/components/ui/SettingsLayout";
 export {
   DropdownButton as DropdownButton,
   DropdownItem as DropdownItem,
   DropdownMenu as DropdownMenu,
+  DropdownRadioGroup as DropdownRadioGroup,
+  DropdownRadioItem as DropdownRadioItem,
   type DropdownAlign as DropdownAlign,
   type DropdownButtonProps as DropdownButtonProps,
+  type DropdownItemProps as DropdownItemProps,
   type DropdownMenuProps as DropdownMenuProps,
+  type DropdownRadioGroupProps as DropdownRadioGroupProps,
+  type DropdownRadioItemProps as DropdownRadioItemProps,
+  type DropdownSide as DropdownSide,
 } from "@/components/ui/DropdownMenu";
 export {
   Checkbox as Checkbox,
@@ -33,6 +66,11 @@ export {
   type TextareaProps as TextareaProps,
   type ToggleProps as ToggleProps,
 } from "@/components/ui/Input";
+export {
+  FormField as FormField,
+  type FormFieldControlProps as FormFieldControlProps,
+  type FormFieldProps as FormFieldProps,
+} from "@/components/ui/FormField";
 export { Modal as Modal, type ModalProps as ModalProps, type ModalSize as ModalSize } from "@/components/ui/Modal";
 export { Breadcrumbs as Breadcrumbs, Pagination as Pagination, type BreadcrumbItem as BreadcrumbItem, type BreadcrumbsProps as BreadcrumbsProps, type PaginationProps as PaginationProps } from "@/components/ui/Navigation";
 export { Panel as Panel, type PanelProps as PanelProps } from "@/components/ui/Panel";
@@ -45,7 +83,14 @@ export { Tabs as Tabs, type TabItem as TabItem, type TabsProps as TabsProps, typ
 export { ThemeDomSync } from "@/components/ui/ThemeDomSync";
 export { ThemeManager, type ThemeManagerProps } from "@/components/ui/ThemeManager";
 export { ThemeSwitcher, type ThemeSwitcherProps } from "@/components/ui/ThemeSwitcher";
-export { IconBase as Icon, IconByName as IconByName, type IconProps as IconProps, type IconName as IconName } from "@/components/icons";
+export {
+  IconBase as Icon,
+  IconByName as IconByName,
+  type CanonicalIconName as CanonicalIconName,
+  type IconAliasName as IconAliasName,
+  type IconProps as IconProps,
+  type IconName as IconName,
+} from "@/components/icons";
 export { Accordion } from "@/components/ui/Accordion";
 export { Stepper } from "@/components/ui/Stepper";
 export { SegmentedControl } from "@/components/ui/SegmentedControl";
@@ -53,7 +98,21 @@ export { CommandPalette } from "@/components/ui/CommandPalette";
 export { Calendar } from "@/components/ui/Calendar";
 export { HoverCard } from "@/components/ui/HoverCard";
 export { EmptyState } from "@/components/ui/EmptyState";
-export { FilterChips } from "@/components/ui/FilterChips";
+export {
+  FilterChips,
+  type FilterChip,
+  type FilterChipsProps,
+} from "@/components/ui/FilterChips";
+export {
+  FilterBar,
+  FilterMenu,
+  SortMenu,
+  type FilterBarProps,
+  type FilterMenuOption,
+  type FilterMenuProps,
+  type SortMenuProps,
+} from "@/components/ui/FilterBar";
+export { FilterControls, type FilterControlsProps } from "@/components/ui/FilterControls";
 export { CodeBlock } from "@/components/ui/CodeBlock";
 export { ComponentDocs, type ComponentDocsProps, type ComponentPropRow } from "@/components/ui/ComponentDocs";
 export { ShowcaseWrapper } from "@/components/ui/ShowcaseWrapper";

package/src/components/ui/interaction-primitives.test.tsx

@@ -0,0 +1,77 @@
+import { useState } from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { DropdownButton, DropdownItem } from "@/components/ui/DropdownMenu";
+import { FilterMenu } from "@/components/ui/FilterBar";
+import { FilterChips } from "@/components/ui/FilterChips";
+
+describe("adaptive dropdown", () => {
+  it("supports keyboard navigation, selection, closing, and focus restoration", async () => {
+    const user = userEvent.setup();
+    const onSelect = vi.fn();
+
+    render(
+      <DropdownButton label="Actions">
+        <DropdownItem onClick={onSelect}>Export report</DropdownItem>
+        <DropdownItem>Duplicate</DropdownItem>
+      </DropdownButton>,
+    );
+
+    const trigger = screen.getByRole("button", { name: "Actions" });
+    await user.click(trigger);
+    expect(screen.getByRole("menu")).toBeInTheDocument();
+
+    await user.keyboard("{ArrowDown}{Enter}");
+    expect(onSelect).toHaveBeenCalledTimes(1);
+    expect(screen.queryByRole("menu")).not.toBeInTheDocument();
+    expect(trigger).toHaveFocus();
+  });
+
+  it("exposes filter choices as a controlled radio menu", async () => {
+    const user = userEvent.setup();
+
+    function Fixture() {
+      const [value, setValue] = useState("active");
+      return (
+        <FilterMenu
+          label="Status"
+          value={value}
+          onValueChange={setValue}
+          options={[
+            { value: "active", label: "Active" },
+            { value: "draft", label: "Draft" },
+          ]}
+        />
+      );
+    }
+
+    render(<Fixture />);
+    await user.click(screen.getByRole("button", { name: "Status: Active" }));
+    expect(screen.getByRole("menuitemradio", { name: "Active" })).toHaveAttribute("data-state", "checked");
+    await user.click(screen.getByRole("menuitemradio", { name: "Draft" }));
+    expect(screen.getByRole("button", { name: "Status: Draft" })).toBeInTheDocument();
+  });
+});
+
+describe("filter chips", () => {
+  it("keeps toggle and removal as independent keyboard controls", async () => {
+    const user = userEvent.setup();
+    const onToggle = vi.fn();
+    const onRemove = vi.fn();
+
+    render(
+      <FilterChips
+        chips={[{ id: "status", label: "Status", value: "Active", active: true }]}
+        onToggle={onToggle}
+        onRemove={onRemove}
+      />,
+    );
+
+    const toggle = screen.getByRole("button", { name: "Status Active" });
+    expect(toggle).toHaveAttribute("aria-pressed", "true");
+    await user.click(screen.getByRole("button", { name: "Remove Status: Active filter" }));
+    expect(onRemove).toHaveBeenCalledWith("status");
+    expect(onToggle).not.toHaveBeenCalled();
+  });
+});