@toolr/ui-design 0.1.7 → 0.1.9

package/components/ui/icon-button.tsx

@@ -37,9 +37,12 @@ import {
   PanelBottomClose,
   Package, Wrench, Store, ScrollText, Cpu, FlaskConical, Layers, Timer, Camera,
   AlertCircle, FileCode, Gauge, Home, PieChart, Settings2,
+  FolderSearch, PanelLeftClose, History,
+  Github, Gitlab, GitBranch,
 } from 'lucide-react'
 import type { LucideIcon } from 'lucide-react'
 import { type AccentColor } from '../lib/form-colors.ts'
+import { useAccentColor } from '../lib/accent-context.ts'
 import { Tooltip, type TooltipContent } from './tooltip.tsx'
 
 export const iconMap = {
@@ -140,6 +143,14 @@ export const iconMap = {
   'home': Home,
   'pie-chart': PieChart,
   'settings-2': Settings2,
+  'folder-search': FolderSearch,
+  'panel-left-close': PanelLeftClose,
+  'trash-2': Trash2,
+  'rotate-ccw': RotateCcw,
+  'history': History,
+  'github': Github,
+  'gitlab': Gitlab,
+  'git-branch': GitBranch,
 } as const
 
 export type IconName = keyof typeof iconMap
@@ -147,7 +158,7 @@ export type IconName = keyof typeof iconMap
 export interface ActionItem {
   icon: IconName
   onClick: () => void
-  color?: IconButtonColor
+  accentColor?: IconButtonColor
   size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg'
   variant?: IconButtonVariant
   tooltip?: TooltipContent
@@ -169,11 +180,11 @@ export interface IconButtonProps {
   /** When provided, renders an <a> tag instead of <button>. Opens in a new tab. */
   href?: string
   size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg'
-  color?: IconButtonColor
+  accentColor?: IconButtonColor
   variant?: IconButtonVariant
   active?: boolean
   disabled?: boolean
-  /** Async action status. Overrides icon, color, and active state when set. */
+  /** Async action status. Overrides icon, accentColor, and active state when set. */
   status?: IconButtonStatus
   /** Tooltip shown on hover. Title and description are required. */
   tooltip?: TooltipContent
@@ -260,9 +271,9 @@ const statusIcons: Record<IconButtonStatus, LucideIcon> = {
 
 const statusConfig = {
   loading: { color: undefined, active: true, animation: 'animate-spin' },
-  success: { color: 'green' as const, active: true, animation: 'animate-pulse' },
-  warning: { color: 'amber' as const, active: true, animation: 'animate-pulse' },
-  error: { color: 'red' as const, active: true, animation: 'animate-pulse' },
+  success: { color: 'green' as const, active: true, animation: '' },
+  warning: { color: 'amber' as const, active: true, animation: '' },
+  error: { color: 'red' as const, active: true, animation: '' },
 }
 
 function resolveIcon(icon: IconName | ReactNode, status: IconButtonStatus | undefined): LucideIcon | null {
@@ -276,7 +287,7 @@ export function IconButton({
   onClick,
   href,
   size = 'sm',
-  color = 'neutral',
+  accentColor,
   variant = 'outline',
   active = false,
   disabled = false,
@@ -289,7 +300,9 @@ export function IconButton({
   className = '',
   testId,
 }: IconButtonProps) {
-  const resolvedColor = status ? (statusConfig[status].color ?? color) : color
+  const contextAccent = useAccentColor()
+  const effectiveColor = accentColor ?? contextAccent ?? 'neutral'
+  const resolvedColor = status ? (statusConfig[status].color ?? effectiveColor) : effectiveColor
   const resolvedActive = status ? statusConfig[status].active : active
 
   const colorStyle = colorClasses[resolvedColor] ?? colorClasses.neutral
@@ -299,7 +312,7 @@ export function IconButton({
   const borderClass = isOutline ? colorStyle.border : 'border-neutral-600'
 
   const sharedClassName = `
-    relative flex items-center justify-center border transition-colors ${isOutline ? '' : 'bg-neutral-800'}
+    relative flex items-center justify-center border transition-colors ${isOutline ? '' : 'bg-neutral-960'}
     ${sizeClasses[size]}
     ${colorStyle.text} ${borderClass}
     ${resolvedActive ? colorStyle.active : ''}
@@ -337,7 +350,7 @@ export function IconButton({
       href={href}
       target="_blank"
       rel="noopener noreferrer"
-      aria-label={tooltip?.title}
+      aria-label={tooltip?.title || (typeof tooltip?.description === 'string' ? tooltip.description : undefined)}
       data-testid={testId}
       className={`${sharedClassName} cursor-pointer no-underline`}
     >
@@ -348,7 +361,7 @@ export function IconButton({
       type="button"
       onClick={onClick}
       disabled={disabled}
-      aria-label={tooltip?.title}
+      aria-label={tooltip?.title || (typeof tooltip?.description === 'string' ? tooltip.description : undefined)}
       data-testid={testId}
       className={`${sharedClassName} cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed`}
     >
@@ -372,16 +385,16 @@ export interface CollapseButtonProps {
   collapsed: boolean
   onToggle: () => void
   size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg'
-  color?: IconButtonColor
+  accentColor?: IconButtonColor
   tooltipPosition?: 'bottom' | 'bottom-left' | 'left' | 'right' | 'top' | 'top-left' | 'top-right'
 }
 
-export function CollapseButton({ collapsed, onToggle, size = 'xss', color, tooltipPosition = 'bottom-left' }: CollapseButtonProps) {
+export function CollapseButton({ collapsed, onToggle, size = 'xss', accentColor, tooltipPosition = 'bottom-left' }: CollapseButtonProps) {
   return (
     <IconButton
       icon={collapsed ? 'chevrons-up-down' : 'chevrons-down-up'}
       onClick={onToggle}
-      color={color}
+      accentColor={accentColor}
       tooltip={{
         title: collapsed ? 'Expand all' : 'Collapse all',
         description: collapsed ? 'Expand all folders' : 'Collapse all folders',

package/components/ui/input.tsx

@@ -17,10 +17,11 @@
  * - Extends native input attributes
  */
 
-import { forwardRef, useEffect, useRef, useState, type InputHTMLAttributes, type ReactNode } from 'react'
+import { forwardRef, useEffect, useId, useRef, useState, type InputHTMLAttributes, type ReactNode } from 'react'
 import { Search, X, Eye, EyeOff } from 'lucide-react'
 import { DebounceBorderOverlay } from './debounce-border-overlay.tsx'
 import { FORM_COLORS, type FormColor } from '../lib/form-colors.ts'
+import { useAccentColor } from '../lib/accent-context.ts'
 
 export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size' | 'type'> {
   value: string
@@ -29,7 +30,7 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
   debounceMs?: number
   error?: boolean | string
   variant?: 'filled' | 'outline'
-  color?: FormColor
+  accentColor?: FormColor
   size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg'
   mono?: boolean
   /** Test ID for E2E testing */
@@ -47,7 +48,7 @@ const sizeClasses = {
 }
 
 const variantClasses = {
-  filled: 'bg-neutral-800',
+  filled: 'bg-neutral-960',
   outline: 'bg-transparent',
 }
 
@@ -65,7 +66,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input({
   debounceMs = 0,
   error,
   variant = 'outline',
-  color = 'blue',
+  accentColor,
   size = 'sm',
   disabled = false,
   className = '',
@@ -76,6 +77,8 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input({
   onBlur: onBlurProp,
   ...props
 }, ref) {
+  const contextAccent = useAccentColor()
+  const effectiveColor = accentColor ?? contextAccent ?? 'blue'
   const hasError = Boolean(error)
   const hasAction = actionSlot && !disabled
   const [hovered, setHovered] = useState(false)
@@ -84,6 +87,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input({
   const isSearch = type === 'search'
   const isPassword = type === 'password'
   const [isPasswordVisible, setIsPasswordVisible] = useState(false)
+  const errorId = useId()
 
   // Debounce state
   const [internalValue, setInternalValue] = useState(value)
@@ -146,13 +150,16 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input({
           onBlur={(e) => { setFocused(false); onBlurProp?.(e) }}
           disabled={disabled}
           data-testid={testId}
+          aria-invalid={hasError || undefined}
+          aria-describedby={typeof error === 'string' && error ? errorId : undefined}
+          {...(isSearch && !props['aria-label'] ? { 'aria-label': props.placeholder || 'Search' } : {})}
           {...searchAutoProps}
           className={`
             w-full border rounded-lg text-neutral-200 placeholder-neutral-500
             focus:outline-none transition-colors
             disabled:opacity-50 disabled:cursor-not-allowed
             ${sizeClasses[size]}
-            ${hasError ? 'border-red-500 focus:border-red-500' : `${variantClasses[variant]} ${FORM_COLORS[color].border} ${FORM_COLORS[color].focus}`}
+            ${hasError ? 'border-red-500 focus:border-red-500' : `${variantClasses[variant]} ${FORM_COLORS[effectiveColor].border} ${FORM_COLORS[effectiveColor].focus}`}
             ${mono ? 'font-mono' : ''}
             ${isSearch ? 'pl-8 pr-8' : (hasAction || isPassword) ? 'pr-8' : ''}
             ${className}
@@ -162,6 +169,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input({
         {showClear && (
           <button
             type="button"
+            aria-label="Clear search"
             onClick={handleClear}
             className="absolute right-2 top-1/2 -translate-y-1/2 w-[18px] h-[18px] flex items-center justify-center rounded-md text-neutral-400 hover:text-neutral-300 hover:bg-neutral-500/20 transition-colors z-10 cursor-pointer"
           >
@@ -177,7 +185,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input({
           <button
             type="button"
             onClick={() => setIsPasswordVisible(!isPasswordVisible)}
-            title={isPasswordVisible ? 'Hide' : 'Reveal'}
+            aria-label={isPasswordVisible ? 'Hide password' : 'Show password'}
             className="absolute right-2 top-1/2 -translate-y-1/2 w-[18px] h-[18px] flex items-center justify-center rounded-md text-neutral-400 hover:text-neutral-300 hover:bg-neutral-500/20 transition-colors z-10 cursor-pointer"
           >
             {isPasswordVisible ? <EyeOff className="w-2.5 h-2.5" /> : <Eye className="w-2.5 h-2.5" />}
@@ -188,7 +196,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input({
         )}
       </div>
       {typeof error === 'string' && error && (
-        <p className="text-sm text-red-400 mt-1 text-right">{error}</p>
+        <p id={errorId} className="text-sm text-red-400 mt-1 text-right" role="alert">{error}</p>
       )}
     </div>
   )

package/components/ui/label.tsx

@@ -20,7 +20,7 @@ export type LabelColor = AccentColor
 
 export interface LabelProps {
   text: string
-  color: LabelColor
+  accentColor: LabelColor
   /** Leading icon(s). Pass a single name or an array for multiple icons before text. */
   icon?: IconName | IconName[]
   /** Custom icon component. Takes precedence over icon. */
@@ -91,7 +91,7 @@ function transformText(text: string, textTransform?: 'capitalize' | 'lowercase'
 
 export function Label({
   text,
-  color,
+  accentColor,
   icon,
   IconComponent: CustomIcon,
   tooltip,
@@ -112,7 +112,7 @@ export function Label({
     s.text,
     'border rounded font-medium leading-none',
     hasProgress ? 'relative overflow-hidden' : '',
-    colorClasses[color],
+    colorClasses[accentColor],
     onClick ? 'cursor-pointer hover:brightness-125 transition-all' : 'cursor-help',
     className,
   ]
@@ -125,7 +125,11 @@ export function Label({
     <>
       {hasProgress && (
         <span
-          className={`absolute inset-y-0 left-0 ${progressFillColors[color]} rounded-[inherit]`}
+          role="progressbar"
+          aria-valuenow={Math.min(progress, 100)}
+          aria-valuemin={0}
+          aria-valuemax={100}
+          className={`absolute inset-y-0 left-0 ${progressFillColors[accentColor]} rounded-[inherit]`}
           style={{ width: `${Math.min(progress, 100)}%` }}
         />
       )}
@@ -138,7 +142,7 @@ export function Label({
           <span key={i} className={`${s.iconSize} flex-shrink-0 ${hasProgress ? 'relative' : ''}`}><Icon className={s.iconSize} /></span>
         ) : null
       })}
-      <span className={`min-w-0 truncate ${hasProgress ? 'relative' : ''}`} style={cssTransform ? { textTransform: cssTransform } : undefined}>
+      <span className={`min-w-0 truncate -mt-px ${hasProgress ? 'relative' : ''}`} style={cssTransform ? { textTransform: cssTransform } : undefined}>
         {transformText(text, textTransform)}
       </span>
     </>

package/components/ui/layout-tab-bar.tsx

@@ -3,6 +3,7 @@
 import { useState, useRef, useCallback, useEffect, type ReactNode } from 'react'
 import { ChevronLeft, ChevronRight, X } from 'lucide-react'
 import { cn } from '../lib/cn.ts'
+import type { FormColor } from '../lib/form-colors.ts'
 
 export interface LayoutTab {
   id: string
@@ -26,6 +27,7 @@ export interface LayoutTabBarProps {
   onClose?: (id: string) => void
   onReorder?: (fromIndex: number, toIndex: number) => void
   className?: string
+  accentColor?: FormColor
 }
 
 const COLORS: Record<string, { border: string; text: string }> = {
@@ -77,7 +79,7 @@ function getGradient(color?: string, isActive?: boolean): string | undefined {
     : `linear-gradient(135deg, rgba(${rgb}, 0.36) 0%, rgba(${rgb}, 0.06) 100%)`
 }
 
-export function LayoutTabBar({ tabs, activeId, onSelect, onClose, onReorder, className }: LayoutTabBarProps) {
+export function LayoutTabBar({ tabs, activeId, onSelect, onClose, onReorder, className, accentColor: _accentColor }: LayoutTabBarProps) {
   const scrollRef = useRef<HTMLDivElement>(null)
   const [showLeft, setShowLeft] = useState(false)
   const [showRight, setShowRight] = useState(false)
@@ -167,7 +169,7 @@ export function LayoutTabBar({ tabs, activeId, onSelect, onClose, onReorder, cla
   // ── Render ────────────────────────────────────────────
 
   return (
-    <div className={cn('relative flex items-center min-h-12 flex-shrink-0 bg-neutral-900/80 border-b border-neutral-700/50', className)}>
+    <div className={cn('relative flex items-center min-h-12 flex-shrink-0 bg-neutral-980/80 border-b border-neutral-700/50', className)}>
       {showLeft && (
         <div className="flex items-center px-2 shrink-0">
           <button type="button" onClick={() => scroll('left')} className="text-neutral-500 hover:text-neutral-400 transition-colors cursor-pointer">
@@ -206,8 +208,8 @@ export function LayoutTabBar({ tabs, activeId, onSelect, onClose, onReorder, cla
                 className={cn(
                   'group flex flex-col justify-start gap-0.5 px-2.5 rounded-t-lg cursor-pointer transition-all shrink-0 select-none relative border-t-2',
                   isActive
-                    ? cn('bg-neutral-800', borderC)
-                    : 'bg-neutral-800/50 text-neutral-400 hover:bg-neutral-800/80 hover:text-neutral-300 border-transparent opacity-60 hover:opacity-90',
+                    ? cn('bg-neutral-960', borderC)
+                    : 'bg-neutral-960/50 text-neutral-400 hover:bg-neutral-960/80 hover:text-neutral-300 border-transparent opacity-60 hover:opacity-90',
                   isDragged && 'opacity-50',
                 )}
                 style={{
@@ -233,15 +235,15 @@ export function LayoutTabBar({ tabs, activeId, onSelect, onClose, onReorder, cla
 
                 {/* Close button */}
                 {tab.closable && onClose && (
-                  <span
-                    role="button"
+                  <button
+                    type="button"
+                    aria-label={`Close ${tab.title}`}
                     tabIndex={-1}
                     onClick={(e) => { e.stopPropagation(); onClose(tab.id) }}
-                    onKeyDown={(e) => { if (e.key === 'Enter') { e.stopPropagation(); onClose(tab.id) } }}
                     className="absolute right-1.5 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 hover:bg-neutral-700 rounded p-0.5 transition-opacity cursor-pointer"
                   >
                     <X className="w-3 h-3" />
-                  </span>
+                  </button>
                 )}
               </button>
 
@@ -269,7 +271,7 @@ export function LayoutTabBar({ tabs, activeId, onSelect, onClose, onReorder, cla
         const ghostSubIconC = getTextClass(t.subtitleIconColor || t.subtitleColor || t.selectedColor || t.color)
         return (
           <div className="fixed z-50 pointer-events-none opacity-90" style={{ left: drag.x + 12, top: drag.y - 20 }}>
-            <div className={cn('flex flex-col gap-0.5 px-2.5 py-1.5 rounded-t-lg border-t-2 shadow-xl bg-neutral-800', ghostBorder)}>
+            <div className={cn('flex flex-col gap-0.5 px-2.5 py-1.5 rounded-t-lg border-t-2 shadow-lg bg-neutral-960', ghostBorder)}>
               <div className="flex items-center gap-1.5">
                 {t.icon && <span className={cn('shrink-0 inline-flex', ghostIconC)} style={{ width: 14, height: 14 }}>{t.icon}</span>}
                 <span className={cn('text-md font-medium', ghostTitleC)}>{t.title}</span>

package/components/ui/modal.tsx

@@ -1,10 +1,12 @@
-import { useRef, useState } from 'react'
+import { useId, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { Info, AlertTriangle, AlertCircle, Check } from 'lucide-react'
 import { useModalBehavior } from '../hooks/use-modal-behavior.ts'
 import { IconButton, type ActionItem } from './icon-button.tsx'
 import { FormActions } from './form-actions.tsx'
 import type { ReactNode } from 'react'
+import type { FormColor } from '../lib/form-colors.ts'
+import { useAccentColor, AccentColorProvider } from '../lib/accent-context.ts'
 
 export type ModalKind = 'info' | 'warning' | 'error' | 'orange' | 'success'
 export type ModalSize = 'sm' | 'md' | 'lg' | 'xl'
@@ -42,35 +44,39 @@ interface ModalProps {
 
 function Modal({ isOpen, onClose, title, children, kind = 'info', size = 'md', hideCloseButton = false, headerActions, testId }: ModalProps) {
   const modalRef = useRef<HTMLDivElement>(null)
+  const titleId = useId()
 
-  useModalBehavior(isOpen, onClose)
+  useModalBehavior(isOpen, onClose, modalRef)
 
   if (!isOpen) return null
 
   return createPortal(
     <div className="fixed inset-0 z-50 flex items-center justify-center">
-      <div className="absolute inset-0 bg-[var(--dialog-backdrop)] backdrop-blur-sm" onClick={onClose} />
+      <div className="absolute inset-0 bg-[var(--dialog-backdrop)]" onClick={onClose} aria-hidden="true" />
       <div
         ref={modalRef}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={titleId}
         data-testid={testId}
-        className={`relative bg-neutral-900 border border-neutral-700 rounded-xl shadow-2xl ${SIZE_CLASSES[size]} w-full mx-4 overflow-hidden`}
+        className={`relative bg-neutral-980 border border-neutral-700 rounded-lg shadow-lg ${SIZE_CLASSES[size]} w-full mx-4 overflow-hidden`}
       >
-        <div className="flex items-center gap-3 px-5 py-4 border-b border-neutral-800">
+        <div className="flex items-center gap-3 px-4 py-4 border-b border-neutral-960">
           {KIND_ICON[kind]}
-          <h3 className="text-lg font-semibold text-white flex-1">{title}</h3>
+          <h3 id={titleId} className="text-lg font-semibold text-white flex-1 min-w-0 truncate">{title}</h3>
           {headerActions?.map((a, i) => <IconButton key={i} {...a} />)}
           {!hideCloseButton && (
             <IconButton
               icon="x"
               onClick={onClose}
               size="sm"
-              color="neutral"
+              accentColor="neutral"
               tooltip={{ description: 'Close this modal' }}
               testId="modal-close"
             />
           )}
         </div>
-        <div className="px-5 py-4">{children}</div>
+        <div className="px-4 py-4">{children}</div>
       </div>
     </div>,
     document.body,
@@ -89,6 +95,7 @@ export interface ConfirmModalProps {
   confirmColor?: 'red' | 'blue' | 'orange' | 'yellow'
   isLoading?: boolean
   confirmDisabled?: boolean
+  accentColor?: FormColor
 }
 
 export function ConfirmModal({
@@ -103,7 +110,10 @@ export function ConfirmModal({
   confirmColor = 'blue',
   isLoading = false,
   confirmDisabled = false,
+  accentColor: accentColorProp,
 }: ConfirmModalProps) {
+  const contextAccent = useAccentColor()
+  const effectiveColor = accentColorProp ?? contextAccent ?? 'blue'
   const [isConfirming, setIsConfirming] = useState(false)
 
   const isDisabled = isLoading || isConfirming || confirmDisabled
@@ -122,6 +132,7 @@ export function ConfirmModal({
   }
 
   return (
+    <AccentColorProvider value={effectiveColor}>
     <Modal isOpen={isOpen} onClose={onClose} title={title} kind={kind} hideCloseButton>
       <div className="text-neutral-300 mb-6">
         {message}
@@ -150,6 +161,7 @@ export function ConfirmModal({
         confirmStatus={isInProgress ? 'loading' : undefined}
       />
     </Modal>
+    </AccentColorProvider>
   )
 }
 
@@ -159,6 +171,7 @@ export interface AlertModalProps {
   title: string
   message: string
   kind?: ModalKind
+  accentColor?: FormColor
 }
 
 export function AlertModal({
@@ -167,8 +180,12 @@ export function AlertModal({
   title,
   message,
   kind = 'info',
+  accentColor: accentColorProp,
 }: AlertModalProps) {
+  const contextAccent = useAccentColor()
+  const effectiveColor = accentColorProp ?? contextAccent ?? 'blue'
   return (
+    <AccentColorProvider value={effectiveColor}>
     <Modal isOpen={isOpen} onClose={onClose} title={title} kind={kind} hideCloseButton>
       <div className="text-neutral-300 mb-6">{message}</div>
       <FormActions
@@ -178,5 +195,6 @@ export function AlertModal({
         confirmTooltip="Dismiss this alert"
       />
     </Modal>
+    </AccentColorProvider>
   )
 }

package/components/ui/nav-card.tsx

@@ -3,6 +3,7 @@
 import { iconMap, type IconName } from './icon-button.tsx'
 import { Label, type LabelColor } from './label.tsx'
 import { cn } from '../lib/cn.ts'
+import type { FormColor } from '../lib/form-colors.ts'
 
 export interface NavCardProps {
   title: string
@@ -11,11 +12,12 @@ export interface NavCardProps {
   /** Custom icon component. Takes precedence over icon name. */
   IconComponent?: React.ComponentType<{ className?: string }>
   iconColor?: string
-  label?: { text: string; color: LabelColor; tooltip: { description: string } }
+  label?: { text: string; color: LabelColor; icon?: IconName; tooltip: { description: string } }
   stats?: string
   onClick?: () => void
   disabled?: boolean
   className?: string
+  accentColor?: FormColor
 }
 
 export function NavCard({
@@ -29,6 +31,7 @@ export function NavCard({
   onClick,
   disabled = false,
   className,
+  accentColor: _accentColor,
 }: NavCardProps) {
   const Icon = IconComponent ?? (icon ? iconMap[icon] : undefined)
 
@@ -38,7 +41,7 @@ export function NavCard({
       onClick={disabled ? undefined : onClick}
       disabled={disabled}
       className={cn(
-        'relative w-full text-left rounded-lg border border-neutral-700 bg-neutral-800 p-4 transition-all duration-200 cursor-pointer',
+        'relative w-full text-left rounded-lg border border-neutral-700 bg-neutral-960 p-4 transition-all duration-200 cursor-pointer',
         !disabled && 'hover:-translate-y-0.5 hover:border-neutral-600 hover:bg-neutral-700',
         disabled && 'opacity-50 cursor-not-allowed',
         className,
@@ -46,7 +49,7 @@ export function NavCard({
     >
       {label && (
         <span className="absolute top-3 right-3">
-          <Label text={label.text} color={label.color} size="xs" tooltip={label.tooltip} />
+          <Label text={label.text} accentColor={label.color} icon={label.icon} size="xs" tooltip={label.tooltip} />
         </span>
       )}
 
@@ -59,7 +62,7 @@ export function NavCard({
         </div>
       )}
 
-      <h3 className="text-md font-medium text-neutral-200">{title}</h3>
+      <h3 className="text-md font-medium text-neutral-200 truncate">{title}</h3>
 
       {description && (
         <p className="mt-1 text-sm text-neutral-500 leading-relaxed line-clamp-2">{description}</p>