@12-apps/ui 1.23.0 → 2.1.0

package/src/components/feedback/Dialog/Dialog.types.ts

@@ -1,8 +1,9 @@
+import type { SizeValue } from '../../../tokens/scales';
 import type { DialogProps as MuiDialogProps } from '@mui/material';
 import type { ReactNode } from 'react';
 
 export type DialogVariant = 'default' | 'glass' | 'fullscreen' | 'drawer';
-export type DialogSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type DialogSize = SizeValue;
 
 export interface DialogProps extends Omit<MuiDialogProps, 'variant' | 'title'> {
   children: ReactNode;

package/src/components/feedback/Modal/Modal.types.ts

@@ -1,8 +1,9 @@
+import type { SizeValue } from '../../../tokens/scales';
 import type { ModalProps as MuiModalProps } from '@mui/material';
 import type { ReactNode } from 'react';
 
 export type ModalVariant = 'center' | 'top' | 'bottom' | 'glass';
-export type ModalSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type ModalSize = SizeValue;
 
 export interface ModalProps extends Omit<MuiModalProps, 'children'> {
   children: ReactNode;

package/src/components/form/Button/Button.types.ts

@@ -1,3 +1,4 @@
+import type { ColorValue, SizeValue } from '../../../tokens/scales';
 import type { ButtonProps as MuiButtonProps } from '@mui/material';
 import type * as React from 'react';
 
@@ -10,12 +11,12 @@ export interface ButtonProps extends Omit<MuiButtonProps, 'variant' | 'color' |
   /**
    * The color of the button
    */
-  color?: 'primary' | 'secondary' | 'success' | 'warning' | 'info' | 'danger' | 'neutral';
+  color?: ColorValue;
   
   /**
    * The size of the button
    */
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  size?: SizeValue;
   
   /**
    * Whether the button is in loading state

package/src/components/form/Calendar/CalendarMonth.tsx

@@ -102,7 +102,12 @@ export const CalendarMonth: FC<CalendarMonthProps> = ({
   const title = renderHeader ? renderHeader({ month: matrix.month, year: matrix.year }) : monthName;
 
   return (
-    <Box sx={{ minWidth: 280 }}>
+    /* The month is addressable by its position, because in a multi-month
+       calendar every day number appears once PER MONTH — `calendar-date-5` is
+       January's 5th and February's. Without a per-month hook a test can only
+       reach a day positionally, which is exactly what the flakiness gate
+       refuses. Additive: `calendar-grid` below is unchanged. */
+    <Box sx={{ minWidth: 280 }} data-testid={`calendar-month-${monthIndex}`}>
       <MonthNavHeader
         title={title}
         showPrevious={monthIndex === 0}

package/src/components/form/Command/Command.styles.ts

@@ -2,6 +2,7 @@ import { alpha } from '@mui/material';
 import type { CSSObject, Theme } from '@mui/material';
 
 import type { CommandProps } from './Command.types';
+import { accentFor } from '../../../tokens/scales';
 
 type CommandVariant = NonNullable<CommandProps['variant']>;
 type CommandColor = NonNullable<CommandProps['color']>;
@@ -24,14 +25,14 @@ const emphasisStyles = (
   pulse: boolean,
 ): CSSObject => ({
   ...(glow && {
-    boxShadow: `0 0 20px ${alpha(theme.palette[color].main, 0.4)}`,
+    boxShadow: `0 0 20px ${alpha(accentFor(theme, color).main, 0.4)}`,
   }),
   ...(pulse && {
     animation: 'pulse 2s infinite',
     '@keyframes pulse': {
-      '0%': { boxShadow: `0 0 0 0 ${alpha(theme.palette[color].main, 0.4)}` },
-      '70%': { boxShadow: `0 0 0 10px ${alpha(theme.palette[color].main, 0)}` },
-      '100%': { boxShadow: `0 0 0 0 ${alpha(theme.palette[color].main, 0)}` },
+      '0%': { boxShadow: `0 0 0 0 ${alpha(accentFor(theme, color).main, 0.4)}` },
+      '70%': { boxShadow: `0 0 0 10px ${alpha(accentFor(theme, color).main, 0)}` },
+      '100%': { boxShadow: `0 0 0 0 ${alpha(accentFor(theme, color).main, 0)}` },
     },
   }),
 });
@@ -46,12 +47,12 @@ const surfaceStyles = (
       return {
         backgroundColor: alpha(theme.palette.background.paper, 0.1),
         backdropFilter: 'blur(20px)',
-        border: `1px solid ${alpha(theme.palette[color].main, 0.2)}`,
+        border: `1px solid ${alpha(accentFor(theme, color).main, 0.2)}`,
       };
     case 'gradient':
       return {
-        background: `linear-gradient(135deg, ${theme.palette[color].main}, ${theme.palette[color].dark})`,
-        color: theme.palette[color].contrastText,
+        background: `linear-gradient(135deg, ${accentFor(theme, color).main}, ${accentFor(theme, color).dark})`,
+        color: accentFor(theme, color).contrastText,
       };
     case 'elevated':
       return { boxShadow: theme.shadows[8] };

package/src/components/form/Command/Command.types.ts

@@ -1,3 +1,4 @@
+import type { ColorValue, SizeValue } from '../../../tokens/scales';
 import type { CSSProperties,ReactNode } from 'react';
 
 export interface CommandItem {
@@ -21,8 +22,8 @@ export interface CommandProps {
   onValueChange?: (value: string) => void;
   onSelect?: (item: CommandItem) => void;
   variant?: 'default' | 'glass' | 'gradient' | 'minimal' | 'elevated';
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-  color?: 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info';
+  size?: SizeValue;
+  color?: Exclude<ColorValue, 'neutral'>;
   glow?: boolean;
   pulse?: boolean;
   loading?: boolean;

package/src/components/form/CreatableSelect/CreatableSelect.types.ts

@@ -1,3 +1,4 @@
+import type { SizeValue } from '../../../tokens/scales';
 /** One selectable option: a stable `value` and its human `label`. */
 export interface CreatableSelectOption {
   value: string;
@@ -44,7 +45,7 @@ export interface CreatableSelectProps {
    * Control height, matching {@link Input}'s scale so the two line up when they
    * share a grid row (default: `md`).
    */
-  size?: 'sm' | 'md';
+  size?: Extract<SizeValue, 'sm' | 'md'>;
   /** Base test id; the input is `<dataTestId>-input`. */
   dataTestId?: string;
 }

package/src/components/form/Input/Input.types.ts

@@ -1,9 +1,10 @@
+import type { SizeValue } from '../../../tokens/scales';
 import type { InputLabelProps as MuiInputLabelProps } from '@mui/material';
 import type { InputHTMLAttributes, ReactNode } from 'react';
 import type React from 'react';
 
 export type InputVariant = 'outlined' | 'filled' | 'glass' | 'underline' | 'gradient';
-export type InputSize = 'sm' | 'md' | 'lg';
+export type InputSize = Extract<SizeValue, 'sm' | 'md' | 'lg'>;
 
 export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'color'> {
   variant?: InputVariant;

package/src/components/form/InputOTP/InputOTP.types.ts

@@ -1,3 +1,4 @@
+import type { ColorValue, SizeValue } from '../../../tokens/scales';
 
 export interface InputOTPProps {
   /**
@@ -8,12 +9,12 @@ export interface InputOTPProps {
   /**
    * The color theme of the OTP input
    */
-  color?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'neutral';
+  color?: Exclude<ColorValue, 'info'>;
   
   /**
    * The size of the OTP input
    */
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  size?: SizeValue;
   
   /**
    * Number of OTP digits

package/src/components/form/Label/Label.styles.ts

@@ -2,6 +2,7 @@ import { alpha } from '@mui/material';
 import type { CSSObject, Theme } from '@mui/material';
 
 import type { LabelProps } from './Label.types';
+import { accentFor} from '../../../tokens/scales';
 
 type Size = NonNullable<LabelProps['size']>;
 type Variant = NonNullable<LabelProps['variant']>;
@@ -53,8 +54,8 @@ export interface LabelStyleFlags {
 export const textColor = (theme: Theme, flags: LabelStyleFlags): string => {
   if (flags.error) return theme.palette.error.main;
   if (flags.disabled) return theme.palette.text.disabled;
-  if (flags.color === 'default') return theme.palette.text.primary;
-  return theme.palette[flags.color].main;
+  if (flags.color === 'neutral') return theme.palette.text.primary;
+  return accentFor(theme, flags.color).main;
 };
 
 /** The ripple that expands from the centre on press, for clickable labels. */
@@ -119,7 +120,9 @@ const SURFACES: Record<Variant, (input: SurfaceInput) => CSSObject> = {
   }),
 
   gradient: ({ theme, flags }) => {
-    const key = flags.color === 'default' ? 'primary' : flags.color;
+    // `neutral` has no accent of its own in the gradient; it borrows primary,
+    // which is what this branch already did before the vocabulary was named.
+    const accent = accentFor(theme, flags.color === 'neutral' ? 'primary' : flags.color);
     // The gradient paints the glyphs themselves rather than the box behind them.
     const clip = {
       WebkitBackgroundClip: 'text',
@@ -128,11 +131,11 @@ const SURFACES: Record<Variant, (input: SurfaceInput) => CSSObject> = {
     };
 
     return {
-      background: `linear-gradient(135deg, ${theme.palette[key].light}, ${theme.palette[key].main})`,
+      background: `linear-gradient(135deg, ${accent.light}, ${accent.main})`,
       ...clip,
       '&:hover': flags.clickable
         ? {
-            background: `linear-gradient(135deg, ${theme.palette[key].main}, ${theme.palette[key].dark})`,
+            background: `linear-gradient(135deg, ${accent.main}, ${accent.dark})`,
             ...clip,
           }
         : {},

package/src/components/form/Label/Label.tsx

@@ -14,7 +14,7 @@ const DEFAULTS = {
   error: false,
   variant: 'default',
   size: 'md',
-  color: 'default',
+  color: 'neutral',
   glow: false,
   pulse: false,
   ripple: false,

package/src/components/form/Label/Label.types.ts

@@ -1,3 +1,4 @@
+import type { ColorValue, SizeValue } from '../../../tokens/scales';
 import type { CSSProperties, HTMLAttributes,ReactNode } from 'react';
 
 export interface LabelProps extends HTMLAttributes<globalThis.HTMLLabelElement> {
@@ -7,8 +8,8 @@ export interface LabelProps extends HTMLAttributes<globalThis.HTMLLabelElement>
   disabled?: boolean;
   error?: boolean;
   variant?: 'default' | 'filled' | 'outlined' | 'glass' | 'gradient' | 'minimal';
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-  color?: 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info' | 'default';
+  size?: SizeValue;
+  color?: ColorValue;
   glow?: boolean;
   pulse?: boolean;
   glass?: boolean;

package/src/components/form/Menubar/Menubar.styles.ts

@@ -2,6 +2,7 @@ import { alpha } from '@mui/material';
 import type { CSSObject, Theme } from '@mui/material';
 
 import type { MenubarProps } from './Menubar.types';
+import { accentFor} from '../../../tokens/scales';
 
 type Size = NonNullable<MenubarProps['size']>;
 type Variant = NonNullable<MenubarProps['variant']>;
@@ -20,13 +21,13 @@ export const sizeStyles = (theme: Theme, size: Size): CSSObject =>
 
 /** `default` is not a palette entry — it means the paper surface and its text. */
 const accentOf = (theme: Theme, color: Color) =>
-  color === 'default' ? theme.palette.primary.main : theme.palette[color].main;
+  color === 'neutral' ? theme.palette.primary.main : accentFor(theme, color).main;
 
 const colorStyles = (theme: Theme, color: Color, transparent: boolean): CSSObject => {
   const surface =
-    color === 'default'
+    color === 'neutral'
       ? { backgroundColor: theme.palette.background.paper, color: theme.palette.text.primary }
-      : { backgroundColor: theme.palette[color].main, color: theme.palette[color].contrastText };
+      : { backgroundColor: accentFor(theme, color).main, color: accentFor(theme, color).contrastText };
 
   return transparent ? { ...surface, backgroundColor: 'transparent' } : surface;
 };
@@ -57,12 +58,13 @@ const SURFACES: Record<Variant, (theme: Theme, flags: MenubarStyleFlags) => CSSO
   }),
 
   gradient: (theme, { color, gradient }) => {
-    const key = color === 'default' ? 'primary' : color;
+    // `neutral` borrows primary for the gradient, as this branch always did.
+    const accent = accentFor(theme, color === 'neutral' ? 'primary' : color);
     return {
       background: gradient
-        ? `linear-gradient(135deg, ${theme.palette[key].light}, ${theme.palette[key].dark})`
-        : theme.palette[key].main,
-      color: theme.palette[key].contrastText,
+        ? `linear-gradient(135deg, ${accent.light}, ${accent.dark})`
+        : accent.main,
+      color: accent.contrastText,
     };
   },
 
@@ -80,7 +82,7 @@ const SURFACES: Record<Variant, (theme: Theme, flags: MenubarStyleFlags) => CSSO
   bordered: (theme, { blur, color }) => ({
     ...(blur && { backdropFilter: 'blur(10px)' }),
     borderBottom: `2px solid ${
-      color === 'default' ? theme.palette.divider : theme.palette[color].main
+      color === 'neutral' ? theme.palette.divider : accentFor(theme, color).main
     }`,
   }),
 

package/src/components/form/Menubar/Menubar.tsx

@@ -18,6 +18,7 @@ import { withDefaults } from '../../../utils/withDefaults';
 import { useMenubarMenus } from './Menubar.hooks';
 import { barStyles } from './Menubar.styles';
 import { MenubarToolbar } from './Menubar.toolbar';
+
 import type {
   MenubarGroupProps,
   MenubarItem,
@@ -27,7 +28,7 @@ import type {
 const DEFAULTS = {
   variant: 'default',
   size: 'md',
-  color: 'default',
+  color: 'neutral',
   orientation: 'horizontal',
   glow: false,
   pulse: false,

package/src/components/form/Menubar/Menubar.types.ts

@@ -1,3 +1,4 @@
+import type { ColorValue, SizeValue } from '../../../tokens/scales';
 import type { CSSProperties,ReactNode } from 'react';
 
 export interface MenubarItem {
@@ -14,8 +15,8 @@ export interface MenubarItem {
 export interface MenubarProps {
   items: MenubarItem[];
   variant?: 'default' | 'glass' | 'gradient' | 'elevated' | 'minimal' | 'bordered';
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-  color?: 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info' | 'default';
+  size?: SizeValue;
+  color?: ColorValue;
   orientation?: 'horizontal' | 'vertical';
   glow?: boolean;
   pulse?: boolean;
@@ -47,8 +48,8 @@ export interface MenubarGroupProps {
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
   onClick?: (item: MenubarItem) => void;
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-  color?: 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info' | 'default';
+  size?: SizeValue;
+  color?: ColorValue;
   className?: string;
   style?: CSSProperties;
 }
@@ -56,8 +57,8 @@ export interface MenubarGroupProps {
 export interface MenubarItemProps extends MenubarItem {
   selected?: boolean;
   onClick?: () => void;
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-  color?: 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info' | 'default';
+  size?: SizeValue;
+  color?: ColorValue;
   showShortcut?: boolean;
   ripple?: boolean;
   className?: string;

package/src/components/form/RadioGroup/RadioGroup.types.ts

@@ -1,3 +1,4 @@
+import type { ColorValue, SizeValue } from '../../../tokens/scales';
 import type { RadioGroupProps as MuiRadioGroupProps } from '@mui/material';
 import type React from 'react';
 
@@ -18,12 +19,12 @@ export interface RadioGroupProps extends Omit<MuiRadioGroupProps, 'color'> {
   /**
    * The color theme of the radio group
    */
-  color?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'neutral';
+  color?: Exclude<ColorValue, 'info'>;
 
   /**
    * The size of the radio group
    */
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  size?: SizeValue;
 
   /**
    * Array of radio options

package/src/components/form/Select/Select.tsx

@@ -172,6 +172,18 @@ function renderMenuItems(
   return items;
 }
 
+/**
+ * The house scale as a FormControl size.
+ *
+ * Not `muiSize`: that collapses five onto MUI's three, and a FormControl takes
+ * only two. This component's scale is already narrowed to `sm | md`, so the map
+ * is exact rather than lossy.
+ */
+const formControlSize = (size: SelectProps['size']): 'small' | 'medium' | undefined => {
+  if (size === undefined) return undefined;
+  return size === 'sm' ? 'small' : 'medium';
+};
+
 export const Select = React.forwardRef<HTMLDivElement, SelectProps>(
   (
     {
@@ -202,7 +214,7 @@ export const Select = React.forwardRef<HTMLDivElement, SelectProps>(
     return (
       <StyledFormControl
         fullWidth={fullWidth}
-        size={size}
+        size={formControlSize(size)}
         error={error}
         customVariant={variant}
         glow={glow}

package/src/components/form/Select/Select.types.ts

@@ -1,3 +1,4 @@
+import type { SizeValue } from '../../../tokens/scales';
 import type { SelectProps as MuiSelectProps } from '@mui/material';
 
 export type SelectVariant = 'default' | 'glass' | 'gradient';
@@ -8,7 +9,9 @@ export interface SelectOption {
   disabled?: boolean;
 }
 
-export interface SelectProps extends Omit<MuiSelectProps, 'variant'> {
+// `size` is omitted alongside `variant`: MUI declares it in its own words
+// (`small | medium`), and this component speaks the house scale.
+export interface SelectProps extends Omit<MuiSelectProps, 'variant' | 'size'> {
   /**
    * Visual variant of the select component
    * @default 'default'
@@ -35,7 +38,7 @@ export interface SelectProps extends Omit<MuiSelectProps, 'variant'> {
    * Size of the select component
    * @default 'medium'
    */
-  size?: 'small' | 'medium';
+  size?: Extract<SizeValue, 'sm' | 'md'>;
   /**
    * Placeholder text when no option is selected
    */

package/src/components/form/Slider/Slider.types.ts

@@ -1,3 +1,4 @@
+import type { ColorValue, SizeValue } from '../../../tokens/scales';
 import type { SliderProps as MuiSliderProps } from '@mui/material';
 
 export interface SliderProps extends Omit<MuiSliderProps, 'color' | 'size'> {
@@ -9,12 +10,12 @@ export interface SliderProps extends Omit<MuiSliderProps, 'color' | 'size'> {
   /**
    * The color theme of the slider
    */
-  color?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'neutral';
+  color?: Exclude<ColorValue, 'info'>;
 
   /**
    * The size of the slider
    */
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  size?: SizeValue;
 
   /**
    * Label for the slider

package/src/components/form/Switch/Switch.types.ts

@@ -1,3 +1,4 @@
+import type { ColorValue, SizeValue } from '../../../tokens/scales';
 import type { SwitchProps as MuiSwitchProps } from '@mui/material';
 import type { FocusEventHandler,MouseEventHandler, ReactNode } from 'react';
 
@@ -10,12 +11,12 @@ export interface SwitchProps extends Omit<MuiSwitchProps, 'color' | 'size'> {
   /**
    * The color theme of the switch
    */
-  color?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'neutral';
+  color?: Exclude<ColorValue, 'info'>;
   
   /**
    * The size of the switch
    */
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  size?: SizeValue;
   
   /**
    * Label text for the switch

package/src/components/form/Textarea/Textarea.types.ts

@@ -1,3 +1,4 @@
+import type { ColorValue, SizeValue } from '../../../tokens/scales';
 import type { TextareaAutosizeProps } from '@mui/material';
 import type React from 'react';
 
@@ -10,12 +11,12 @@ export interface TextareaProps extends Omit<TextareaAutosizeProps, 'variant' | '
   /**
    * The color theme of the textarea
    */
-  color?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'neutral';
+  color?: Exclude<ColorValue, 'info'>;
   
   /**
    * The size of the textarea
    */
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  size?: SizeValue;
   
   /**
    * Whether the textarea has an error

package/src/components/form/Toggle/Toggle.types.ts

@@ -1,3 +1,4 @@
+import type { ColorValue, SizeValue } from '../../../tokens/scales';
 import type { ToggleButtonProps } from '@mui/material';
 import type React from 'react';
 
@@ -10,12 +11,12 @@ export interface ToggleProps extends Omit<ToggleButtonProps, 'color' | 'size'> {
   /**
    * The color theme of the toggle
    */
-  color?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'neutral';
+  color?: Exclude<ColorValue, 'info'>;
   
   /**
    * The size of the toggle
    */
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  size?: SizeValue;
   
   /**
    * Icon for the toggle

package/src/components/form/ToggleGroup/ToggleGroup.types.ts

@@ -1,3 +1,4 @@
+import type { ColorValue, SizeValue } from '../../../tokens/scales';
 import type { ToggleButtonGroupProps } from '@mui/material';
 import type React from 'react';
 
@@ -17,12 +18,12 @@ export interface ToggleGroupProps extends Omit<ToggleButtonGroupProps, 'color' |
   /**
    * The color theme of the toggle group
    */
-  color?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'neutral';
+  color?: Exclude<ColorValue, 'info'>;
 
   /**
    * The size of the toggle group
    */
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  size?: SizeValue;
 
   /**
    * Array of toggle options

package/src/components/layout/Separator/Separator.types.ts

@@ -1,8 +1,9 @@
+import type { SizeValue } from '../../../tokens/scales';
 import type { ReactNode } from 'react';
 
 export type SeparatorVariant = 'solid' | 'dashed' | 'dotted' | 'gradient';
 export type SeparatorOrientation = 'horizontal' | 'vertical';
-export type SeparatorSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type SeparatorSize = SizeValue;
 
 export interface SeparatorProps {
   variant?: SeparatorVariant;

package/src/components/layout/Spacer/Spacer.types.ts

@@ -1,4 +1,5 @@
-export type SpacerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+import type { SizeValue } from '../../../tokens/scales';
+export type SpacerSize = SizeValue;
 export type SpacerDirection = 'horizontal' | 'vertical' | 'both';
 
 export interface SpacerProps {

package/src/components/navigation/Breadcrumbs/Breadcrumbs.tsx

@@ -114,7 +114,7 @@ const BREADCRUMBS_DEFAULTS: Pick<BreadcrumbsProps, BreadcrumbsDefaultedKeys> = {
   maxItems: 8,
   showHomeIcon: true,
   size: 'md',
-  color: 'default',
+  color: 'neutral',
   elevation: 1,
   collapseBehavior: 'menu',
   mobileMaxItems: 3 };

package/src/components/navigation/Breadcrumbs/Breadcrumbs.types.ts

@@ -1,3 +1,4 @@
+import type { ColorValue, SizeValue } from '../../../tokens/scales';
 import type { BreadcrumbsProps as MuiBreadcrumbsProps } from '@mui/material';
 import type { ReactNode } from 'react';
 
@@ -105,13 +106,17 @@ export interface BreadcrumbsProps extends Omit<MuiBreadcrumbsProps, 'separator'>
    * Size of the breadcrumbs
    * @default 'md'
    */
-  size?: 'sm' | 'md' | 'lg';
+  size?: Extract<SizeValue, 'sm' | 'md' | 'lg'>;
   
   /**
    * Color scheme for separators and accents
    * @default 'default'
    */
-  color?: 'default' | 'primary' | 'secondary';
+  /**
+   * `neutral` is what this called `default`: the unaccented state, renamed to
+   * the house word rather than kept as a third spelling of the same idea.
+   */
+  color?: Extract<ColorValue, 'primary' | 'secondary' | 'neutral'>;
   
   /**
    * Elevation level for glass and elevated variants (0-5)

package/src/components/navigation/ContextMenu/ContextMenu.types.ts

@@ -1,3 +1,4 @@
+import type { ColorValue, SizeValue } from '../../../tokens/scales';
 import type { MenuProps } from '@mui/material';
 import type { ReactNode } from 'react';
 
@@ -40,7 +41,7 @@ export interface ContextMenuItem {
   /**
    * Color variant for the item
    */
-  color?: 'default' | 'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success';
+  color?: ColorValue;
   
   /**
    * Whether the item is dangerous/destructive
@@ -82,7 +83,7 @@ export interface ContextMenuProps extends Omit<MenuProps, 'open' | 'anchorEl' |
   /**
    * Size of the menu items
    */
-  size?: 'sm' | 'md' | 'lg';
+  size?: Extract<SizeValue, 'sm' | 'md' | 'lg'>;
   
   /**
    * Custom className for the trigger element

package/src/components/navigation/DropdownMenu/DropdownMenu.tsx

@@ -189,6 +189,7 @@ const renderLeafMenuItem = (
       onClick={!item.disabled ? () => handleItemClick(item) : undefined} // ← change
       color={item.color}
       showIconSpace={showIconSpace && !hasIcon}
+      data-testid={item.dataTestId}
     >
       {hasIcon && (
         <ListItemIcon sx={{ minWidth: size === 'sm' ? 32 : 40 }}>{item.icon}</ListItemIcon>

package/src/components/navigation/DropdownMenu/DropdownMenu.types.ts

@@ -1,3 +1,4 @@
+import type { ColorValue, SizeValue } from '../../../tokens/scales';
 import type { MenuProps } from '@mui/material';
 import type { ReactNode } from 'react';
 
@@ -55,7 +56,16 @@ export interface DropdownMenuItem {
   /**
    * Color variant for the item
    */
-  color?: 'default' | 'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success';
+  color?: ColorValue;
+
+  /**
+   * Test ID for the rendered item.
+   *
+   * Needed by any surface where an action MOVES into this menu when the row
+   * runs out of room: the action's id has to survive the move, or a suite that
+   * drives it by id passes on a wide screen and fails on a narrow one.
+   */
+  dataTestId?: string;
 }
 
 export interface DropdownMenuProps extends Omit<MenuProps, 'open' | 'variant'> {
@@ -92,7 +102,7 @@ export interface DropdownMenuProps extends Omit<MenuProps, 'open' | 'variant'> {
   /**
    * Size of the menu items
    */
-  size?: 'sm' | 'md' | 'lg';
+  size?: Extract<SizeValue, 'sm' | 'md' | 'lg'>;
   
   /**
    * Maximum height of the menu