@borisj74/bv-ds 0.1.1 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@borisj74/bv-ds",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "bv-ds — React component library synced from Figma (Untitled UI v8.0), built on Tailwind CSS",
   "license": "MIT",
   "type": "module",
@@ -38,20 +38,22 @@
     "react-dom": ">=18.0.0"
   },
   "devDependencies": {
+    "@borisj74/bv-ds-icons": "^0.1.0",
+    "@storybook/addon-a11y": "^8.0.0",
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/react-vite": "^8.0.0",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
+    "autoprefixer": "^10.4.0",
+    "clsx": "^2.1.0",
+    "postcss": "^8.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "recharts": "^2.15.4",
+    "storybook": "^8.0.0",
     "tailwindcss": "^3.4.0",
-    "postcss": "^8.4.0",
-    "autoprefixer": "^10.4.0",
-    "clsx": "^2.1.0",
     "tsup": "^8.0.0",
-    "typescript": "^5.4.0",
-    "@storybook/react-vite": "^8.0.0",
-    "@storybook/addon-essentials": "^8.0.0",
-    "@storybook/addon-a11y": "^8.0.0",
-    "storybook": "^8.0.0"
+    "typescript": "^5.4.0"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Button/Button.tsx

@@ -15,32 +15,44 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   loading?: boolean;
 }
 
-// NOTE: this is a placeholder implementation to verify the build/Storybook
-// pipeline end-to-end. The figma-to-react skill should overwrite this with
-// the full per-hierarchy/per-size token mapping from design.md §3 (all 5
-// sizes, all 5 hierarchies, skeuomorphic shadow stack on Primary/Secondary).
+// Token class names use the doubled-prefix form that matches the nested
+// tailwind-preset.js color groups (v0.1.2+):
+//   colors.bg["brand-solid"]  → bg-bg-brand-solid
+//   colors.text["secondary"]  → text-text-secondary
+//   colors.border["primary"]  → border-border-primary
 //
-// Padding values below use Tailwind arbitrary values ([14px], [10px], etc)
-// rather than the spacing-* scale on purpose — design.md §3 confirms the
-// real Figma component uses raw px at md/lg/xl, not the nearest token.
-// Don't "fix" these to spacing-md/spacing-lg; that would silently diverge
-// from the source design.
+// Padding values use Tailwind arbitrary values ([14px], [10px], etc) rather
+// than the spacing-* scale — design.md §3 confirms the real Figma component
+// uses raw px at certain sizes. Don't "fix" these to spacing tokens; that
+// would silently diverge from the source design.
+//
+// Primary/Secondary use the skeuomorphic shadow stack confirmed in design.md:
+//   shadow-xs outer + inner border highlight + inner bottom shading.
 
 const hierarchyClasses: Record<ButtonHierarchy, string> = {
   Primary:
-    "bg-brand-solid text-white border-2 border-white/[0.12] hover:bg-bg-brand-solid-hover",
-  Secondary: "bg-bg-primary text-text-secondary border border-border-primary",
-  Tertiary: "bg-transparent text-text-tertiary border-0",
-  "Link color": "bg-transparent text-text-brand-secondary border-0 p-0",
-  "Link gray": "bg-transparent text-text-tertiary border-0 p-0",
+    "bg-bg-brand-solid text-text-white border-2 border-white/[0.12] shadow-skeuomorphic " +
+    "hover:bg-bg-brand-solid-hover",
+  Secondary:
+    "bg-bg-primary text-text-secondary border border-border-primary shadow-skeuomorphic " +
+    "hover:bg-bg-primary-hover",
+  Tertiary:
+    "bg-transparent text-text-tertiary border-0 " +
+    "hover:bg-bg-secondary",
+  "Link color":
+    "bg-transparent text-text-brand-secondary border-0 p-0 " +
+    "hover:text-text-brand-secondary-hover",
+  "Link gray":
+    "bg-transparent text-text-tertiary border-0 p-0 " +
+    "hover:text-text-tertiary-hover",
 };
 
 const sizeClasses: Record<ButtonSize, string> = {
-  xs: "px-[10px] py-sm text-xs",
-  sm: "px-lg py-md text-xs",
-  md: "px-[14px] py-[10px] text-sm",
-  lg: "px-xl py-[10px] text-md",
-  xl: "px-[18px] py-lg text-md",
+  xs: "px-[10px] py-sm gap-xs text-xs font-semibold",
+  sm: "px-lg py-md gap-xs text-xs font-semibold",
+  md: "px-[14px] py-[10px] gap-xs text-sm font-semibold",
+  lg: "px-xl py-[10px] gap-sm text-md font-semibold",
+  xl: "px-[18px] py-lg gap-sm text-md font-semibold",
 };
 
 export function Button({
@@ -55,8 +67,10 @@ export function Button({
   return (
     <button
       className={clsx(
-        "font-body font-semibold rounded-md cursor-pointer transition-colors",
-        "disabled:opacity-50 disabled:cursor-not-allowed",
+        "inline-flex items-center justify-center font-body rounded-md",
+        "cursor-pointer transition-colors",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-brand focus-visible:ring-offset-2",
+        "disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none",
         hierarchyClasses[hierarchy],
         sizeClasses[size],
         className,
@@ -65,7 +79,13 @@ export function Button({
       aria-disabled={disabled || loading}
       {...rest}
     >
-      {loading ? "Loading…" : children}
+      {loading ? (
+        <span className="opacity-70">Loading…</span>
+      ) : (
+        children
+      )}
     </button>
   );
 }
+
+export default Button;

package/src/components/ButtonDestructive/ButtonDestructive.tsx

@@ -17,10 +17,10 @@ export interface ButtonDestructiveProps
 
 // Destructive palette (design.md §3 / Figma Button destructive 6218:85578).
 // Primary/Secondary carry the skeuomorphic shadow stack; focus ring is the
-// error ring (border-error).
+// error ring (border-border-error).
 const hierarchyClasses: Record<ButtonDestructiveHierarchy, string> = {
   Primary:
-    "bg-error-solid text-white border-2 border-white/[0.12] shadow-skeuomorphic hover:bg-error-solid-hover",
+    "bg-bg-error-solid text-text-white border-2 border-white/[0.12] shadow-skeuomorphic hover:bg-bg-error-solid-hover",
   Secondary:
     "bg-bg-primary text-text-error-primary border border-border-error-subtle shadow-skeuomorphic hover:bg-bg-error-primary",
   Tertiary:
@@ -51,7 +51,7 @@ export function ButtonDestructive({
     <button
       className={clsx(
         "font-body font-semibold rounded-md cursor-pointer transition-colors",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-error focus-visible:ring-offset-2 focus-visible:ring-offset-bg-primary",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-border-error focus-visible:ring-offset-2 focus-visible:ring-offset-bg-bg-primary",
         "disabled:opacity-50 disabled:cursor-not-allowed",
         hierarchyClasses[hierarchy],
         hierarchy === "Link" ? "" : sizeClasses[size],

package/src/components/CalendarColumnHeader/CalendarColumnHeader.tsx

@@ -33,7 +33,7 @@ export function CalendarColumnHeader({
         className={clsx(
           "flex items-center justify-center text-xs font-semibold",
           current
-            ? "size-6 rounded-full bg-brand-solid text-white"
+            ? "size-6 rounded-full bg-bg-brand-solid text-white"
             : "text-text-secondary",
         )}
         aria-current={current ? "date" : undefined}

package/src/components/CalendarViewDropdown/CalendarViewDropdown.tsx

@@ -83,7 +83,7 @@ export function CalendarViewDropdown({
                     )}
                   >
                     {isSelected ? (
-                      <span className="size-2 rounded-full bg-brand-solid" />
+                      <span className="size-2 rounded-full bg-bg-brand-solid" />
                     ) : null}
                   </span>
                   <span className="flex-1 text-left">{opt.label}</span>

package/src/components/ChartTooltip/ChartTooltip.tsx

@@ -20,7 +20,7 @@ export interface ChartTooltipProps {
 
 /**
  * Themed tooltip card for the Recharts chart wrappers — pass as the chart's
- * `<Tooltip content={<ChartTooltip />} />`. Renders a `bg-primary` card with the
+ * `<Tooltip content={<ChartTooltip />} />`. Renders a `bg-bg-primary` card with the
  * point label and one colored-dot row per series. Returns null when inactive.
  */
 export function ChartTooltip({ active, payload, label, formatValue }: ChartTooltipProps) {

package/src/components/Checkbox/checkboxBase.tsx

@@ -46,7 +46,7 @@ export function CheckControlVisual({
         disabled
           ? "border-border-primary bg-bg-tertiary"
           : active
-            ? "border-brand-solid bg-brand-solid"
+            ? "border-bg-brand-solid bg-bg-brand-solid"
             : "border-border-primary bg-bg-primary",
       )}
     >

package/src/components/ContentFeatureText/ContentFeatureText.tsx

@@ -14,12 +14,13 @@ export interface ContentFeatureTextProps {
 }
 
 // md verified (p-4xl, rounded-2xl, heading text-xl, body text-lg).
-// sm inferred (scaled down a step).
+// sm verified 2026-06-27 (node 3959:413352): p-3xl, rounded-2xl, heading text-lg,
+// body text-md. Radius corrected rounded-xl→rounded-2xl (was inferred wrong).
 const sizeConfig: Record<
   ContentFeatureTextSize,
   { box: string; heading: string; body: string }
 > = {
-  sm: { box: "p-3xl rounded-xl", heading: "text-lg", body: "text-md" },
+  sm: { box: "p-3xl rounded-2xl", heading: "text-lg", body: "text-md" },
   md: { box: "p-4xl rounded-2xl", heading: "text-xl", body: "text-lg" },
 };
 

package/src/components/ContextMenu/ContextMenu.tsx

@@ -18,7 +18,7 @@ export interface ContextMenuProps {
 
 /**
  * A thin positioned panel for right-click menus. Reuses the dropdown panel
- * tokens (shadow-lg, border-secondary-alt, radius-md) and renders whatever
+ * tokens (shadow-lg, border-border-secondary-alt, radius-md) and renders whatever
  * rows you pass — compose DropdownMenuListItem children; it does NOT
  * reimplement list items. Pair with `useContextMenu`.
  */

package/src/components/FeaturedIcon/FeaturedIcon.tsx

@@ -0,0 +1,146 @@
+import React from "react";
+import clsx from "clsx";
+
+export type FeaturedIconColor =
+  | "brand"
+  | "gray"
+  | "error"
+  | "warning"
+  | "success";
+
+export type FeaturedIconTheme =
+  | "light"
+  | "dark"
+  | "gradient"
+  | "modern"
+  | "modern-neue";
+
+export type FeaturedIconSize = "sm" | "md" | "lg" | "xl";
+
+// `color` is Omitted because the native HTMLAttributes `color` prop collides
+// with our richer FeaturedIconColor union (see claude.md interface-collision rule).
+export interface FeaturedIconProps
+  extends Omit<React.HTMLAttributes<HTMLSpanElement>, "color"> {
+  /** Icon element (e.g. from @borisj74/bv-ds-icons). Inherits currentColor. */
+  icon: React.ReactNode;
+  color?: FeaturedIconColor;
+  theme?: FeaturedIconTheme;
+  size?: FeaturedIconSize;
+}
+
+// Confirmed from Figma node 1102:5338 (Misc icons page, batch 30).
+// container px → size-N (32/40/48/56); icon px → wrapper span width/height.
+const boxSize: Record<FeaturedIconSize, string> = {
+  sm: "size-8", // 32px
+  md: "size-10", // 40px
+  lg: "size-12", // 48px
+  xl: "size-14", // 56px
+};
+
+const iconPx: Record<FeaturedIconSize, number> = {
+  sm: 16,
+  md: 20,
+  lg: 24,
+  xl: 28,
+};
+
+// Light theme = the only circular treatment; modern-neue = 10px (radius-lg);
+// every other theme = 12px (radius-xl).
+function radiusFor(theme: FeaturedIconTheme): string {
+  if (theme === "light") return "rounded-full";
+  if (theme === "modern-neue") return "rounded-lg";
+  return "rounded-xl";
+}
+
+// Light: tinted secondary bg + colour-matched icon (fg). Gray maps to the
+// neutral semantic layer (no dedicated gray featured token in the preset).
+const lightBg: Record<FeaturedIconColor, string> = {
+  brand: "bg-bg-brand-secondary",
+  gray: "bg-bg-secondary",
+  error: "bg-bg-error-secondary",
+  warning: "bg-bg-warning-secondary",
+  success: "bg-bg-success-secondary",
+};
+
+const lightFg: Record<FeaturedIconColor, string> = {
+  brand: "text-fg-brand-primary",
+  gray: "text-fg-secondary",
+  error: "text-fg-error-primary",
+  warning: "text-fg-warning-primary",
+  success: "text-fg-success-primary",
+};
+
+// Dark: solid bg + white icon + skeuomorphic shadow + a 2px white/12 highlight
+// border (arbitrary value — no Figma variable). Gray uses the secondary solid.
+const darkBg: Record<FeaturedIconColor, string> = {
+  brand: "bg-bg-brand-solid",
+  gray: "bg-bg-secondary-solid",
+  error: "bg-bg-error-solid",
+  warning: "bg-bg-warning-solid",
+  success: "bg-bg-success-solid",
+};
+
+// Gradient: 2-stop diagonal fill (utility-{family}-50 → -200) + white icon.
+const gradientFill: Record<FeaturedIconColor, string> = {
+  brand: "bg-gradient-to-br from-utility-brand-50 to-utility-brand-200",
+  gray: "bg-gradient-to-br from-utility-neutral-50 to-utility-neutral-200",
+  error: "bg-gradient-to-br from-utility-red-50 to-utility-red-200",
+  warning: "bg-gradient-to-br from-utility-amber-50 to-utility-amber-200",
+  success: "bg-gradient-to-br from-utility-green-50 to-utility-green-200",
+};
+
+/**
+ * FeaturedIcon — Untitled UI "Featured icon" (node 1102:5338).
+ *
+ * A coloured container wrapping an icon, used by Empty state, Alert, Metric,
+ * Notification, etc. Pass the icon via the `icon` slot — it inherits
+ * currentColor, so no fill/stroke props are needed.
+ *
+ * `modern` and `modern-neue` are neutral white-card treatments (gray-only in
+ * Figma); the `color` prop is ignored for those two themes.
+ */
+export function FeaturedIcon({
+  icon,
+  color = "brand",
+  theme = "light",
+  size = "md",
+  className,
+  ...rest
+}: FeaturedIconProps) {
+  const px = iconPx[size];
+
+  const themeClasses = clsx(
+    theme === "light" && [lightBg[color], lightFg[color]],
+    theme === "dark" && [
+      darkBg[color],
+      "text-fg-white border-2 border-[rgba(255,255,255,0.12)] shadow-skeuomorphic",
+    ],
+    theme === "gradient" && [gradientFill[color], "text-fg-white"],
+    theme === "modern" && [
+      "bg-bg-primary text-fg-secondary border border-border-primary shadow-skeuomorphic",
+    ],
+    theme === "modern-neue" && [
+      "bg-bg-primary text-fg-secondary border border-border-primary shadow-xs",
+    ],
+  );
+
+  return (
+    <span
+      className={clsx(
+        "inline-flex shrink-0 items-center justify-center",
+        boxSize[size],
+        radiusFor(theme),
+        themeClasses,
+        className,
+      )}
+      {...rest}
+    >
+      <span
+        aria-hidden="true"
+        style={{ width: px, height: px, display: "inline-flex" }}
+      >
+        {icon}
+      </span>
+    </span>
+  );
+}

package/src/components/FeaturedIcon/index.ts

@@ -0,0 +1,7 @@
+export { FeaturedIcon } from "./FeaturedIcon";
+export type {
+  FeaturedIconProps,
+  FeaturedIconColor,
+  FeaturedIconTheme,
+  FeaturedIconSize,
+} from "./FeaturedIcon";

package/src/components/MessageAction/MessageAction.tsx

@@ -100,7 +100,7 @@ const inputBox =
  * - **minimal**  — single-line field + square send button (row).
  * - **textarea** — multiline box, attach/emoji + brand Send pinned bottom-right,
  *   record button top-right.
- * - **advanced** — AI prompt box on `bg-secondary`; author chip + Shortcuts/Attach
+ * - **advanced** — AI prompt box on `bg-bg-secondary`; author chip + Shortcuts/Attach
  *   footer, mic top-right, resize handle.
  *
  * Renders real `<input>`/`<textarea>` (controlled via `value`/`onValueChange`);

package/src/components/NavAccountCard/NavAccountCard.tsx

@@ -2,6 +2,7 @@ import { type HTMLAttributes, type ReactNode } from "react";
 import clsx from "clsx";
 
 export type NavAccountCardVariant = "simple" | "card";
+export type NavAccountCardBreakpoint = "desktop" | "mobile";
 
 export interface NavAccountCardProps
   extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
@@ -9,7 +10,14 @@ export interface NavAccountCardProps
   variant?: NavAccountCardVariant;
   /** card only — whether the dropdown menu is shown. */
   open?: boolean;
+  /** Width: `desktop` = 280px · `mobile` = 256px. */
+  breakpoint?: NavAccountCardBreakpoint;
+  /** Custom avatar node — takes precedence over the built-in `src` treatment. */
   avatar?: ReactNode;
+  /** Image URL for the built-in layered avatar (used when `avatar` is not supplied). */
+  src?: string;
+  /** Status dot on the built-in avatar — `true` online (green) · `false` offline (gray) · omit for none. */
+  online?: boolean;
   name?: ReactNode;
   email?: ReactNode;
   /** card only — toggles the dropdown (fires on trigger click). */
@@ -41,6 +49,28 @@ const LogOut = () => (
   </svg>
 );
 
+/**
+ * Layered avatar treatment from Figma (node 7891:87996): white outer ring +
+ * inner hairline border + status dot. `border-[rgba(0,0,0,0.16)]` is a one-off
+ * value (no matching token) per the Figma spec. Used when `src` is supplied and
+ * no `avatar` slot is given.
+ */
+const LayeredAvatar = ({ src, online }: { src?: string; online?: boolean }) => (
+  <span className="relative inline-flex size-10 shrink-0 rounded-full border-[0.75px] border-border-secondary-alt bg-bg-primary p-[1px] shadow-xs">
+    <span className="flex size-full overflow-hidden rounded-full border-[0.5px] border-[rgba(0,0,0,0.16)]">
+      <img src={src} alt="" className="size-full rounded-full object-cover" />
+    </span>
+    {online !== undefined && (
+      <span
+        className={clsx(
+          "absolute bottom-[-2px] right-[-2px] size-[14px] rounded-full border-[1.5px] border-bg-primary",
+          online ? "bg-fg-success-secondary" : "bg-utility-neutral-300",
+        )}
+      />
+    )}
+  </span>
+);
+
 const AvatarLabel = ({ avatar, name, email }: { avatar?: ReactNode; name?: ReactNode; email?: ReactNode }) => (
   <div className="flex min-w-0 flex-1 items-center gap-md">
     {avatar && <span className="shrink-0">{avatar}</span>}
@@ -56,7 +86,7 @@ const AvatarLabel = ({ avatar, name, email }: { avatar?: ReactNode; name?: React
  * with a sign-out button; `card` renders a boxed trigger that, when `open`,
  * reveals a dropdown (the `menu` slot — compose `NavAccountCardMenuItem` rows).
  *
- * The active account is marked with `bg-brand-solid` (the radio inside the
+ * The active account is marked with `bg-bg-brand-solid` (the radio inside the
  * account menu items). Note: Figma opens the desktop menu as a right-side
  * flyout; this opens it above the trigger (`bottom-full`) — a layout
  * simplification (see figma-map). Width defaults to 280px; override via
@@ -65,7 +95,10 @@ const AvatarLabel = ({ avatar, name, email }: { avatar?: ReactNode; name?: React
 export function NavAccountCard({
   variant = "card",
   open = false,
+  breakpoint = "desktop",
   avatar,
+  src,
+  online,
   name,
   email,
   onToggle,
@@ -74,16 +107,20 @@ export function NavAccountCard({
   className,
   ...rest
 }: NavAccountCardProps) {
+  const widthClass = breakpoint === "mobile" ? "w-[256px]" : "w-[280px]";
+  const avatarNode = avatar ?? (src !== undefined ? <LayeredAvatar src={src} online={online} /> : undefined);
+
   if (variant === "simple") {
     return (
       <div
         className={clsx(
-          "relative flex w-[280px] items-start gap-xl border-t border-border-secondary px-md pt-2xl",
+          "relative flex items-start gap-xl border-t border-border-secondary px-md pt-2xl",
+          widthClass,
           className,
         )}
         {...rest}
       >
-        <AvatarLabel avatar={avatar} name={name} email={email} />
+        <AvatarLabel avatar={avatarNode} name={name} email={email} />
         <button
           type="button"
           onClick={onSignOut}
@@ -97,13 +134,13 @@ export function NavAccountCard({
   }
 
   return (
-    <div className={clsx("relative w-[280px]", className)} {...rest}>
+    <div className={clsx("relative", widthClass, className)} {...rest}>
       <button
         type="button"
         onClick={onToggle}
         className="relative flex w-full items-start gap-xl rounded-xl border border-border-secondary bg-bg-primary-alt p-lg text-left shadow-xs"
       >
-        <AvatarLabel avatar={avatar} name={name} email={email} />
+        <AvatarLabel avatar={avatarNode} name={name} email={email} />
         <span
           className={clsx(
             "absolute right-[7px] top-[7px] flex items-center justify-center rounded-sm p-sm text-fg-quaternary",

package/src/components/NavAccountCard/index.ts

@@ -1,2 +1,6 @@
 export { NavAccountCard } from "./NavAccountCard";
-export type { NavAccountCardProps, NavAccountCardVariant } from "./NavAccountCard";
+export type {
+  NavAccountCardProps,
+  NavAccountCardVariant,
+  NavAccountCardBreakpoint,
+} from "./NavAccountCard";

package/src/components/NavAccountCardMenuItem/NavAccountCardMenuItem.tsx

@@ -27,7 +27,7 @@ export interface NavAccountCardMenuItemProps
  * A single row inside `NavAccountCard`'s dropdown. Two shapes:
  * - `menu-item` — icon + label + optional shortcut chip (View profile, Settings…).
  * - `account` — avatar + name/email with a radio indicator; `current` fills the
- *   radio with `bg-brand-solid` (the active-account marker).
+ *   radio with `bg-bg-brand-solid` (the active-account marker).
  */
 export function NavAccountCardMenuItem({
   type = "menu-item",

package/src/components/NavButton/NavButton.tsx

@@ -3,7 +3,7 @@ import clsx from "clsx";
 
 export interface NavButtonProps
   extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
-  /** Active route — applies the selected (`bg-secondary`) background. */
+  /** Active route — applies the selected (`bg-bg-secondary`) background. */
   current?: boolean;
   /** Render only the leading icon (square button). */
   iconOnly?: boolean;

package/src/components/NavFeaturedCard/NavFeaturedCard.tsx

@@ -11,7 +11,7 @@ export interface NavFeaturedCardProps
   children?: ReactNode;
   /** CTA row — compose Button(s) / link buttons. */
   action?: ReactNode;
-  /** Bordered surface (`bg-primary` + border) vs subtle (`bg-secondary`). */
+  /** Bordered surface (`bg-bg-primary` + border) vs subtle (`bg-bg-secondary`). */
   bordered?: boolean;
   /** Renders an x-close button top-right. */
   onClose?: () => void;

package/src/components/NavItemBase/NavItemBase.tsx

@@ -3,7 +3,7 @@ import clsx from "clsx";
 
 export interface NavItemBaseProps
   extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
-  /** Active route — selected (`bg-secondary`) background. */
+  /** Active route — selected (`bg-bg-secondary`) background. */
   current?: boolean;
   /** Leading icon (20px). */
   icon?: ReactNode;

package/src/components/NavItemDropdownBase/NavItemDropdownBase.tsx

@@ -3,7 +3,7 @@ import clsx from "clsx";
 
 export interface NavItemDropdownBaseProps
   extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
-  /** Active group — selected (`bg-secondary`) background on the trigger. */
+  /** Active group — selected (`bg-bg-secondary`) background on the trigger. */
   current?: boolean;
   /** Expanded state — reveals the submenu. */
   open?: boolean;

package/src/components/PageHeader/PageHeader.tsx

@@ -20,7 +20,7 @@ export interface PageHeaderProps
   actions?: ReactNode;
   /** Optional breadcrumbs slot above the title. */
   breadcrumbs?: ReactNode;
-  /** Banner background image (banner styles); falls back to `bg-tertiary`. */
+  /** Banner background image (banner styles); falls back to `bg-bg-tertiary`. */
   bannerUrl?: string;
 }
 

package/src/components/PaginationDotIndicator/PaginationDotIndicator.tsx

@@ -13,7 +13,7 @@ export interface PaginationDotIndicatorProps
 
 /**
  * Single pagination indicator — a dot or a line. `current` fills it with the
- * brand colour, otherwise `bg-quaternary`. Dimensions per size/variant match
+ * brand colour, otherwise `bg-bg-quaternary`. Dimensions per size/variant match
  * Figma (dot md 8 / lg 10; line md h6 / lg h8, both 40 wide).
  */
 export function PaginationDotIndicator({

package/src/components/ProgressBar/ProgressBar.tsx

@@ -32,7 +32,7 @@ const Bubble = ({ pct, where }: { pct: number; where: "top" | "bottom" }) => (
 
 /**
  * Progress bar — pure CSS, no chart lib. `value` (0–100) drives an animated fill
- * (`fg-brand-primary` on a `bg-quaternary` track). `label`: none / right (inline
+ * (`fg-brand-primary` on a `bg-bg-quaternary` track). `label`: none / right (inline
  * %) / bottom (% under) / top|bottom-floating (tooltip bubble tracking the fill).
  */
 export function ProgressBar({ value, label = "none", className, ...rest }: ProgressBarProps) {

package/src/components/RadioGroupItem/RadioGroupItem.tsx

@@ -50,7 +50,7 @@ function Control({ kind, selected, size }: { kind: "radio" | "checkbox"; selecte
 
 /**
  * Selectable radio/checkbox card. One component over the 6 Figma `type`s — the
- * shared shell (border, padding, `radius-xl`, selected `border-brand`) is
+ * shared shell (border, padding, `radius-xl`, selected `border-border-brand`) is
  * constant; only the leading element and control placement change. `radioButton`
  * uses a radio (leading); `checkbox` a checkbox (leading); `iconSimple`/`avatar`/
  * `paymentIcon` put a `leading` visual on the left and the checkbox trailing;

package/src/components/SelectMenuItem/SelectMenuItem.tsx

@@ -40,8 +40,8 @@ function CheckboxBox({ selected, big }: { selected: boolean; big: boolean }) {
 /**
  * List-item primitive for `Select` and Multi-select dropdowns. One component over
  * both: `multi` swaps the trailing selected-check for a leading checkbox. The
- * shared shell is a full-width row with hover `bg-primary-hover`; `label` is
- * `text-primary`, `supportingText` sits inline in `text-tertiary`.
+ * shared shell is a full-width row with hover `bg-bg-primary-hover`; `label` is
+ * `text-text-primary`, `supportingText` sits inline in `text-text-tertiary`.
  */
 export function SelectMenuItem({
   label,

package/src/components/SidebarNavigation/SidebarNavigation.tsx

@@ -37,7 +37,7 @@ const WIDTH: Record<SidebarNavigationType, string> = {
  * a fixed-width rail (`slim` collapses to 68px). Composes existing `Nav*`
  * components via slots/children — it does not reimplement nav items. On mobile
  * the rail is hidden behind a hamburger (`NavMenuButton`); opening it shows a
- * `bg-overlay` + `backdrop-blur-md` scrim and slides the rail in as a drawer.
+ * `bg-bg-overlay` + `backdrop-blur-md` scrim and slides the rail in as a drawer.
  *
  * NOTE: `dualTier`'s icon-rail + expanding-panel split is simplified to a single
  * 280px column here — compose the icon rail separately if you need the two-tier
@@ -79,7 +79,7 @@ export function SidebarNavigation({
   return (
     <>
       {/* Desktop rail */}
-      <aside className="hidden h-full md:block">{rail}</aside>
+      <aside className="hidden h-full md:flex">{rail}</aside>
 
       {/* Mobile trigger + drawer */}
       <div className="md:hidden">

package/src/components/SocialButton/SocialButton.tsx

@@ -51,8 +51,8 @@ const GLYPH: Record<SocialBrand, ReactNode> = {
 };
 
 /**
- * Social-login button. All themes share the neutral white shell (border-primary,
- * shadow-xs, `text-secondary` label) — `theme` only controls the brand glyph:
+ * Social-login button. All themes share the neutral white shell (border-border-primary,
+ * shadow-xs, `text-text-secondary` label) — `theme` only controls the brand glyph:
  * `color`/`brand` = full color, `gray` = monochrome (CSS grayscale, flagged
  * approximation of UntitledUI's true single-color gray logos). `iconOnly` drops
  * the label for a square button.