@toolr/ui-design 0.1.7 → 0.1.8

package/components/ui/navigation-bar.tsx

@@ -139,7 +139,7 @@ export function NavigationBar({
                 active={historyOpen}
               />
               {historyOpen && hasHistoryEntries && (
-                <div className="absolute left-0 top-full mt-1 w-max min-w-[200px] max-w-[420px] bg-neutral-800 border border-neutral-700 rounded-lg shadow-xl z-50">
+                <div className="absolute left-0 top-full mt-1 w-max min-w-[200px] max-w-[420px] bg-neutral-800 border border-neutral-700 rounded-lg shadow-lg z-50">
                   <div className="px-3 py-1.5 border-b border-neutral-700/50">
                     <p className="text-sm font-medium text-neutral-500">History</p>
                   </div>
@@ -185,14 +185,14 @@ export function NavigationBar({
           const colors = segment.color && ACCENT_NAV[segment.color as AccentColor] ? ACCENT_NAV[segment.color as AccentColor] : null
 
           return (
-            <div key={segment.id} className="flex items-center gap-1">
+            <div key={segment.id} className="flex items-center gap-1 min-w-0">
               {index > 0 && <SegmentSeparator type={separator} size={size} />}
               {isClickable ? (
                 <button
                   type="button"
                   onClick={segment.onClick}
                   className={cn(
-                    'flex items-center gap-1.5 px-2 py-0.5 rounded-md transition-colors cursor-pointer',
+                    'flex items-center gap-1.5 px-2 py-0.5 rounded-md transition-colors cursor-pointer min-w-0',
                     s.text,
                     'font-medium hover:text-white',
                     colors ? [colors.text, `hover:${colors.bg}`] : ['text-neutral-300', 'hover:bg-neutral-700/50'],
@@ -204,7 +204,7 @@ export function NavigationBar({
               ) : (
                 <div
                   className={cn(
-                    'flex items-center gap-1.5 px-2 py-0.5 rounded-md',
+                    'flex items-center gap-1.5 px-2 py-0.5 rounded-md min-w-0',
                     s.text,
                     isLast
                       ? ['font-medium bg-neutral-700/50', colors ? colors.text : 'text-white']

package/components/ui/number-input.tsx

@@ -13,6 +13,8 @@ export interface NumberInputProps {
   size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg'
   disabled?: boolean
   className?: string
+  /** Accessible label — required for screen readers */
+  'aria-label'?: string
 }
 
 const SIZE_CONFIG = {
@@ -39,6 +41,7 @@ export function NumberInput({
   size = 'sm',
   disabled = false,
   className = '',
+  'aria-label': ariaLabel,
 }: NumberInputProps) {
   const [focused, setFocused] = useState(false)
   const [editText, setEditText] = useState<string | null>(null)
@@ -92,6 +95,7 @@ export function NumberInput({
         ref={inputRef}
         type="text"
         inputMode="numeric"
+        aria-label={ariaLabel}
         value={editText ?? value}
         onChange={(e) => setEditText(e.target.value)}
         onFocus={() => {
@@ -128,6 +132,7 @@ export function NumberInput({
       >
         <button
           type="button"
+          aria-label="Increase value"
           tabIndex={-1}
           onMouseDown={(e) => e.preventDefault()}
           onClick={() => nudge(1)}
@@ -145,6 +150,7 @@ export function NumberInput({
         <div className={`border-t ${fc.border}`} />
         <button
           type="button"
+          aria-label="Decrease value"
           tabIndex={-1}
           onMouseDown={(e) => e.preventDefault()}
           onClick={() => nudge(-1)}

package/components/ui/segmented-toggle.tsx

@@ -136,6 +136,8 @@ export function SegmentedToggle<T extends string>({
         return (
           <Tooltip key={option.value} content={option.tooltip} position={tooltipPosition}>
             <button
+              aria-pressed={isActive}
+              aria-label={option.label || (typeof option.tooltip.description === 'string' ? option.tooltip.description : undefined)}
               onClick={() => onChange(option.value)}
               disabled={disabled}
               className={`flex items-center justify-center ${sizeClass} ${rounding} font-medium transition-all cursor-pointer ${

package/components/ui/select.tsx

@@ -110,6 +110,8 @@ export function Select<T extends string | number = string>({
       <button
         ref={buttonRef}
         type="button"
+        aria-expanded={isOpen}
+        aria-haspopup="listbox"
         onClick={() => !disabled && (isOpen ? close() : open())}
         disabled={disabled}
         className={`flex items-center gap-1.5 min-w-0 rounded-lg border ${v.bg} ${FORM_COLORS[color].border} text-neutral-200 focus:outline-none ${FORM_COLORS[color].focus} transition-colors ${
@@ -117,7 +119,7 @@ export function Select<T extends string | number = string>({
         } ${s}`}
       >
         {selectedOption?.icon}
-        <span className={`whitespace-nowrap ${selectedOption ? '' : 'text-neutral-500'}`}>
+        <span className={`truncate ${selectedOption ? '' : 'text-neutral-500'}`}>
           {selectedOption?.label ?? placeholder}
         </span>
         <ChevronDown className={`w-3 h-3 ml-auto text-neutral-500 transition-transform shrink-0 ${isOpen ? 'rotate-180' : ''}`} />
@@ -125,7 +127,8 @@ export function Select<T extends string | number = string>({
       {isOpen && menuPos && createPortal(
         <div
           ref={menuRef}
-          className={`fixed z-[9999] whitespace-nowrap ${v.menuBg} border ${FORM_COLORS[color].border} rounded-lg shadow-xl overflow-hidden`}
+          role="listbox"
+          className={`fixed z-[9999] whitespace-nowrap ${v.menuBg} border ${FORM_COLORS[color].border} rounded-lg shadow-lg overflow-hidden`}
           style={{
             top: menuPos.top,
             left: align === 'right' ? undefined : menuPos.left,
@@ -151,7 +154,7 @@ export function Select<T extends string | number = string>({
               >
                 <Check className={`w-3 h-3 shrink-0 ${isSelected ? FORM_COLORS[color].accent : 'invisible'}`} />
                 {opt.icon}
-                <span>{opt.label}</span>
+                <span className="truncate">{opt.label}</span>
               </button>
             )
           })}

package/components/ui/selection-grid.tsx

@@ -180,6 +180,8 @@ function GridCard({ item, selected, onClick }: CardProps) {
   return (
     <button
       type="button"
+      aria-pressed={selected}
+      aria-label={item.name}
       onClick={onClick}
       disabled={item.disabled}
       className={cn(
@@ -219,6 +221,8 @@ function ListCard({ item, selected, onClick }: CardProps) {
   return (
     <button
       type="button"
+      aria-pressed={selected}
+      aria-label={item.name}
       onClick={onClick}
       disabled={item.disabled}
       className={cn(

package/components/ui/setting-row.tsx

@@ -14,6 +14,7 @@
 import { Toggle, type ToggleColor, type ToggleSize } from './toggle.tsx'
 import { Select, type SelectOption } from './select.tsx'
 import { Input } from './input.tsx'
+import { cn } from '../lib/cn.ts'
 
 interface SettingRowBase {
   label: string
@@ -51,10 +52,10 @@ interface SettingRowInput extends SettingRowBase {
 export type SettingRowProps = SettingRowToggle | SettingRowSelect | SettingRowInput
 
 export function SettingRow(props: SettingRowProps) {
-  const { label, description, disabled, className = '' } = props
+  const { label, description, disabled, className } = props
 
   return (
-    <div className={`flex items-start justify-between gap-4 ${className}`}>
+    <div className={cn('flex items-start justify-between gap-4', className)}>
       <div>
         <label className="text-neutral-200 leading-7">{label}</label>
         {description && <p className="text-md text-neutral-500">{description}</p>}
@@ -66,6 +67,7 @@ export function SettingRow(props: SettingRowProps) {
           disabled={disabled}
           color={props.color}
           size={props.size}
+          aria-label={label}
         />
       )}
       {props.type === 'select' && (

package/components/ui/settings-card.tsx

@@ -16,8 +16,8 @@ export function SettingsCard({ children, className, title, description, testId }
     >
       {title && (
         <div>
-          <h3 className="text-md font-medium text-neutral-200">{title}</h3>
-          {description && <p className="text-md text-neutral-500 mt-1">{description}</p>}
+          <h3 className="text-md font-medium text-neutral-200 truncate">{title}</h3>
+          {description && <p className="text-md text-neutral-500 mt-1 line-clamp-2">{description}</p>}
         </div>
       )}
       {!title && description && <p className="text-md text-neutral-500">{description}</p>}

package/components/ui/settings-info-box.tsx

@@ -52,8 +52,7 @@ export function SettingsInfoBox({ children, color = 'neutral', className, testId
 
   return (
     <div
-      className={cn('flex items-start gap-3 border-l-2', borderColorMap[color], className)}
-      style={{ paddingLeft: 10 }}
+      className={cn('flex items-start gap-3 border-l-2 pl-2.5', borderColorMap[color], className)}
       data-testid={testId}
     >
       <Icon className={cn('w-4 h-4 mt-0.5 shrink-0', ACCENT_TEXT[color])} />

package/components/ui/sort-dropdown.tsx

@@ -73,22 +73,25 @@ export function SortDropdown({
   return (
     <div className="relative flex items-center" ref={ref} onKeyDown={handleKeyDown}>
       <button
+        aria-expanded={isOpen}
+        aria-haspopup="listbox"
         onClick={() => setIsOpen(!isOpen)}
         className={`flex items-center gap-1.5 h-7 px-2 rounded-md border ${v.bg} text-sm transition-colors cursor-pointer ${FORM_COLORS[color].border} text-neutral-200 ${FORM_COLORS[color].hover}`}
       >
-        <span
-          className={`${FORM_COLORS[color].accent} hover:brightness-125 transition-colors`}
+        <button
+          type="button"
+          aria-label={ascending ? 'Sort descending' : 'Sort ascending'}
+          className={`${FORM_COLORS[color].accent} hover:brightness-125 transition-colors cursor-pointer`}
           onClick={(e) => { e.stopPropagation(); onToggleDirection() }}
-          role="button"
         >
           <DirIcon className="w-3 h-3" />
-        </span>
+        </button>
         <span className="whitespace-nowrap">{current.label}</span>
         <ChevronDown className={`w-3 h-3 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
       </button>
 
       {isOpen && (
-        <div ref={menuRef} className={`absolute right-0 top-full z-50 mt-1 min-w-[140px] bg-[var(--popover)] border ${FORM_COLORS[color].border} rounded-lg shadow-xl overflow-hidden`}>
+        <div ref={menuRef} role="listbox" className={`absolute right-0 top-full z-50 mt-1 min-w-[140px] bg-[var(--popover)] border ${FORM_COLORS[color].border} rounded-lg shadow-lg overflow-hidden`}>
           {fields.map((f, idx) => (
             <button
               key={f.value}

package/components/ui/tab-bar.tsx

@@ -88,11 +88,12 @@ function TabBadge({ badge, size, badgeColor }: { badge: number | string; size: '
   return <Badge value={badge} color={badgeColor} size={s.badgeSize} className="flex-shrink-0" />
 }
 
-function CloseButton({ size, onClick }: { size: 'xss' | 'xs' | 'sm' | 'md' | 'lg'; onClick: () => void }) {
+function CloseButton({ size, onClick, tabLabel }: { size: 'xss' | 'xs' | 'sm' | 'md' | 'lg'; onClick: () => void; tabLabel: string }) {
   const s = sizeConfig[size]
   return (
     <button
       type="button"
+      aria-label={`Close ${tabLabel}`}
       onClick={(e) => {
         e.stopPropagation()
         onClick()
@@ -123,6 +124,8 @@ function CompactTab({
   return (
     <button
       type="button"
+      role="tab"
+      aria-selected={isActive}
       onClick={onSelect}
       className={cn(
         'relative flex items-center justify-center transition-colors cursor-pointer',
@@ -160,6 +163,8 @@ function UnderlineTab({
   return (
     <button
       type="button"
+      role="tab"
+      aria-selected={isActive}
       onClick={onSelect}
       className={cn(
         'group relative flex items-center whitespace-nowrap transition-colors cursor-pointer',
@@ -171,7 +176,7 @@ function UnderlineTab({
       {tab.icon && <TabIcon icon={tab.icon} size={size} color={isActive ? tab.color : undefined} />}
       <span>{tab.label}</span>
       {tab.badge !== undefined && <TabBadge badge={tab.badge} size={size} badgeColor={tab.badgeColor} />}
-      {showClose && <CloseButton size={size} onClick={onClose!} />}
+      {showClose && <CloseButton size={size} onClick={onClose!} tabLabel={tab.label} />}
       {isActive && (
         <span className={cn('absolute bottom-0 left-0 right-0 h-0.5 rounded-full', c.indicator)} />
       )}
@@ -189,6 +194,8 @@ function PillTab({
   return (
     <button
       type="button"
+      role="tab"
+      aria-selected={isActive}
       onClick={onSelect}
       className={cn(
         'group flex items-center whitespace-nowrap rounded-md transition-colors cursor-pointer',
@@ -202,7 +209,7 @@ function PillTab({
       {tab.icon && <TabIcon icon={tab.icon} size={size} color={isActive ? tab.color : undefined} />}
       <span>{tab.label}</span>
       {tab.badge !== undefined && <TabBadge badge={tab.badge} size={size} badgeColor={tab.badgeColor} />}
-      {showClose && <CloseButton size={size} onClick={onClose!} />}
+      {showClose && <CloseButton size={size} onClick={onClose!} tabLabel={tab.label} />}
     </button>
   )
 }
@@ -217,6 +224,8 @@ function CardTab({
   return (
     <button
       type="button"
+      role="tab"
+      aria-selected={isActive}
       onClick={onSelect}
       className={cn(
         'group relative flex items-center whitespace-nowrap transition-colors cursor-pointer rounded-t-lg border border-b-0',
@@ -230,7 +239,7 @@ function CardTab({
       {tab.icon && <TabIcon icon={tab.icon} size={size} color={isActive ? tab.color : undefined} />}
       <span>{tab.label}</span>
       {tab.badge !== undefined && <TabBadge badge={tab.badge} size={size} badgeColor={tab.badgeColor} />}
-      {showClose && <CloseButton size={size} onClick={onClose!} />}
+      {showClose && <CloseButton size={size} onClick={onClose!} tabLabel={tab.label} />}
       {isActive && (
         <span className="absolute -bottom-px left-0 right-0 h-px bg-neutral-800" />
       )}
@@ -277,6 +286,7 @@ export function TabBar({
   return (
     <div
       ref={containerRef}
+      role="tablist"
       className={cn(
         'flex items-end',
         variant === 'underline' && 'border-b border-neutral-700',

package/components/ui/toggle.tsx

@@ -8,6 +8,7 @@
  */
 
 import { type AccentColor } from '../lib/form-colors.ts'
+import { cn } from '../lib/cn.ts'
 
 export type ToggleColor = AccentColor
 
@@ -84,6 +85,8 @@ export interface ToggleProps {
   size?: ToggleSize
   className?: string
   color?: ToggleColor
+  /** Accessible label — required for screen readers */
+  'aria-label'?: string
   /** Test ID for E2E testing */
   testId?: string
 }
@@ -93,8 +96,9 @@ export function Toggle({
   onChange,
   disabled = false,
   size = 'sm',
-  className = '',
+  className,
   color = 'blue',
+  'aria-label': ariaLabel,
   testId,
 }: ToggleProps) {
   const s = TOGGLE_SIZES[size]
@@ -103,23 +107,27 @@ export function Toggle({
   return (
     <button
       type="button"
+      role="switch"
+      aria-checked={checked}
+      aria-label={ariaLabel}
       onClick={() => !disabled && onChange(!checked)}
       disabled={disabled}
       data-testid={testId}
       style={{ boxShadow: `inset 0 0 0 1px ${checked ? bc.active : bc.idle}` }}
-      className={`
-        relative ${s.track} rounded-full transition-all flex-shrink-0
-        cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed
-        ${checked ? TOGGLE_CHECKED_TRACK[color] : TOGGLE_UNCHECKED_TRACK[color]}
-        ${className}
-      `}
+      className={cn(
+        'relative rounded-full transition-all flex-shrink-0 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed',
+        s.track,
+        checked ? TOGGLE_CHECKED_TRACK[color] : TOGGLE_UNCHECKED_TRACK[color],
+        className,
+      )}
     >
       <span
         style={{ backgroundColor: checked ? kc.on : kc.off }}
-        className={`
-          block absolute top-0.5 left-0.5 ${s.knob} rounded-full transition-transform
-          ${checked ? s.translate : 'translate-x-0'}
-        `}
+        className={cn(
+          'block absolute top-0.5 left-0.5 rounded-full transition-transform',
+          s.knob,
+          checked ? s.translate : 'translate-x-0',
+        )}
       />
     </button>
   )

package/components/ui/tooltip.tsx

@@ -209,19 +209,18 @@ export function Tooltip({
     if (!triggerRef.current) return
     const triggerRect = triggerRef.current.getBoundingClientRect()
     const tooltipEl = tooltipRef.current
+    const tooltipRect = tooltipEl?.getBoundingClientRect()
 
     let resolvedPosition: ResolvedPosition = position === 'auto' ? 'top' : position
 
-    if (position === 'auto' && tooltipEl) {
-      const tooltipRect = tooltipEl.getBoundingClientRect()
+    if (position === 'auto' && tooltipRect) {
       resolvedPosition = resolveAutoPosition(triggerRect, tooltipRect)
       setActualPosition(resolvedPosition)
     }
 
     let newCoords = calculateBasePosition(triggerRect, resolvedPosition, align)
 
-    if (tooltipEl) {
-      const tooltipRect = tooltipEl.getBoundingClientRect()
+    if (tooltipRect) {
       newCoords = adjustForTooltipSize(newCoords, tooltipRect, resolvedPosition, align)
       newCoords = clampToViewport(newCoords, tooltipRect)
     }
@@ -248,7 +247,8 @@ export function Tooltip({
   const tooltipContent = (
     <div
       ref={tooltipRef}
-      className={`fixed px-3 py-1.5 bg-[var(--popover)] border border-neutral-600 rounded-lg shadow-xl z-[9999] ${interactive || trigger === 'click' ? '' : 'pointer-events-none'} ${multiline ? 'whitespace-pre-line' : 'whitespace-nowrap'}`}
+      role="tooltip"
+      className={`fixed px-3 py-1.5 bg-[var(--popover)] border border-neutral-600 rounded-lg shadow-lg z-[9999] ${interactive || trigger === 'click' ? '' : 'pointer-events-none'} ${multiline ? 'whitespace-pre-line' : 'whitespace-nowrap'}`}
       style={{
         top: coords.top,
         left: coords.left,

package/dist/index.d.ts

@@ -306,7 +306,7 @@ interface BadgeProps {
     className?: string;
     testId?: string;
 }
-declare function Badge({ value, color, size, className, testId, }: BadgeProps): react_jsx_runtime.JSX.Element;
+declare const Badge: react.NamedExoticComponent<BadgeProps>;
 
 type ConfirmBadgeColor = AccentColor;
 interface ConfirmBadgeProps {
@@ -315,7 +315,7 @@ interface ConfirmBadgeProps {
     className?: string;
     testId?: string;
 }
-declare function ConfirmBadge({ color, size, className, testId, }: ConfirmBadgeProps): react_jsx_runtime.JSX.Element;
+declare const ConfirmBadge: react.NamedExoticComponent<ConfirmBadgeProps>;
 
 type CheckboxSize = 'xss' | 'xs' | 'sm' | 'md' | 'lg';
 type CheckboxColor = AccentColor;
@@ -328,10 +328,12 @@ interface CheckboxProps {
     color?: CheckboxColor;
     variant?: CheckboxVariant;
     className?: string;
+    /** Accessible label — required for screen readers */
+    'aria-label'?: string;
     /** Test ID for E2E testing */
     testId?: string;
 }
-declare function Checkbox({ checked, onChange, disabled, size, color, variant, className, testId, }: CheckboxProps): react_jsx_runtime.JSX.Element;
+declare function Checkbox({ checked, onChange, disabled, size, color, variant, className, 'aria-label': ariaLabel, testId, }: CheckboxProps): react_jsx_runtime.JSX.Element;
 
 type ToggleColor = AccentColor;
 type ToggleSize = 'xss' | 'xs' | 'sm' | 'md' | 'lg';
@@ -342,10 +344,12 @@ interface ToggleProps {
     size?: ToggleSize;
     className?: string;
     color?: ToggleColor;
+    /** Accessible label — required for screen readers */
+    'aria-label'?: string;
     /** Test ID for E2E testing */
     testId?: string;
 }
-declare function Toggle({ checked, onChange, disabled, size, className, color, testId, }: ToggleProps): react_jsx_runtime.JSX.Element;
+declare function Toggle({ checked, onChange, disabled, size, className, color, 'aria-label': ariaLabel, testId, }: ToggleProps): react_jsx_runtime.JSX.Element;
 
 interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size' | 'type'> {
     value: string;
@@ -375,8 +379,10 @@ interface NumberInputProps {
     size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg';
     disabled?: boolean;
     className?: string;
+    /** Accessible label — required for screen readers */
+    'aria-label'?: string;
 }
-declare function NumberInput({ value, onChange, min, max, step, variant, color, size, disabled, className, }: NumberInputProps): react_jsx_runtime.JSX.Element;
+declare function NumberInput({ value, onChange, min, max, step, variant, color, size, disabled, className, 'aria-label': ariaLabel, }: NumberInputProps): react_jsx_runtime.JSX.Element;
 
 type ScopeType = 'user' | 'project' | 'local' | 'read-only';
 interface ScopeBadgeProps {
@@ -2626,9 +2632,9 @@ declare function useClickOutside(ref: RefObject<HTMLElement | null> | RefObject<
 declare function useDropdownMaxHeight<T extends HTMLElement>(isOpen: boolean, margin?: number): react.RefObject<T | null>;
 
 /**
- * Shared modal behavior: Escape key to close + body overflow lock.
+ * Shared modal behavior: Escape key to close + body overflow lock + focus trap.
  */
-declare function useModalBehavior(isOpen: boolean, onClose: () => void): void;
+declare function useModalBehavior(isOpen: boolean, onClose: () => void, containerRef?: RefObject<HTMLElement | null>): void;
 
 /** Hook for managing back/forward navigation history with a breadcrumb segment stack. */