@cdx-ui/components 0.0.1-beta.6 → 0.0.1-beta.61

package/src/components/IconButton/styles.ts

@@ -8,35 +8,133 @@ export const iconButtonRootVariants = cva(
     'rounded-[var(--border-radius-round)]',
     'web:outline-none web:focus:outline-none web:focus-visible:outline-none',
     TRANSITION_COLORS,
-    'data-[disabled=true]:opacity-[--opacity-disabled]',
+    'data-[disabled=true]:opacity-[var(--opacity-disabled)]',
     DISABLED_CURSOR,
-    'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-[--color-stroke-ring] web:data-[focus-visible=true]:ring-offset-2',
+    'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-[var(--color-stroke-ring)] web:data-[focus-visible=true]:ring-offset-2',
   ],
   {
     variants: {
       variant: {
-        solid: [
+        solid: [],
+        tint: [],
+        ghost: ['bg-transparent'],
+      },
+      color: {
+        neutral: [],
+        action: [],
+        danger: [],
+      },
+      size: {
+        default: 'h-11 w-11 min-w-11 shrink-0 p-2.5',
+        small: 'h-8 w-8 min-w-8 shrink-0 p-1.5',
+      },
+    },
+    compoundVariants: [
+      // ── solid × color ───────────────────────────────────────────────────
+      {
+        variant: 'solid',
+        color: 'neutral',
+        className: [
           'bg-surface-primary border border-stroke-secondary',
           Platform.select({
             default: 'data-[active=true]:bg-surface-primary-active',
             web: 'data-[hover=true]:bg-surface-primary-hover data-[active=true]:data-[hover=true]:bg-surface-secondary-active',
           }),
         ],
-        ghost: [
-          'bg-transparent',
+      },
+      {
+        variant: 'solid',
+        color: 'action',
+        className: [
+          'bg-surface-action-strong',
+          Platform.select({
+            default: 'data-[active=true]:bg-surface-action-strong-active',
+            web: 'data-[hover=true]:bg-surface-action-strong-hover data-[active=true]:data-[hover=true]:bg-surface-action-strong-active',
+          }),
+        ],
+      },
+      {
+        variant: 'solid',
+        color: 'danger',
+        className: [
+          'bg-surface-danger-strong',
+          Platform.select({
+            default: 'data-[active=true]:bg-surface-danger-strong-active',
+            web: 'data-[hover=true]:bg-surface-danger-strong-hover data-[active=true]:data-[hover=true]:bg-surface-danger-strong-active',
+          }),
+        ],
+      },
+
+      // ── tint × color ─────────────────────────────────────────────────
+      {
+        variant: 'tint',
+        color: 'neutral',
+        className: [
+          'bg-surface-neutral-tint',
+          Platform.select({
+            default: 'data-[active=true]:bg-surface-neutral-tint-active',
+            web: 'data-[hover=true]:bg-surface-neutral-tint-hover data-[active=true]:data-[hover=true]:bg-surface-neutral-tint-active',
+          }),
+        ],
+      },
+      {
+        variant: 'tint',
+        color: 'action',
+        className: [
+          'bg-surface-action-tint',
+          Platform.select({
+            default: 'data-[active=true]:bg-surface-action-tint-active',
+            web: 'data-[hover=true]:bg-surface-action-tint-hover data-[active=true]:data-[hover=true]:bg-surface-action-tint-active',
+          }),
+        ],
+      },
+      {
+        variant: 'tint',
+        color: 'danger',
+        className: [
+          'bg-surface-danger-tint',
+          Platform.select({
+            default: 'data-[active=true]:bg-surface-danger-tint-active',
+            web: 'data-[hover=true]:bg-surface-danger-tint-hover data-[active=true]:data-[hover=true]:bg-surface-danger-tint-active',
+          }),
+        ],
+      },
+
+      // ── ghost × color ──────────────────────────────────────────────────
+      {
+        variant: 'ghost',
+        color: 'neutral',
+        className: [
           Platform.select({
             default: 'data-[active=true]:bg-surface-primary-active',
             web: 'data-[hover=true]:bg-surface-primary-hover data-[active=true]:data-[hover=true]:bg-surface-secondary-active',
           }),
         ],
       },
-      size: {
-        default: 'h-11 w-11 min-w-11 shrink-0 p-2.5',
-        small: 'h-8 w-8 min-w-8 shrink-0 p-1.5',
+      {
+        variant: 'ghost',
+        color: 'action',
+        className: [
+          Platform.select({
+            default: 'data-[active=true]:bg-surface-action-tint-active',
+            web: 'data-[hover=true]:bg-surface-action-tint-hover data-[active=true]:data-[hover=true]:bg-surface-action-tint-active',
+          }),
+        ],
       },
-    },
+      {
+        variant: 'ghost',
+        color: 'danger',
+        className: [
+          Platform.select({
+            default: 'data-[active=true]:bg-surface-danger-tint-active',
+            web: 'data-[hover=true]:bg-surface-danger-tint-hover data-[active=true]:data-[hover=true]:bg-surface-danger-tint-active',
+          }),
+        ],
+      },
+    ],
     defaultVariants: {
       variant: 'solid',
+      color: 'neutral',
       size: 'default',
     },
   },
@@ -54,6 +152,34 @@ export const iconButtonGlyphVariants = cva([], {
   },
 });
 
-export const iconButtonIconColorVariants = cva(['text-content-primary']);
+export const iconButtonIconColorVariants = cva([], {
+  variants: {
+    variant: {
+      solid: [],
+      tint: [],
+      ghost: [],
+    },
+    color: {
+      neutral: [],
+      action: [],
+      danger: [],
+    },
+  },
+  compoundVariants: [
+    { variant: 'solid', color: 'neutral', className: 'text-content-primary' },
+    { variant: 'solid', color: 'action', className: 'text-content-action-on-strong' },
+    { variant: 'solid', color: 'danger', className: 'text-content-danger-on-strong' },
+    { variant: 'tint', color: 'neutral', className: 'text-content-primary' },
+    { variant: 'tint', color: 'action', className: 'text-content-action-on-subtle' },
+    { variant: 'tint', color: 'danger', className: 'text-content-danger-on-subtle' },
+    { variant: 'ghost', color: 'neutral', className: 'text-content-primary' },
+    { variant: 'ghost', color: 'action', className: 'text-content-action' },
+    { variant: 'ghost', color: 'danger', className: 'text-content-danger' },
+  ],
+  defaultVariants: {
+    variant: 'solid',
+    color: 'neutral',
+  },
+});
 
 export type IconButtonVariantProps = VariantProps<typeof iconButtonRootVariants>;

package/src/components/Input/styles.ts

@@ -3,13 +3,14 @@ import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/primitives';
 
 export const inputRootVariants = cva(
   [
-    'w-full flex-row items-stretch overflow-hidden',
+    'w-full flex-row items-center overflow-hidden',
     'bg-surface-primary',
-    'border-solid border-[length:var(--border-width-default)] border-stroke-primary',
+    'border-solid border-stroke-primary',
+    'web:border-default native:border-[length:var(--border-width-default)]',
     'rounded-[var(--border-radius-default)]',
     TRANSITION_COLORS,
     'data-[disabled=true]:bg-surface-secondary',
-    'data-[disabled=true]:opacity-[--opacity-disabled]',
+    'data-[disabled=true]:opacity-[var(--opacity-disabled)]',
     DISABLED_CURSOR,
     'data-[readonly=true]:cursor-default',
     'data-[readonly=true]:bg-surface-secondary',
@@ -24,11 +25,16 @@ export const inputRootVariants = cva(
         outline: [],
       },
       size: {
-        // TODO: Find a cleaner approach to preventing layout shift when focus border is applied.
-        default: ['h-10 px-4 py-2 gap-2', 'data-[focus=true]:px-[15px] data-[focus=true]:py-[7px]'],
+        default: [
+          'h-11 min-h-11 px-4 py-3 gap-4',
+          // Subtract one hairline from padding when focused so the wider focus border doesn’t shift layout.
+          'data-[focus=true]:px-[calc(var(--spacing-4)-var(--spacing-px))]',
+          'data-[focus=true]:py-[calc(var(--spacing-3)-var(--spacing-px))]',
+        ],
         small: [
-          'h-8 px-3 py-1.5 gap-1.5',
-          'data-[focus=true]:px-[11px] data-[focus=true]:py-[5px]',
+          'h-8 min-h-8 px-3 py-2 gap-1.5',
+          'data-[focus=true]:px-[calc(var(--spacing-3)-var(--spacing-px))]',
+          'data-[focus=true]:py-[calc(var(--spacing-2)-var(--spacing-px))]',
         ],
       },
     },
@@ -42,7 +48,7 @@ export const inputRootVariants = cva(
 export const inputFieldVariants = cva(
   [
     'flex-1 justify-center bg-transparent p-0',
-    'font-body text-content-primary',
+    'text-content-primary',
     'placeholder:text-content-tertiary',
     'web:outline-none',
     'tracking-normal',
@@ -60,7 +66,7 @@ export const inputFieldVariants = cva(
   },
 );
 
-export const inputSlotVariants = cva(['items-center justify-center self-center']);
+export const inputSlotVariants = cva(['items-center justify-center self-center shrink-0']);
 
 export const inputIconVariants = cva(['text-content-tertiary'], {
   variants: {

package/src/components/Link/index.tsx

@@ -1,9 +1,14 @@
 import { forwardRef, type ReactNode } from 'react';
-import { Pressable, Text as RNText, type TextProps, type View } from 'react-native';
-import { createLink, type ILinkProps } from '@cdx-ui/primitives';
+import { Platform, Pressable, Text, View, type TextProps } from 'react-native';
+import { createLink, useLinkInteractionContext, type ILinkProps } from '@cdx-ui/primitives';
 import { cn } from '@cdx-ui/utils';
 import { Icon, type IconProps } from '../Icon';
-import { linkRootVariants, linkLabelVariants, linkIconVariants } from './styles';
+import {
+  linkIconVariants,
+  linkLabelVariants,
+  linkNativeUnderlineVariants,
+  linkRootVariants,
+} from './styles';
 
 export { LinkProvider, type LinkConfig, type LinkAction } from '@cdx-ui/primitives';
 
@@ -40,15 +45,22 @@ export interface LinkLabelProps extends TextProps {
   children?: ReactNode;
 }
 
-const LinkLabel = forwardRef<RNText, LinkLabelProps>(
+const LinkLabel = forwardRef<Text, LinkLabelProps>(
   ({ className, children, style, ...props }, ref) => {
-    const computedClassName = cn(linkLabelVariants(), className);
+    const { visited } = useLinkInteractionContext();
+    const computedClassName = cn(linkLabelVariants({ visited }), className);
 
-    return (
-      <RNText ref={ref} className={computedClassName} style={style} {...props}>
+    const textElement = (
+      <Text ref={ref} className={computedClassName} style={style} {...props}>
         {children}
-      </RNText>
+      </Text>
     );
+
+    if (Platform.OS === 'web') {
+      return textElement;
+    }
+
+    return <View className={cn(linkNativeUnderlineVariants({ visited }))}>{textElement}</View>;
   },
 );
 
@@ -61,7 +73,8 @@ LinkLabel.displayName = 'Link.Label';
 export interface LinkIconProps extends Omit<IconProps, 'children'> {}
 
 const LinkIcon = ({ className, style, as, ...props }: LinkIconProps) => {
-  const computedClassName = cn(linkIconVariants(), className);
+  const { visited } = useLinkInteractionContext();
+  const computedClassName = cn(linkIconVariants({ visited }), className);
 
   return <Icon as={as} className={computedClassName} style={style} {...props} />;
 };

package/src/components/Link/styles.ts

@@ -1,21 +1,61 @@
+import { Platform } from 'react-native';
 import { cva, type VariantProps } from 'class-variance-authority';
 import { TRANSITION_COLORS } from '../../styles/primitives';
 
-// TODO: Handle visited state
-
 export const linkRootVariants = cva([
   'flex-row items-center gap-1',
-  'web:outline-none web:focus:outline-none web:focus-visible:outline-none',
+  Platform.select({ web: 'web:inline-flex web:self-start', default: '' }),
   TRANSITION_COLORS,
+  'web:outline-none web:focus:outline-none web:focus-visible:outline-none',
+  'web:data-[focus-visible=true]:rounded-[2px]',
   'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-stroke-focus web:data-[focus-visible=true]:ring-offset-2',
+  // Web: set color on the anchor so Label/Icon can text-inherit (incl. browser :visited).
+  'web:text-content-link',
+  'web:visited:text-content-link-visited',
+  'web:hover:text-content-primary',
+  'web:visited:hover:text-content-primary',
+  'data-[visited=true]:text-content-link-visited',
+  'web:data-[hover=true]:text-content-primary',
 ]);
 
-export const linkLabelVariants = cva([
-  'text-content-link',
-  'body-md',
-  'underline underline-offset-4',
-]);
+export const linkLabelVariants = cva(
+  [
+    'body-md',
+    Platform.select({ web: 'underline underline-offset-4', default: '' }),
+    Platform.select({ web: 'text-inherit', default: 'text-content-link' }),
+  ],
+  {
+    variants: {
+      visited: {
+        true: Platform.select({ web: '', default: 'text-content-link-visited' }),
+        false: '',
+      },
+    },
+    defaultVariants: { visited: false },
+  },
+);
+
+export const linkNativeUnderlineVariants = cva(['border-b border-content-link pb-0.5'], {
+  variants: {
+    visited: {
+      true: 'border-content-link-visited',
+      false: '',
+    },
+  },
+  defaultVariants: { visited: false },
+});
 
-export const linkIconVariants = cva(['text-content-link', 'size-4']);
+export const linkIconVariants = cva(
+  ['size-4', Platform.select({ web: 'text-inherit', default: 'text-content-link' })],
+  {
+    variants: {
+      visited: {
+        true: Platform.select({ web: '', default: 'text-content-link-visited' }),
+        false: '',
+      },
+    },
+    defaultVariants: { visited: false },
+  },
+);
 
 export type LinkVariantProps = VariantProps<typeof linkLabelVariants>;

package/src/components/ListItem/index.tsx

@@ -38,9 +38,9 @@ const ListItemPrimitive = createListItem({
   SectionHeader: View,
 });
 
-const useListItemStyleContext = (): Pick<ListItemVariantProps, 'size' | 'crossAlign'> => {
+const useListItemStyleContext = (): Pick<ListItemVariantProps, 'crossAlign'> => {
   const ctx = useStyleContext(SCOPE) as ListItemVariantProps | undefined;
-  return { size: ctx?.size ?? 'default', crossAlign: ctx?.crossAlign ?? 'center' };
+  return { crossAlign: ctx?.crossAlign ?? 'center' };
 };
 
 // =============================================================================
@@ -53,19 +53,11 @@ export interface ListItemProps extends IListItemProps, WithStyleContextProps {
 
 const ListItemRoot = forwardRef<View, ListItemProps>(
   (
-    {
-      size = 'default',
-      surface = 'default',
-      showSeparator = true,
-      crossAlign = 'center',
-      className,
-      style,
-      ...props
-    },
+    { size = 'default', showSeparator = true, crossAlign = 'center', className, style, ...props },
     ref,
   ) => {
     const computedClassName = cn(
-      listItemRootVariants({ size, surface, showSeparator, crossAlign }),
+      listItemRootVariants({ size, showSeparator, crossAlign }),
       className,
     );
 
@@ -73,12 +65,11 @@ const ListItemRoot = forwardRef<View, ListItemProps>(
       <ListItemPrimitive
         ref={ref as never}
         className={computedClassName}
-        context={{ size, surface, showSeparator, crossAlign }}
+        context={{ crossAlign }}
         crossAlign={crossAlign}
         showSeparator={showSeparator}
         size={size}
         style={style}
-        surface={surface}
         {...props}
       />
     );
@@ -135,12 +126,10 @@ export interface ListItemTitleProps extends TextProps {
 
 const ListItemTitle = forwardRef<Text, ListItemTitleProps>(
   ({ className, numberOfLines = 1, style, ...props }, ref) => {
-    const { size } = useListItemStyleContext();
-
     return (
       <ListItemPrimitive.Title
         ref={ref as never}
-        className={cn(listItemTitleVariants({ size }), className)}
+        className={cn(listItemTitleVariants(), className)}
         numberOfLines={numberOfLines}
         style={style}
         {...props}
@@ -157,12 +146,10 @@ export interface ListItemDescriptionProps extends TextProps {
 
 const ListItemDescription = forwardRef<Text, ListItemDescriptionProps>(
   ({ className, style, ...props }, ref) => {
-    const { size } = useListItemStyleContext();
-
     return (
       <ListItemPrimitive.Description
         ref={ref as never}
-        className={cn(listItemDescriptionVariants({ size }), className)}
+        className={cn(listItemDescriptionVariants(), className)}
         style={style}
         {...props}
       />
@@ -178,12 +165,10 @@ export interface ListItemMetaProps extends TextProps {
 
 const ListItemMeta = forwardRef<Text, ListItemMetaProps>(
   ({ className, numberOfLines = 1, style, ...props }, ref) => {
-    const { size } = useListItemStyleContext();
-
     return (
       <ListItemPrimitive.Meta
         ref={ref as never}
-        className={cn(listItemMetaVariants({ size }), className)}
+        className={cn(listItemMetaVariants(), className)}
         numberOfLines={numberOfLines}
         style={style}
         {...props}

package/src/components/ListItem/styles.ts

@@ -1,43 +1,48 @@
 import { Platform } from 'react-native';
 import { cva, type VariantProps } from 'class-variance-authority';
-import {
-  COLOR_BORDER_DEFAULT,
-  COLOR_TEXT_MUTED,
-  COLOR_TEXT_PRIMARY,
-  COLOR_TEXT_SECONDARY,
-  TRANSITION_COLORS,
-} from '../../styles/primitives';
+import { TRANSITION_COLORS } from '../../styles/primitives';
 
-// ── Root (row): density, surface, separator, interactive feedback ──────────
+// ── Root (row): density, separator, interactive feedback ───────────────────
+//
+// Web hover/active/focus paint an absolutely positioned bg-content-primary overlay at
+// --opacity-hover (8%) / --opacity-hover-overlay (20%) / --opacity-selected (12%), plus a focus
+// ring on focus-visible. State is driven by the data attributes the primitive root emits
+// (data-hover / data-active / data-focus-visible) — or by the composed child on `asChild`
+// (e.g. Link emits the same attributes). Native active uses a flat tint because ::before
+// pseudo-elements are web-only.
+//
+// TODO: Handle native background color hover/focus transitions
 
 export const listItemRootVariants = cva(
   [
-    'flex-row self-stretch w-full px-4',
-    'data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none',
-    'data-[active=true]:opacity-70',
+    'relative flex-row self-stretch w-full overflow-clip px-5 bg-transparent',
+    'data-[disabled=true]:opacity-[var(--opacity-disabled)] data-[disabled=true]:pointer-events-none',
     TRANSITION_COLORS,
     Platform.select({
       web: [
         'outline-none',
-        'web:data-[hovered=true]:bg-slate-50',
-        'web:focus-visible:data-[disabled=false]:bg-slate-50',
-        'web:focus-visible:data-[disabled=false]:ring-2 web:focus-visible:data-[disabled=false]:ring-slate-400/40 web:focus-visible:data-[disabled=false]:ring-offset-2',
+        'before:pointer-events-none before:absolute before:inset-0 before:bg-content-primary before:opacity-0 before:content-[""]',
+        'before:transition-opacity before:duration-150 before:ease-out',
+        'data-[hover=true]:before:opacity-[var(--opacity-hover)]',
+        // Pressed wins over hover via the compound selector (higher specificity), mirroring Button.
+        'data-[active=true]:data-[hover=true]:before:opacity-[var(--opacity-hover-overlay)]',
+        'data-[focus-visible=true]:before:opacity-[var(--opacity-selected)]',
+        'data-[focus-visible=true]:ring-2 data-[focus-visible=true]:ring-stroke-focus data-[focus-visible=true]:ring-offset-2',
       ].join(' '),
-      default: '',
+      default: 'data-[active=true]:bg-surface-primary-hover',
     }),
   ],
   {
     variants: {
       size: {
-        default: 'gap-3 py-4',
-        compact: 'gap-2 py-3',
-      },
-      surface: {
-        default: 'bg-white',
-        negative: 'bg-red-50',
+        default: 'gap-3 py-3 min-h-16',
+        compact: 'gap-3 py-2 min-h-12',
       },
       showSeparator: {
-        true: ['border-b border-solid', COLOR_BORDER_DEFAULT],
+        true: [
+          'border-b border-solid border-stroke-secondary',
+          Platform.select({ web: 'before:-bottom-px', default: '' }),
+        ].join(' '),
         false: 'border-b-0',
       },
       crossAlign: {
@@ -45,18 +50,8 @@ export const listItemRootVariants = cva(
         start: 'items-start',
       },
     },
-    compoundVariants: [
-      {
-        surface: 'negative',
-        className: Platform.select({
-          web: 'web:data-[hovered=true]:bg-red-100/90',
-          default: '',
-        }),
-      },
-    ],
     defaultVariants: {
       size: 'default',
-      surface: 'default',
       showSeparator: true,
       crossAlign: 'center',
     },
@@ -65,23 +60,28 @@ export const listItemRootVariants = cva(
 
 // ── Leading / trailing slots ─────────────────────────────────────────────────
 
-export const listItemLeadingSlotVariants = cva(['flex shrink-0 items-center justify-center']);
+export const listItemLeadingSlotVariants = cva([
+  'relative z-10 flex shrink-0 items-center justify-center',
+]);
 
-export const listItemTrailingSlotVariants = cva(['flex shrink-0 flex-row justify-end gap-2'], {
-  variants: {
-    crossAlign: {
-      center: 'items-center',
-      start: 'items-start self-start',
+export const listItemTrailingSlotVariants = cva(
+  ['relative z-10 flex shrink-0 flex-row justify-end gap-2'],
+  {
+    variants: {
+      crossAlign: {
+        center: 'items-center',
+        start: 'items-start self-start',
+      },
+    },
+    defaultVariants: {
+      crossAlign: 'center',
     },
   },
-  defaultVariants: {
-    crossAlign: 'center',
-  },
-});
+);
 
 // ── Content stack (title / description / meta) ───────────────────────────────
 
-export const listItemContentVariants = cva(['flex min-w-0 flex-1 flex-col gap-1'], {
+export const listItemContentVariants = cva('relative z-10 flex min-w-0 flex-1 flex-col gap-1', {
   variants: {
     crossAlign: {
       center: 'justify-center',
@@ -95,48 +95,18 @@ export const listItemContentVariants = cva(['flex min-w-0 flex-1 flex-col gap-1'
 
 // ── Typography ───────────────────────────────────────────────────────────────
 
-export const listItemTitleVariants = cva([COLOR_TEXT_PRIMARY, 'font-medium'], {
-  variants: {
-    size: {
-      default: 'text-base leading-snug',
-      compact: 'text-sm leading-snug',
-    },
-  },
-  defaultVariants: {
-    size: 'default',
-  },
-});
+export const listItemTitleVariants = cva('body-md font-medium text-content-primary');
 
-export const listItemDescriptionVariants = cva([COLOR_TEXT_SECONDARY], {
-  variants: {
-    size: {
-      default: 'text-sm leading-normal',
-      compact: 'text-xs leading-normal',
-    },
-  },
-  defaultVariants: {
-    size: 'default',
-  },
-});
+export const listItemDescriptionVariants = cva('body-sm text-content-secondary');
 
-export const listItemMetaVariants = cva([COLOR_TEXT_MUTED], {
-  variants: {
-    size: {
-      default: 'text-xs leading-normal',
-      compact: 'text-[11px] leading-normal',
-    },
-  },
-  defaultVariants: {
-    size: 'default',
-  },
-});
+export const listItemMetaVariants = cva('body-sm text-content-tertiary');
 
 // ── Section header (group label row inside lists / cards) ───────────────────
 
 export const listItemSectionHeaderVariants = cva(
   [
     'flex-row items-center justify-between gap-2 border-b border-solid px-4 py-3',
-    COLOR_BORDER_DEFAULT,
+    'border-stroke-secondary',
   ],
   {
     variants: {
@@ -152,9 +122,8 @@ export const listItemSectionHeaderVariants = cva(
 );
 
 /** Default section-title typography; applied by `ListItem.SectionHeader` for string/number children. Exported for rare custom composition. */
-export const listItemSectionHeaderLabelVariants = cva([
-  'text-xs font-semibold uppercase tracking-wide',
-  COLOR_TEXT_SECONDARY,
-]);
+export const listItemSectionHeaderLabelVariants = cva(
+  'text-xs font-semibold uppercase tracking-wide text-content-secondary',
+);
 
 export type ListItemVariantProps = VariantProps<typeof listItemRootVariants>;