@ponti-studios/ui 0.7.1 → 0.8.0

package/README.md

@@ -11,6 +11,19 @@ The design system is documented in `docs/`:
 - [Patterns](./docs/patterns.md) — screen composition rules
 - [Review gates](./docs/review-gates.md) — pass/fail review criteria
 
+## Development
+
+Common development workflows are available through the `Makefile`:
+
+```bash
+make check          # tokens, source contracts, and typecheck
+make tokens-build   # regenerate token artifacts
+make storybook      # build Storybook themes and start Storybook
+make test-a11y      # run light and dark accessibility tests
+```
+
+The existing `pnpm run` scripts delegate to these targets for compatibility.
+
 ## Release
 
 Releases are owned by [release-please](https://github.com/googleapis/release-please), not by hand-edited version numbers or manually pushed tags. The `.github/workflows/publish.yml` workflow runs after a successful `validate` push to `main`:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ponti-studios/ui",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "private": false,
   "description": "Shared UI component library for Ponti Studios",
   "license": "MIT",
@@ -82,18 +82,20 @@
     "registry": "https://registry.npmjs.org"
   },
   "scripts": {
-    "build": "tsc --noEmit",
+    "build": "make build",
     "dev": "vite",
-    "storybook": "style-dictionary build --config src/styles/tokens/style-dictionary.dark-storybook.json && storybook dev -p 6006",
-    "check:source": "node src/styles/tokens/scripts/check-source.mjs",
-    "test": "vitest --run --config vitest.config.ts",
-    "test:a11y": "vitest --run --config vitest.config.ts",
-    "tokens:build": "style-dictionary build --config src/styles/tokens/style-dictionary.foundations.json && style-dictionary build --config src/styles/tokens/style-dictionary.light.json && style-dictionary build --config src/styles/tokens/style-dictionary.dark.json && style-dictionary build --config src/styles/tokens/style-dictionary.dark-storybook.json",
-    "tokens:check": "pnpm run tokens:build && node src/styles/tokens/scripts/check-foundations.mjs && git diff --exit-code -- src/styles/tokens/generated",
-    "typecheck": "tsc --noEmit",
-    "lint": "oxlint src --fix",
-    "format": "oxfmt src --write",
-    "prepack": "pnpm run tokens:check && pnpm run check:source && pnpm run typecheck"
+    "storybook": "make storybook",
+    "check:source": "make check-source",
+    "test": "make test",
+    "test:a11y": "make test-a11y",
+    "test:a11y:light": "make test-a11y-light",
+    "test:a11y:dark": "make test-a11y-dark",
+    "tokens:build": "make tokens-build",
+    "tokens:check": "make tokens-check",
+    "typecheck": "make typecheck",
+    "lint": "make lint",
+    "format": "make format",
+    "prepack": "make prepack"
   },
   "dependencies": {
     "@base-ui/react": "^1.6.0",
@@ -107,13 +109,13 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^5.2.1",
-    "@storybook/addon-a11y": "10.5.3",
-    "@storybook/addon-docs": "^10.5.3",
-    "@storybook/addon-links": "^10.5.3",
-    "@storybook/addon-onboarding": "^10.5.3",
-    "@storybook/addon-themes": "10.5.3",
-    "@storybook/addon-vitest": "10.5.3",
-    "@storybook/react-vite": "^10.5.3",
+    "@storybook/addon-a11y": "10.5.6",
+    "@storybook/addon-docs": "10.5.6",
+    "@storybook/addon-links": "10.5.6",
+    "@storybook/addon-onboarding": "10.5.6",
+    "@storybook/addon-themes": "10.5.6",
+    "@storybook/addon-vitest": "10.5.6",
+    "@storybook/react-vite": "10.5.6",
     "@tailwindcss/vite": "^4.3.3",
     "@types/node": "^26.1.1",
     "@types/react": "^19.2.17",
@@ -127,7 +129,7 @@
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "react-native": "0.86.0",
-    "storybook": "^10.5.3",
+    "storybook": "10.5.6",
     "style-dictionary": "5.5.0",
     "tailwindcss": "^4.3.3",
     "typescript": "6.0.3",

package/src/components/data-display/accordion.tsx

@@ -46,7 +46,7 @@ function AccordionTrigger({
       <AccordionPrimitive.Trigger
         data-slot="accordion-trigger"
         className={cn(
-          "flex w-full flex-1 items-center justify-between gap-4 px-4 py-3 text-left text-sm font-semibold disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          "text-muted-foreground flex w-full flex-1 items-center justify-between gap-4 px-4 py-3 text-left text-sm font-semibold disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
           className,
         )}
         {...props}

package/src/components/data-display/sort-controls.tsx

@@ -48,10 +48,10 @@ export function SortControls({
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent className="w-80 space-y-2 p-2">
-        <DropdownMenuLabel>Define Sort Order</DropdownMenuLabel>
-        <DropdownMenuSeparator />
-
         <DropdownMenuGroup className="space-y-1">
+          <DropdownMenuLabel>Define Sort Order</DropdownMenuLabel>
+          <DropdownMenuSeparator />
+
           {sortOptions.map((sort, index) => {
             const usedFields = sortOptions
               .filter((_, i) => i !== index)

package/src/components/feedback/index.ts

@@ -3,8 +3,6 @@ export { EmptyState } from "./empty-state";
 export type { EmptyStateProps } from "./empty-state";
 export { FileUploadStatus } from "./file-upload-status";
 export type { FileUploadState, FileUploadStats } from "./file-upload-status";
-export { FileUploadStatusBadge } from "./file-upload-status-badge";
-export type { FileUploadStatusValue } from "./file-upload-status-badge";
 export { Progress } from "./progress";
 export { ProgressBar } from "./progress-bar";
 export type { ProgressBarProps } from "./progress-bar";

package/src/components/forms/date-month-select.tsx

@@ -1,6 +1,7 @@
 import { Calendar } from "lucide-react";
 import { useMemo } from "react";
 
+import { cn } from "../../lib/utils";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select";
 
 interface MonthOption {
@@ -40,13 +41,21 @@ export function DateMonthSelect({
   }, [monthsBack]);
 
   return (
-    <div className="flex items-center gap-2">
-      <Calendar className="size-4" />
+    <div className="flex items-center">
+      <div className="flex items-center justify-center size-10 border rounded-l-xl bg-surface-2 text-text-1">
+        <Calendar className="size-4" />
+      </div>
       <Select
         value={selectedMonthYear}
         onValueChange={(v: string | null) => v != null && onMonthChange(v)}
       >
-        <SelectTrigger className={className} aria-label={placeholder}>
+        <SelectTrigger
+          className={cn(
+            "rounded-r-xl rounded-l-none min-h-10 max-h-10 bg-surface-2 text-text-1 border-l-0",
+            className,
+          )}
+          aria-label={placeholder}
+        >
           <SelectValue placeholder={placeholder} />
         </SelectTrigger>
         <SelectContent>

package/src/components/forms/date-picker.tsx

@@ -1,9 +1,9 @@
 import { format } from "date-fns";
 import { CalendarIcon } from "lucide-react";
 
-import { Button } from "../primitives/button";
 import { Calendar } from "../forms/calendar";
 import { Popover, PopoverContent, PopoverTrigger } from "../overlays/popover";
+import { Button } from "../primitives/button";
 
 export interface DatePickerProps {
   value: Date | undefined;
@@ -40,17 +40,21 @@ export function DatePicker({
         </label>
       ) : null}
       <Popover>
-        <PopoverTrigger asChild>
-          <Button
-            id={id}
-            variant={variant}
-            disabled={disabled}
-            className="bg-muted placeholder:text-muted-foreground w-full justify-start text-left font-normal"
-          >
-            <CalendarIcon className="mr-2 size-4" />
-            {value ? format(value, dateFormat) : <span>{placeholder}</span>}
-          </Button>
-        </PopoverTrigger>
+        <div className="flex w-full items-center">
+          <div className="border-border bg-surface-2 text-text-1 flex size-10 shrink-0 items-center justify-center rounded-l-xl border">
+            <CalendarIcon className="size-4" aria-hidden />
+          </div>
+          <PopoverTrigger asChild>
+            <Button
+              id={id}
+              variant={variant}
+              disabled={disabled}
+              className="border-border bg-surface-2 text-text-1 placeholder:text-muted-foreground min-h-10 max-h-10 w-full justify-start rounded-l-none rounded-r-xl border-l-0 text-left font-normal"
+            >
+              {value ? format(value, dateFormat) : <span>{placeholder}</span>}
+            </Button>
+          </PopoverTrigger>
+        </div>
         <PopoverContent className="bg-popover w-auto p-0" align={popoverAlign}>
           <Calendar mode="single" selected={value} onSelect={onSelect} />
         </PopoverContent>

package/src/components/forms/drop-zone.tsx

@@ -126,7 +126,7 @@ export function DropZone({
       >
         <div className="space-y-2 text-center">
           <p className="text-muted-foreground">
-            {label} <span className="text-foreground font-medium">click to browse</span>
+            {label} <span className="text-accent font-medium">click to browse</span>
           </p>
           {helpText ? <p className="text-muted-foreground text-sm">{helpText}</p> : null}
         </div>

package/src/components/forms/index.ts

@@ -1,17 +1,13 @@
+export { FilterSelect } from "../filters/filter-select";
+export type { FilterSelectOption, FilterSelectProps } from "../filters/filter-select";
 export { Calendar } from "./calendar";
 export type { CalendarProps } from "./calendar";
-export { DatePicker } from "./date-picker";
-export type { DatePickerProps } from "./date-picker";
 export { DateMonthSelect, getCurrentMonthYear } from "./date-month-select";
 export type { DateMonthSelectProps } from "./date-month-select";
+export { DatePicker } from "./date-picker";
+export type { DatePickerProps } from "./date-picker";
 export { DropZone } from "./drop-zone";
 export type { DropZoneProps } from "./drop-zone";
-export { Field } from "./field";
-export type { FieldProps } from "./field";
-export { FilterSelect } from "../filters/filter-select";
-export type { FilterSelectOption, FilterSelectProps } from "../filters/filter-select";
-export { GroupBySelect } from "./group-by-select";
-export type { GroupBySelectProps } from "./group-by-select";
 export { Input } from "./input";
 export { PasskeyManagement } from "./passkey-management";
 export type { PasskeyManagementProps, PasskeyRecord } from "./passkey-management";

package/src/components/forms/passkey-management.tsx

@@ -68,17 +68,11 @@ export function PasskeyManagement({
   return (
     <section aria-labelledby="passkey-heading" className="space-y-4">
       <div className="flex items-center justify-between">
-        <div>
-          <h2 id="passkey-heading" className="text-foreground text-sm font-medium">
-            Passkeys
-          </h2>
-          <p className="text-muted-foreground text-sm">
-            Sign in without a password using biometrics or a security key.
-          </p>
-        </div>
+        <h2 id="passkey-heading" className="text-foreground text-sm font-medium">
+          Passkeys
+        </h2>
         <Button
           type="button"
-          variant="outline"
           size="sm"
           onClick={() => void handleAdd()}
           disabled={adding}
@@ -107,7 +101,7 @@ export function PasskeyManagement({
           {passkeys.map((pk) => (
             <li
               key={pk.id}
-              className="border-border flex items-center justify-between border px-4 py-3 text-sm"
+              className="border-border rounded flex items-center justify-between border px-4 py-3 text-sm"
             >
               <div className="flex items-center gap-3">
                 <KeyRound className="text-muted-foreground size-4 shrink-0" aria-hidden />

package/src/components/forms/radio-group.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
 import { Radio as RadioPrimitive } from "@base-ui/react/radio";
+import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
 import { Circle } from "lucide-react";
 import * as React from "react";
 
@@ -23,13 +23,17 @@ const RadioGroupItem = React.forwardRef<
     <RadioPrimitive.Root
       ref={ref}
       className={cn(
-        "border-primary bg-background text-foreground focus-visible:border-ring focus-visible:bg-muted/25 focus-visible:ring-ring aspect-square h-6 w-6 rounded-full border focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+        "border-primary bg-background focus-visible:border-ring focus-visible:bg-muted/25 focus-visible:ring-ring aspect-square size-6 rounded-full border focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+        "flex items-center justify-center",
         className,
       )}
       {...props}
     >
-      <RadioPrimitive.Indicator className="flex items-center justify-center">
-        <Circle className="fill-primary h-4 w-4" />
+      <RadioPrimitive.Indicator
+        keepMounted
+        className="data-unchecked:opacity-0 data-checked:opacity-100 data-starting-style:animate-fade-in data-ending-style:animate-fade-out"
+      >
+        <Circle className="fill-primary size-5" />
       </RadioPrimitive.Indicator>
     </RadioPrimitive.Root>
   );

package/src/components/forms/select.tsx

@@ -71,7 +71,7 @@ function SelectContent({
         <SelectPrimitive.Popup
           data-slot="select-content"
           className={cn(
-            "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 relative z-50 max-h-(--available-height) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 outline-none",
+            "bg-background text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:zoom-out-95 data-open:zoom-in-95 relative z-50 max-h-(--available-height) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 outline-none",
             className,
           )}
           {...props}

package/src/components/forms/text-field.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { Field } from "./field";
+import { cn } from "../../lib/utils";
 import { Input } from "./input";
 import type { TextFieldBaseProps, TextFieldType } from "./text-field.types";
 
@@ -26,14 +26,49 @@ function TextField({
   type = "text",
   ...inputProps
 }: TextFieldProps) {
+  const generatedId = React.useId();
+  const inputId = id ?? generatedId;
+  const descriptionId = `${inputId}-description`;
+  const errorId = `${inputId}-error`;
+
   if (!label && !helpText && !error) {
-    return <Input className={className} disabled={disabled} type={type} {...inputProps} />;
+    return (
+      <Input id={inputId} className={className} disabled={disabled} type={type} {...inputProps} />
+    );
   }
 
   return (
-    <Field id={id} label={label} helpText={helpText} error={error}>
-      <Input className={className} disabled={disabled} type={type} {...inputProps} />
-    </Field>
+    <div className="flex flex-col gap-1.5">
+      {label && (
+        <label
+          htmlFor={inputId}
+          className={cn(
+            "text-foreground text-sm font-medium",
+            inputProps.required && "after:text-destructive-text after:ml-0.5 after:content-['*']",
+          )}
+        >
+          {label}
+        </label>
+      )}
+      <Input
+        id={inputId}
+        className={className}
+        disabled={disabled}
+        type={type}
+        aria-describedby={error ? errorId : helpText ? descriptionId : undefined}
+        aria-invalid={error ? true : undefined}
+        {...inputProps}
+      />
+      {error ? (
+        <p id={errorId} role="alert" className="text-destructive-text text-sm">
+          {error}
+        </p>
+      ) : helpText ? (
+        <p id={descriptionId} className="text-muted-foreground text-sm">
+          {helpText}
+        </p>
+      ) : null}
+    </div>
   );
 }
 

package/src/components/navigation/app-navigation.stories.tsx

@@ -11,7 +11,6 @@ const meta: Meta<typeof AppNavigation> = {
     layout: "fullscreen",
   },
 };
-
 export default meta;
 type Story = StoryObj<typeof meta>;
 

package/src/components/navigation/app-navigation.tsx

@@ -1,8 +1,10 @@
 import { Menu } from "lucide-react";
+import type { ComponentPropsWithoutRef } from "react";
 import * as React from "react";
 
-import { Button } from "../primitives/button";
+import { cn } from "../../lib/utils";
 import { Sheet, SheetClose, SheetContent, SheetTitle, SheetTrigger } from "../overlays/sheet";
+import { Button } from "../primitives/button";
 
 export interface AppNavigationLink {
   href: string;
@@ -24,15 +26,47 @@ export interface AppNavigationProps {
   ariaLabel?: string;
   /** Current pathname used to highlight the active link. */
   activeHref?: string;
-  /** A router link component. Native anchors are used when omitted. */
-  linkComponent?: React.ElementType;
-  /** The prop used by the link component for its destination. */
-  linkProp?: "href" | "to";
-  /** Props shared by every link, such as a router's prefetch hint. */
-  linkProps?: Record<string, unknown>;
 }
 
-export function AppNavigation({
+interface NavigationLinkOwnProps {
+  active?: boolean;
+  brand?: boolean;
+}
+
+export type NavigationLinkProps = NavigationLinkOwnProps &
+  Omit<ComponentPropsWithoutRef<"a">, keyof NavigationLinkOwnProps>;
+
+function NavigationLink({
+  children,
+  active = false,
+  brand = false,
+  className,
+  ...props
+}: NavigationLinkProps) {
+  return (
+    <a
+      {...props}
+      className={cn(
+        "inline-flex h-9 max-h-9 shrink-0 items-center px-3 py-2 text-sm font-medium",
+        !brand && "hover:bg-muted hover:text-muted-foreground",
+        className,
+      )}
+      aria-current={active ? "page" : undefined}
+    >
+      {children}
+    </a>
+  );
+}
+
+function NavigationCta({ href, label }: AppNavigationCta) {
+  return (
+    <Button asChild size="md">
+      <a href={href}>{label}</a>
+    </Button>
+  );
+}
+
+function NavigationRoot({
   brand,
   brandHref = "/",
   endContent,
@@ -40,9 +74,6 @@ export function AppNavigation({
   cta,
   ariaLabel = "Primary navigation",
   activeHref,
-  linkComponent: LinkComponent = "a",
-  linkProp = "href",
-  linkProps,
 }: AppNavigationProps) {
   const [mobileOpen, setMobileOpen] = React.useState(false);
 
@@ -53,55 +84,25 @@ export function AppNavigation({
     return href !== "/" && activeHref.startsWith(`${href}/`);
   };
 
-  const createLink = ({
-    href,
-    children,
-    active = false,
-    variant,
-    brand = false,
-  }: {
-    href: string;
-    children: React.ReactNode;
-    active?: boolean;
-    variant?: AppNavigationCta["variant"];
-    brand?: boolean;
-  }) =>
-    React.createElement(
-      LinkComponent,
-      {
-        ...linkProps,
-        ...(linkProp === "to" ? { to: href } : { href }),
-        className: brand
-          ? "inline-flex min-h-9 shrink-0 items-center rounded-md px-3 py-2 text-sm font-medium"
-          : variant
-            ? "inline-flex min-h-9 shrink-0 items-center justify-center rounded-md px-3 py-2 text-sm font-medium"
-            : "inline-flex min-h-9 shrink-0 items-center rounded-md px-3 py-2 text-sm font-medium hover:bg-muted hover:text-muted-foreground",
-        "aria-current": active ? "page" : undefined,
-        "data-variant": variant,
-      },
-      children,
-    );
-
   return (
-    <header className="bg-background/95 supports-[backdrop-filter]:bg-background/60 sticky top-0 z-50 flex w-full justify-center border-b px-4 backdrop-blur">
+    <header className="bg-background/95 supports-backdrop-filter:bg-background/60 sticky top-0 z-50 flex w-full justify-center border-b px-4 backdrop-blur">
       <nav className="w-full max-w-7xl" aria-label={ariaLabel}>
         <div className="flex min-h-14 items-center justify-between gap-6">
           <div className="flex min-w-0 items-center">
-            {brand && createLink({ href: brandHref, children: brand, brand: true })}
+            {brand && (
+              <NavigationLink href={brandHref} brand>
+                {brand}
+              </NavigationLink>
+            )}
           </div>
 
           <div className="ml-auto hidden min-w-0 items-center gap-1 sm:flex">
             {links?.map((link) => (
-              <React.Fragment key={link.href}>
-                {createLink({ href: link.href, children: link.label, active: isActive(link.href) })}
-              </React.Fragment>
+              <NavigationLink key={link.href} href={link.href} active={isActive(link.href)}>
+                {link.label}
+              </NavigationLink>
             ))}
-            {cta &&
-              createLink({
-                href: cta.href,
-                children: cta.label,
-                variant: cta.variant ?? "default",
-              })}
+            {cta && <NavigationCta {...cta} />}
             {endContent}
           </div>
 
@@ -122,11 +123,9 @@ export function AppNavigation({
                 <div className="mt-8 flex flex-1 flex-col gap-1">
                   {links?.map((link) => (
                     <SheetClose asChild key={link.href}>
-                      {createLink({
-                        href: link.href,
-                        children: link.label,
-                        active: isActive(link.href),
-                      })}
+                      <NavigationLink href={link.href} active={isActive(link.href)}>
+                        {link.label}
+                      </NavigationLink>
                     </SheetClose>
                   ))}
                 </div>
@@ -135,11 +134,7 @@ export function AppNavigation({
                   <div className="flex flex-col gap-4 border-t pt-4">
                     {cta && (
                       <SheetClose asChild>
-                        {createLink({
-                          href: cta.href,
-                          children: cta.label,
-                          variant: cta.variant ?? "default",
-                        })}
+                        <NavigationCta {...cta} />
                       </SheetClose>
                     )}
                     {endContent && <div className="flex items-center gap-3">{endContent}</div>}
@@ -153,3 +148,14 @@ export function AppNavigation({
     </header>
   );
 }
+
+type NavigationComponent = typeof NavigationRoot & {
+  Link: typeof NavigationLink;
+};
+
+export const Navigation: NavigationComponent = Object.assign(NavigationRoot, {
+  Link: NavigationLink,
+});
+
+/** @deprecated Use `Navigation` instead. */
+export const AppNavigation = Navigation;

package/src/components/navigation/index.ts

@@ -1,7 +1,10 @@
-export { AppNavigation } from "./app-navigation";
-export type { AppNavigationCta, AppNavigationLink, AppNavigationProps } from "./app-navigation";
+export { AppNavigation, Navigation } from "./app-navigation";
+export type {
+  AppNavigationCta,
+  AppNavigationLink,
+  AppNavigationProps,
+  NavigationLinkProps,
+} from "./app-navigation";
 export { PaginationControls } from "./pagination-controls";
 export type { PaginationControlsProps } from "./pagination-controls";
-export { RouteLink } from "./route-link";
-export type { RouteLinkProps } from "./route-link";
 export { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs";

package/src/components/navigation/pagination-controls.stories.tsx

@@ -35,7 +35,7 @@ export const Default: Story = {
 };
 
 export const SinglePage: Story = {
-  name: "Single page (renders nothing)",
+  name: "Single page (disabled controls)",
   args: { ...baseArgs, totalPages: 1 },
   render: () => <PaginationPreview totalPages={1} />,
 };

package/src/components/navigation/pagination-controls.tsx

@@ -8,41 +8,37 @@ export interface PaginationControlsProps {
   onPageChange: (page: number) => void;
 }
 
-/** Zero-indexed prev/next pagination control. Renders nothing for a single page. */
+/** Zero-indexed prev/next pagination control. */
 export function PaginationControls({
   currentPage,
   totalPages,
   onPageChange,
 }: PaginationControlsProps) {
-  if (totalPages <= 1) {
-    return null;
-  }
-
   return (
-    <div className="text-muted-foreground flex items-center justify-end gap-2 text-sm">
+    <div className="border-border bg-background text-foreground inline-flex items-center overflow-hidden rounded-full border text-sm">
       <Button
         type="button"
         variant="outline"
-        size="sm"
-        className="border-dashed"
+        size="icon"
+        className="rounded-none border-0 border-r bg-transparent shadow-none"
         onClick={() => onPageChange(currentPage - 1)}
         disabled={currentPage === 0}
+        aria-label="Previous page"
       >
         <ChevronLeft className="size-4" aria-hidden />
-        Previous
       </Button>
-      <span className="text-foreground text-xs">
-        Page {currentPage + 1} of {totalPages}
+      <span className="min-w-20 px-3 text-center text-xs tabular-nums">
+        {currentPage + 1} of {totalPages}
       </span>
       <Button
         type="button"
         variant="outline"
-        size="sm"
-        className="border-dashed"
+        size="icon"
+        className="rounded-none border-0 border-l bg-transparent shadow-none"
         onClick={() => onPageChange(currentPage + 1)}
         disabled={currentPage >= totalPages - 1}
+        aria-label="Next page"
       >
-        Next
         <ChevronRight className="size-4" aria-hidden />
       </Button>
     </div>

package/src/components/overlays/dropdown-menu.stories.tsx

@@ -44,9 +44,9 @@ export const Default: Story = {
         <Button variant="outline">Open Menu</Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent className="w-56">
-        <DropdownMenuLabel>My Account</DropdownMenuLabel>
-        <DropdownMenuSeparator />
         <DropdownMenuGroup>
+          <DropdownMenuLabel>My Account</DropdownMenuLabel>
+          <DropdownMenuSeparator />
           <DropdownMenuItem>
             <User className="mr-2 size-4" />
             <span>Profile</span>