@usefragments/ui 1.7.0 → 2.0.0

package/src/components/IconButton/IconButton.module.scss

@@ -7,10 +7,11 @@
   @include button-reset;
   @include interactive-base;
   @include action.base;
+  @include high-contrast-outline;
 
-  border-radius: var(--fui-radius-md, $fui-radius-md);
+  border-radius: var(--fui-radius-l2, $fui-radius-l2);
   color: var(--fui-text-secondary, $fui-text-secondary);
-  border: var(--fui-stroke-hairline, 1px) solid transparent;
+  border: var(--fui-stroke-hairline, #{$fui-stroke-hairline}) solid transparent;
   background-color: transparent;
   flex-shrink: 0;
 
@@ -18,6 +19,14 @@
     color: var(--fui-text-primary, $fui-text-primary);
   }
 
+  // Tactile press. 0.96 exactly: lower reads as exaggerated. Rides the
+  // interactive-base transition, so a release mid-press eases back.
+  @media (prefers-reduced-motion: no-preference) {
+    &:active:not(:disabled):not([data-disabled]) {
+      scale: 0.96;
+    }
+  }
+
   svg {
     display: block;
   }
@@ -59,7 +68,7 @@
   }
 }
 
-.subtle {
+.soft {
   background-color: var(--fui-bg-tertiary, $fui-bg-tertiary);
 
   &:hover:not(:disabled):not([data-disabled]) {
@@ -71,7 +80,7 @@
   }
 }
 
-.outlined {
+.outline {
   border-color: var(--fui-border, $fui-border);
 
   &:hover:not(:disabled):not([data-disabled]) {

package/src/components/IconButton/index.tsx

@@ -28,12 +28,12 @@ export interface IconButtonProps extends Omit<
    *
    * - `ghost` (default): transparent at rest, subtle hover. Fits inside
    *   dense topbars and row affordances.
-   * - `subtle`: painted with the tertiary surface; use when the affordance
+   * - `soft`: painted with the tertiary surface; use when the affordance
    *   sits on a matching surface and needs a touch more weight.
-   * - `outlined`: hairline border; use as a secondary control alongside a
-   *   primary `Button`.
+   * - `outline`: hairline border; use as a secondary control alongside a
+   *   solid `Button`.
    * @default "ghost" */
-  variant?: "ghost" | "subtle" | "outlined";
+  variant?: "ghost" | "soft" | "outline";
   /** Button size. Uses the same height ladder as Button so icon-only
    * affordances align with toolbar actions and adjacent fields.
    * @default "md" */

package/src/components/Input/Input.contract.json

@@ -15,7 +15,6 @@
     "size: sm|md|lg (default: md)",
     "disabled: boolean (default: false)",
     "error: boolean (default: false)",
-    "success: boolean (default: false)",
     "label: string",
     "required: boolean (default: false)",
     "helperText: string",
@@ -78,12 +77,6 @@
       "default": "false",
       "required": false
     },
-    "success": {
-      "type": "boolean",
-      "description": "Whether to show success/validated styling",
-      "default": "false",
-      "required": false
-    },
     "label": {
       "type": "string",
       "description": "Label text displayed above input",
@@ -251,11 +244,6 @@
       "description": "Leading icon and a ⌘K hint that focuses the field.",
       "code": "<Input\n  aria-label=\"Search findings\"\n  placeholder=\"Search findings...\"\n  shortcut=\"⌘K\"\n  shortcutBehavior=\"focus-input\"\n  startAdornment={<MagnifyingGlass aria-hidden=\"true\" />}\n  withFieldWrapper={false}\n/>"
     },
-    {
-      "name": "Success State",
-      "description": "Green border confirms the value passed validation.",
-      "code": "<Input\n  label=\"Email\"\n  type=\"email\"\n  value=\"user@example.com\"\n  success\n  helperText=\"Email verified\"\n/>"
-    },
     {
       "name": "With Start Adornment",
       "description": "Prefix sits inside the field, before the text.",
@@ -293,7 +281,6 @@
       "disabled: boolean - disables interaction",
       "required: boolean - required field indicator",
       "error: boolean - shows error styling",
-      "success: boolean - shows success/validated styling",
       "startAdornment: ReactNode - content before the input (icon or prefix)",
       "endAdornment: ReactNode - content after the input (icon or suffix)",
       "shortcut: string - visual kbd hint inside the input; do not hand-roll extra kbd markup",

package/src/components/Input/Input.module.scss

@@ -40,6 +40,8 @@
   &:focus-visible {
     @include field.focus-state;
   }
+
+  @include high-contrast-outline;
 }
 
 // Size variants — shared control-size + field-padding path
@@ -63,18 +65,7 @@
   @include field.invalid-state;
 
   &:focus-visible {
-    border-color: var(--fui-color-danger-text, $fui-color-danger-text);
-    @include focus-ring-error;
-  }
-}
-
-// Success state — green border for validated fields (DoorDash/Stocksy pattern)
-.success {
-  border-color: var(--fui-color-success-text, $fui-color-success-text);
-
-  &:focus-visible {
-    border-color: var(--fui-color-success-text, $fui-color-success-text);
-    @include focus-ring-success;
+    @include field.invalid-focus-state;
   }
 }
 
@@ -83,12 +74,6 @@
   color: var(--fui-color-danger-text, $fui-color-danger-text);
 }
 
-// Auto-detect success state via :has() — applies success color to helper
-.wrapper[data-success] .helper,
-.helperSuccess {
-  color: var(--fui-color-success-text, $fui-color-success-text);
-}
-
 // ============================================
 // Input with adornments or shortcut indicator
 // ============================================
@@ -149,18 +134,7 @@
     @include field.invalid-state;
 
     &:focus-within {
-      border-color: var(--fui-color-danger-text, $fui-color-danger-text);
-      @include focus-ring-error;
-    }
-  }
-
-  // Success state on adornment container
-  &:has(.success) {
-    border-color: var(--fui-color-success-text, $fui-color-success-text);
-
-    &:focus-within {
-      border-color: var(--fui-color-success-text, $fui-color-success-text);
-      @include focus-ring-success;
+      @include field.invalid-focus-state;
     }
   }
 }
@@ -209,30 +183,6 @@
   user-select: none;
 }
 
-// ============================================
-// Accessibility: High Contrast Mode
-// ============================================
-
-@media (prefers-contrast: more) {
-  .input {
-    border-width: var(--fui-stroke-default, 2px);
-    border-color: var(--fui-text-primary, $fui-text-primary);
-
-    &:focus-visible {
-      border-color: var(--fui-color-accent, $fui-color-accent);
-    }
-  }
-
-  .error,
-  .input[aria-invalid] {
-    border-color: var(--fui-color-danger-text, $fui-color-danger-text);
-  }
-
-  .success {
-    border-color: var(--fui-color-success-text, $fui-color-success-text);
-  }
-}
-
 // ============================================
 // Accessibility: Reduced Motion
 // ============================================

package/src/components/Input/index.tsx

@@ -30,8 +30,6 @@ export interface InputProps extends Omit<
   disabled?: boolean;
   /** Show error styling */
   error?: boolean;
-  /** Show success styling */
-  success?: boolean;
   /** Visible label text */
   label?: string;
   /** Whether the field is required */
@@ -105,7 +103,6 @@ const InputRoot = React.forwardRef<HTMLInputElement, InputProps>(function Input(
     size: sizeProp,
     disabled = false,
     error = false,
-    success = false,
     required = false,
     label,
     helperText,
@@ -174,23 +171,11 @@ const InputRoot = React.forwardRef<HTMLInputElement, InputProps>(function Input(
 
   const hasAdornment = !!(startAdornment || endAdornment);
 
-  const inputClasses = [
-    styles.input,
-    styles[size],
-    error && styles.error,
-    success && styles.success,
-    inputClassName,
-  ]
+  const inputClasses = [styles.input, styles[size], error && styles.error, inputClassName]
     .filter(Boolean)
     .join(" ");
 
-  const helperClasses = [
-    styles.helper,
-    error && styles.helperError,
-    success && styles.helperSuccess,
-  ]
-    .filter(Boolean)
-    .join(" ");
+  const helperClasses = [styles.helper, error && styles.helperError].filter(Boolean).join(" ");
 
   const wrapperClasses = [styles.wrapper, className].filter(Boolean).join(" ");
   const labelClasses = styles.label;
@@ -275,7 +260,6 @@ const InputRoot = React.forwardRef<HTMLInputElement, InputProps>(function Input(
       {...rootProps}
       disabled={disabled}
       invalid={error}
-      data-success={success || undefined}
       className={[wrapperClasses, rootProps?.className].filter(Boolean).join(" ")}
       style={{ ...(rootProps?.style ?? {}), ...(style ?? {}) }}
     >

package/src/components/Link/Link.contract.json

@@ -9,7 +9,8 @@
   "exportName": "Link",
   "propsSummary": [
     "children: node (required)",
-    "variant: default|subtle|muted (default: default)",
+    "tone: accent|neutral (default: accent)",
+    "color: primary|secondary|tertiary",
     "underline: always|hover|none|dotted (default: hover)",
     "external: boolean (default: false)",
     "asChild: boolean (default: false)",
@@ -24,12 +25,18 @@
       "description": "Link text content",
       "required": true
     },
-    "variant": {
+    "tone": {
       "type": "enum",
-      "description": "Visual style variant",
-      "default": "default",
+      "description": "Colour. accent is the link ink; neutral reads as body text until hovered",
+      "default": "accent",
       "required": false,
-      "values": ["default", "subtle", "muted"]
+      "values": ["accent", "neutral"]
+    },
+    "color": {
+      "type": "enum",
+      "description": "Text-hierarchy colour for a neutral link (Text color axis); tertiary is the quietest link",
+      "required": false,
+      "values": ["primary", "secondary", "tertiary"]
     },
     "underline": {
       "type": "enum",
@@ -86,7 +93,7 @@
     "guidelines": [
       "Name the destination; never \"click here\"",
       "external sets target and rel — add your own \"opens in a new tab\" cue",
-      "subtle and muted for secondary and contextual links",
+      "tone=\"neutral\" for secondary links; add color=\"tertiary\" for metadata and footers",
       "Links must stay distinguishable from surrounding text",
       "asChild composes handlers with the child rather than replacing them"
     ],
@@ -104,9 +111,9 @@
       "code": "<Link href=\"#\">Learn more about our services</Link>"
     },
     {
-      "name": "Variants",
-      "description": "Accent, then quieter, then quietest.",
-      "code": "import { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"md\" align=\"center\" wrap>\n  <Link href=\"#\" variant=\"default\">Default</Link>\n  <Link href=\"#\" variant=\"subtle\">Subtle</Link>\n  <Link href=\"#\" variant=\"muted\">Muted</Link>\n</Stack>"
+      "name": "Tones",
+      "description": "Accent, then neutral, then the quietest neutral.",
+      "code": "import { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"md\" align=\"center\" wrap>\n  <Link href=\"#\" tone=\"accent\">Accent</Link>\n  <Link href=\"#\" tone=\"neutral\">Neutral</Link>\n  <Link href=\"#\" tone=\"neutral\" color=\"tertiary\">Tertiary</Link>\n</Stack>"
     },
     {
       "name": "Underline Styles",
@@ -121,7 +128,7 @@
     {
       "name": "As Child (Polymorphic)",
       "description": "Paints Link styling onto a router link and keeps both click handlers.",
-      "code": "<Link asChild variant=\"subtle\" onClick={() => {}}>\n  <a href=\"#pricing\" onClick={() => {}}>\n    Client-side navigation\n  </a>\n</Link>"
+      "code": "<Link asChild tone=\"neutral\" onClick={() => {}}>\n  <a href=\"#pricing\" onClick={() => {}}>\n    Client-side navigation\n  </a>\n</Link>"
     }
   ],
   "relations": [
@@ -140,7 +147,8 @@
     "propsSummary": [
       "children: ReactNode - link text (required)",
       "href: string - destination URL",
-      "variant: default|subtle|muted - visual style",
+      "tone: accent|neutral - colour",
+      "color: primary|secondary|tertiary - hierarchy colour on a neutral link",
       "underline: always|hover|none|dotted - underline behavior",
       "external: boolean - opens in new tab",
       "asChild: boolean - polymorphic child rendering with merged styles and composed event handlers"

package/src/components/Link/Link.module.scss

@@ -17,16 +17,22 @@
   }
 }
 
-// Variants
-.default {
-  color: var(--fui-link-color, var(--fui-link-ink, #{$fui-link-ink}));
+// Tone. The accent ink is `--fui-link-ink` (the read-safe step, gated by
+// read-safe-contrast.test.ts); hover keeps the same ink and underlines.
+.toneAccent {
+  color: var(--fui-link-ink, #{$fui-link-ink});
+}
+
+.toneNeutral {
+  color: var(--fui-text-primary, $fui-text-primary);
 
   &:hover {
-    color: var(--fui-link-color-hover, var(--fui-link-ink, #{$fui-link-ink}));
+    color: var(--fui-color-accent, $fui-color-accent);
   }
 }
 
-.subtle {
+// Text-hierarchy colour on a neutral link; hover steps one rung up the ladder.
+.colorPrimary {
   color: var(--fui-text-primary, $fui-text-primary);
 
   &:hover {
@@ -34,7 +40,15 @@
   }
 }
 
-.muted {
+.colorSecondary {
+  color: var(--fui-text-secondary, $fui-text-secondary);
+
+  &:hover {
+    color: var(--fui-text-primary, $fui-text-primary);
+  }
+}
+
+.colorTertiary {
   color: var(--fui-text-tertiary, $fui-text-tertiary);
 
   &:hover {
@@ -45,19 +59,19 @@
 // Underline styles
 .underline-always {
   text-decoration: underline;
-  text-decoration-style: var(--fui-link-underline-style, solid);
+  text-decoration-style: solid;
   text-underline-offset: 0.2em;
 }
 
 .underline-hover {
-  text-decoration-line: var(--fui-link-underline-line, none);
-  text-decoration-style: var(--fui-link-underline-style, solid);
+  text-decoration-line: none;
+  text-decoration-style: solid;
   text-underline-offset: 0.2em;
   text-decoration-color: color-mix(in srgb, currentColor 55%, transparent);
 
   &:hover {
     text-decoration-line: underline;
-    text-decoration-style: var(--fui-link-underline-style, solid);
+    text-decoration-style: solid;
     text-decoration-color: currentColor;
     text-underline-offset: 0.2em;
   }

package/src/components/Link/index.tsx

@@ -13,10 +13,18 @@ function composeEventHandlers<T extends (...args: any[]) => void>(
   }) as T;
 }
 
-export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+export type LinkTone = 'accent' | 'neutral';
+export type LinkColor = 'primary' | 'secondary' | 'tertiary';
+
+export interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'color'> {
   children: React.ReactNode;
-  /** Visual variant */
-  variant?: 'default' | 'subtle' | 'muted';
+  /** Colour. `accent` (default) is the link ink; `neutral` reads as body text
+   * until hovered, for secondary and contextual links.
+   * @default 'accent' */
+  tone?: LinkTone;
+  /** Text-hierarchy colour for a `neutral` link (Text's `color` axis).
+   * `tertiary` is the quietest link, for metadata and footers. */
+  color?: LinkColor;
   /** Underline style */
   underline?: 'always' | 'hover' | 'none' | 'dotted';
   /** Open in new tab (adds rel="noopener noreferrer") */
@@ -32,11 +40,23 @@ export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement>
   style?: React.CSSProperties;
 }
 
+const TONE_CLASS: Record<LinkTone, string> = {
+  accent: styles.toneAccent,
+  neutral: styles.toneNeutral,
+};
+
+const COLOR_CLASS: Record<LinkColor, string> = {
+  primary: styles.colorPrimary,
+  secondary: styles.colorSecondary,
+  tertiary: styles.colorTertiary,
+};
+
 const LinkRoot = React.forwardRef<HTMLAnchorElement, LinkProps>(
   function Link(
     {
       children,
-      variant = 'default',
+      tone = 'accent',
+      color,
       underline = 'hover',
       external = false,
       asChild = false,
@@ -50,7 +70,8 @@ const LinkRoot = React.forwardRef<HTMLAnchorElement, LinkProps>(
   ) {
     const classes = [
       styles.link,
-      styles[variant],
+      TONE_CLASS[tone],
+      color && COLOR_CLASS[color],
       styles[`underline-${underline}`],
       className,
     ]

package/src/components/List/List.contract.json

@@ -10,8 +10,8 @@
   "propsSummary": [
     "children: node (required)",
     "as: ul|ol (default: ul)",
-    "variant: none|disc|decimal|icon (default: disc)",
-    "gap: none|xs|sm|md|lg (default: sm)",
+    "marker: none|disc|decimal|icon (default: disc)",
+    "gap: none|xs|sm|md|lg|xl (default: sm)",
     "style: object"
   ],
   "props": {
@@ -27,9 +27,9 @@
       "required": false,
       "values": ["ul", "ol"]
     },
-    "variant": {
+    "marker": {
       "type": "enum",
-      "description": "List style variant",
+      "description": "Marker drawn before each item",
       "default": "disc",
       "required": false,
       "values": ["none", "disc", "decimal", "icon"]
@@ -39,7 +39,7 @@
       "description": "Spacing between items",
       "default": "sm",
       "required": false,
-      "values": ["none", "xs", "sm", "md", "lg"]
+      "values": ["none", "xs", "sm", "md", "lg", "xl"]
     },
     "style": {
       "type": "object",
@@ -73,22 +73,22 @@
     {
       "name": "Bullet List",
       "description": "The default marker — reach for it when order does not matter.",
-      "code": "<List variant=\"disc\">\n  <List.Item>First item</List.Item>\n  <List.Item>Second item</List.Item>\n  <List.Item>Third item</List.Item>\n</List>"
+      "code": "<List marker=\"disc\">\n  <List.Item>First item</List.Item>\n  <List.Item>Second item</List.Item>\n  <List.Item>Third item</List.Item>\n</List>"
     },
     {
       "name": "Numbered List",
       "description": "as=\"ol\" makes the sequence real, not just visual.",
-      "code": "<List as=\"ol\" variant=\"decimal\">\n  <List.Item>Create your account</List.Item>\n  <List.Item>Configure your settings</List.Item>\n  <List.Item>Start building</List.Item>\n</List>"
+      "code": "<List as=\"ol\" marker=\"decimal\">\n  <List.Item>Create your account</List.Item>\n  <List.Item>Configure your settings</List.Item>\n  <List.Item>Start building</List.Item>\n</List>"
     },
     {
       "name": "Icon List",
       "description": "Each item takes its own icon — checkmarks sell a feature list.",
-      "code": "<List variant=\"icon\">\n  <List.Item icon={<Check weight=\"bold\" color=\"var(--fui-color-success)\" />}>\n    Unlimited projects\n  </List.Item>\n  <List.Item icon={<Check weight=\"bold\" color=\"var(--fui-color-success)\" />}>\n    Priority support\n  </List.Item>\n  <List.Item icon={<Check weight=\"bold\" color=\"var(--fui-color-success)\" />}>\n    Advanced analytics\n  </List.Item>\n</List>"
+      "code": "<List marker=\"icon\">\n  <List.Item icon={<Check weight=\"bold\" color=\"var(--fui-color-success)\" />}>\n    Unlimited projects\n  </List.Item>\n  <List.Item icon={<Check weight=\"bold\" color=\"var(--fui-color-success)\" />}>\n    Priority support\n  </List.Item>\n  <List.Item icon={<Check weight=\"bold\" color=\"var(--fui-color-success)\" />}>\n    Advanced analytics\n  </List.Item>\n</List>"
     },
     {
       "name": "No Style",
       "description": "No markers, wider gap — the shape for stacked nav links.",
-      "code": "<List variant=\"none\" gap=\"md\">\n  <List.Item>Dashboard</List.Item>\n  <List.Item>Settings</List.Item>\n  <List.Item>Profile</List.Item>\n</List>"
+      "code": "<List marker=\"none\" gap=\"md\">\n  <List.Item>Dashboard</List.Item>\n  <List.Item>Settings</List.Item>\n  <List.Item>Profile</List.Item>\n</List>"
     }
   ],
   "relations": [
@@ -107,8 +107,8 @@
     "propsSummary": [
       "children: List.Item[] - list items (required)",
       "as: ul|ol - list type",
-      "variant: none|disc|decimal|icon - list style",
-      "gap: none|xs|sm|md|lg - item spacing"
+      "marker: none|disc|decimal|icon - marker before each item",
+      "gap: none|xs|sm|md|lg|xl - item spacing"
     ],
     "a11yRules": ["A11Y_LIST_SEMANTIC", "A11Y_LIST_NESTING"]
   },

package/src/components/List/List.module.scss

@@ -1,13 +1,14 @@
 @use "../../tokens/variables" as *;
+@use "../../tokens/measurements.generated" as measurements;
 @use "../../recipes/layout" as layout;
 @use "../../recipes/prose" as prose;
 
 .list {
-  margin: 0;
-  padding: 0;
+  margin: var(--fui-raw-space-0, #{measurements.raw-space(0)});
+  padding: var(--fui-raw-space-0, #{measurements.raw-space(0)});
 }
 
-// Variants
+// Markers
 .none {
   @include prose.list("none");
 }
@@ -24,7 +25,7 @@
   @include prose.list("icon");
 }
 
-// Gap variants
+// Gap
 .gap-none {
   row-gap: layout.gap("none");
 }
@@ -45,6 +46,10 @@
   row-gap: layout.gap("lg");
 }
 
+.gap-xl {
+  row-gap: layout.gap("xl");
+}
+
 // List item
 .item {
   color: var(--fui-text-primary, $fui-text-primary);
@@ -58,7 +63,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-inline-size: var(--fui-raw-space-12, 12px);
+  min-inline-size: var(--fui-raw-space-12, #{measurements.raw-space(12)});
 }
 
 .itemContent {

package/src/components/List/index.tsx

@@ -7,19 +7,23 @@ import styles from './List.module.scss';
 // Types
 // ============================================
 
+export type ListMarker = 'none' | 'disc' | 'decimal' | 'icon';
+
 export interface ListProps extends React.HTMLAttributes<HTMLUListElement | HTMLOListElement> {
   children: React.ReactNode;
   /** List type */
   as?: 'ul' | 'ol';
-  /** List style variant */
-  variant?: 'none' | 'disc' | 'decimal' | 'icon';
-  /** Spacing between items */
-  gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg';
+  /** Marker drawn before each item. Not chrome, so it is `marker`, not `variant`.
+   * @default 'disc' */
+  marker?: ListMarker;
+  /** Spacing between items
+   * @default 'sm' */
+  gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 }
 
 export interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {
   children: React.ReactNode;
-  /** Icon to display (only used with variant="icon") */
+  /** Icon to display (only used with marker="icon") */
   icon?: React.ReactNode;
 }
 
@@ -28,10 +32,10 @@ export interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {
 // ============================================
 
 interface ListContextValue {
-  variant: NonNullable<ListProps['variant']>;
+  marker: ListMarker;
 }
 
-const ListContext = React.createContext<ListContextValue>({ variant: 'disc' });
+const ListContext = React.createContext<ListContextValue>({ marker: 'disc' });
 
 function useListContext() {
   return React.useContext(ListContext);
@@ -44,7 +48,7 @@ function useListContext() {
 function ListRoot({
   children,
   as: Component = 'ul',
-  variant = 'disc',
+  marker = 'disc',
   gap = 'sm',
   className,
   style,
@@ -52,7 +56,7 @@ function ListRoot({
 }: ListProps) {
   const classes = [
     styles.list,
-    styles[variant],
+    styles[marker],
     styles[`gap-${gap}`],
     className,
   ]
@@ -60,7 +64,7 @@ function ListRoot({
     .join(' ');
 
   return (
-    <ListContext.Provider value={{ variant }}>
+    <ListContext.Provider value={{ marker }}>
       <Component {...htmlProps} className={classes} style={style}>
         {children}
       </Component>
@@ -69,11 +73,11 @@ function ListRoot({
 }
 
 function ListItem({ children, icon, className, style, ...htmlProps }: ListItemProps) {
-  const { variant } = useListContext();
+  const { marker } = useListContext();
 
   const classes = [
     styles.item,
-    variant === 'icon' && styles.iconItem,
+    marker === 'icon' && styles.iconItem,
     className,
   ]
     .filter(Boolean)
@@ -81,7 +85,7 @@ function ListItem({ children, icon, className, style, ...htmlProps }: ListItemPr
 
   return (
     <li {...htmlProps} className={classes} style={style}>
-      {variant === 'icon' && icon ? (
+      {marker === 'icon' && icon ? (
         <span className={styles.iconWrapper}>{icon}</span>
       ) : null}
       <span className={styles.itemContent}>{children}</span>