@astryxdesign/core 0.7.5-canary.fccd771 → 0.7.5

package/src/Icon/Icon.tsx

@@ -4,7 +4,8 @@
 
 /**
  * @file Icon.tsx
- * @input Uses ReactSVGProps, icon components or semantic icon names
+ * @input Uses ReactSVGProps, icon components or semantic icon names, and an
+ *   optional IconVariant request
  * @output Exports Icon component, IconProps, IconColor, IconSize, IconType types
  * @position Core implementation; consumed by index.ts, tested by Icon.test.tsx
  *
@@ -13,6 +14,13 @@
  *   directly with and spread SVG props.
  * - String mode: Pass a semantic name (e.g. 'close', 'chevronDown') — resolved from the
  *   theme's icon registry (or built-in fallback SVGs) and wrapped in a styled span.
+ *   A function registry entry receives `{size, variant}`: the size resolved by
+ *   ORD1 and the requested variant when the entry can receive it.
+ *
+ * Both modes size the glyph from the `icon` target's private size vars
+ * (`iconSizeStyles` in IconSize.stylex.ts, `registrySizeStyles` below), so a
+ * theme's `width` and `height` on that target's size selector set the size's
+ * glyph dimension, including the font size 1em-based registry artwork follows.
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Icon/Icon.doc.mjs (props table, features, implementation notes)
@@ -27,16 +35,13 @@ import * as stylex from '@stylexjs/stylex';
 import type {StyleXStyles} from '@stylexjs/stylex';
 import {colorVars} from '../theme/tokens.stylex';
 import {useThemeName} from '../theme/useTheme';
-import {getIcon} from './globalIconRegistry';
+import {resolveIcon} from './globalIconRegistry';
 import type {IconName, NamespacedIconName} from './globalIconRegistry';
+import type {IconVariant} from './index';
 import {mergeProps} from '../utils';
 import {themeProps} from '../utils/themeProps';
 import {useIconSize} from './IconDefaultSizeContext';
-import {
-  iconBoxSizeStyles,
-  iconSizeStyles,
-  type IconSize,
-} from './IconSize.stylex';
+import {iconSizeStyles, type IconSize} from './IconSize.stylex';
 
 export type {IconSize} from './IconSize.stylex';
 
@@ -57,6 +62,36 @@ const styles = stylex.create({
   },
 });
 
+/**
+ * Size styles for string-based registry icons: the glyph dimensions
+ * `iconSizeStyles` reads from the `icon` target's private vars, plus a
+ * `fontSize`, because registry artwork is 1em-based. `fontSize` is the smaller
+ * side, which fits square artwork into a non-square box the way an SVG viewBox
+ * does.
+ */
+const registrySizeStyles = stylex.create({
+  xsm: {
+    width: 'var(--_icon-width, 0.75rem)',
+    height: 'var(--_icon-height, 0.75rem)',
+    fontSize: 'min(var(--_icon-width, 0.75rem), var(--_icon-height, 0.75rem))',
+  },
+  sm: {
+    width: 'var(--_icon-width, 1rem)',
+    height: 'var(--_icon-height, 1rem)',
+    fontSize: 'min(var(--_icon-width, 1rem), var(--_icon-height, 1rem))',
+  },
+  md: {
+    width: 'var(--_icon-width, 1.25rem)',
+    height: 'var(--_icon-height, 1.25rem)',
+    fontSize: 'min(var(--_icon-width, 1.25rem), var(--_icon-height, 1.25rem))',
+  },
+  lg: {
+    width: 'var(--_icon-width, 1.5rem)',
+    height: 'var(--_icon-height, 1.5rem)',
+    fontSize: 'min(var(--_icon-width, 1.5rem), var(--_icon-height, 1.5rem))',
+  },
+});
+
 const colorStyles = stylex.create({
   primary: {
     color: colorVars['--color-icon-primary'],
@@ -73,14 +108,17 @@ const colorStyles = stylex.create({
   accent: {
     color: colorVars['--color-accent'],
   },
+  info: {
+    color: colorVars['--color-icon-info'],
+  },
   success: {
-    color: colorVars['--color-success'],
+    color: colorVars['--color-icon-success'],
   },
   error: {
-    color: colorVars['--color-error'],
+    color: colorVars['--color-icon-error'],
   },
   warning: {
-    color: colorVars['--color-warning'],
+    color: colorVars['--color-icon-warning'],
   },
   inherit: {
     color: 'inherit',
@@ -160,10 +198,30 @@ export interface IconProps extends Omit<
    * - 'md': 1.25rem (20px at a 16px root)
    * - 'lg': 1.5rem (24px at a 16px root)
    *
+   * A theme sets a size's glyph dimension with `width` and `height`, in `px`
+   * or `rem`, on `components.icon['size:sm']` (and the other sizes).
+   *
    * An explicit value wins. When omitted, Icon uses the nearest default supplied
    * by an owning Astryx component for its icon slot, then falls back to 'md'.
    */
   size?: IconSize;
+  /**
+   * Requests the active theme's alternate artwork for a semantic icon name,
+   * such as `'filled'`. Names come from the augmentable `IconVariantMap`.
+   *
+   * The theme's icon entry receives the variant only when the active theme
+   * lists it in `iconVariants` and, for an entry a theme supplied, the theme
+   * that defined the entry lists it too. Otherwise the entry receives
+   * `undefined` and draws its normal artwork. An icon component passed
+   * directly renders as given and never receives `variant`, and `variant` is
+   * never written to the DOM or reflected on the `icon` theming target.
+   *
+   * @example
+   * ```
+   * <Icon icon="info" variant="filled" />
+   * ```
+   */
+  variant?: IconVariant;
   /**
    * Accessible name for the icon. Set this only when the icon is MEANINGFUL on
    * its own — a standalone status glyph or an icon-only indicator with no
@@ -244,6 +302,7 @@ export function Icon({
   icon,
   color = 'inherit',
   size: sizeProp,
+  variant,
   label,
   ref,
   className,
@@ -263,6 +322,7 @@ export function Icon({
         name={icon}
         color={color}
         size={size}
+        variant={variant}
         a11yProps={a11yProps}
         className={className}
         style={style}
@@ -272,7 +332,8 @@ export function Icon({
     );
   }
 
-  // Component mode: render SVG component directly with ref forwarding
+  // Component mode: render SVG component directly with ref forwarding. A
+  // supplied component never receives `variant`; it was destructured above.
   const IconComponent = icon;
   return (
     <IconComponent
@@ -312,13 +373,15 @@ Icon.displayName = 'Icon';
  * Internal component that resolves a semantic icon name from the registry
  * and renders it in a styled span with proper sizing.
  *
- * Extracted as a separate component so getIcon is only called
- * when the icon prop is a string.
+ * Extracted as a separate component so the registry is only read when the
+ * icon prop is a string. A function entry receives the resolved size and the
+ * requested variant when the entry can receive it.
  */
 function IconFromRegistry({
   name,
   color,
   size,
+  variant,
   a11yProps,
   className,
   style,
@@ -328,6 +391,7 @@ function IconFromRegistry({
   name: IconName | NamespacedIconName;
   color: IconColor;
   size: IconSize;
+  variant: IconVariant | undefined;
   a11yProps: {role: 'img'; 'aria-label': string} | {'aria-hidden': 'true'};
   className?: string;
   style?: React.CSSProperties;
@@ -335,7 +399,7 @@ function IconFromRegistry({
   spanProps?: Omit<SVGProps<SVGSVGElement>, 'ref' | 'color'>;
 }) {
   const themeName = useThemeName();
-  const resolvedIcon = getIcon(name, themeName);
+  const resolvedIcon = resolveIcon(name, themeName, {size, variant});
 
   if (resolvedIcon == null) {
     return null;
@@ -362,7 +426,7 @@ function IconFromRegistry({
         stylex.props(
           styles.span,
           colorStyles[color],
-          iconBoxSizeStyles[size],
+          registrySizeStyles[size],
           xstyle,
         ),
         className ?? undefined,

package/src/Icon/IconSize.stylex.ts

@@ -2,9 +2,14 @@
 
 /**
  * @file IconSize.stylex.ts
- * @input Defines the Icon size scale
+ * @input Defines the Icon size scale and reads the `icon` target's private
+ *   `--_icon-width` / `--_icon-height` vars
  * @output Exports shared Icon size types and StyleX styles
  * @position Internal Icon sizing source; consumed by Icon and icon-slot owners
+ *
+ * SYNC: When the private vars change, update Icon.tsx (registrySizeStyles),
+ * derivedVarRegistry.ts, and the `theming.vars` / `theming.derived` entries in
+ * Icon.doc.mjs.
  */
 
 import * as stylex from '@stylexjs/stylex';
@@ -22,29 +27,40 @@ const iconSizeValues = {
 
 export type IconSize = keyof typeof iconSizeValues;
 
+/*
+ * Icon's own glyph dimensions (these and the registry size styles in Icon.tsx)
+ * read private vars rather than being plain declarations. A theme writes
+ * `width`/`height` on the `icon` target's size selector
+ * (`components.icon['size:sm']`), and the derived-var registry emits them as
+ * `--_icon-width` / `--_icon-height` instead of as competing properties.
+ * Nothing else declares the dimensions, so the theme value lands however the
+ * consumer layers StyleX; with no theme value, each size falls back to its own
+ * rem value.
+ */
+
 /** Size styles for direct SVG icon components. */
 export const iconSizeStyles = stylex.create({
   xsm: {
-    width: iconSizeValues.xsm,
-    height: iconSizeValues.xsm,
+    width: 'var(--_icon-width, 0.75rem)',
+    height: 'var(--_icon-height, 0.75rem)',
   },
   sm: {
-    width: iconSizeValues.sm,
-    height: iconSizeValues.sm,
+    width: 'var(--_icon-width, 1rem)',
+    height: 'var(--_icon-height, 1rem)',
   },
   md: {
-    width: iconSizeValues.md,
-    height: iconSizeValues.md,
+    width: 'var(--_icon-width, 1.25rem)',
+    height: 'var(--_icon-height, 1.25rem)',
   },
   lg: {
-    width: iconSizeValues.lg,
-    height: iconSizeValues.lg,
+    width: 'var(--_icon-width, 1.5rem)',
+    height: 'var(--_icon-height, 1.5rem)',
   },
 });
 
 /**
- * Size styles for icon boxes and string-based registry icons. `fontSize`
- * keeps 1em-based icons in step with the box.
+ * Size styles for component-owned icon boxes. `fontSize` keeps 1em-based icons
+ * in step with the box.
  */
 export const iconBoxSizeStyles = stylex.create({
   xsm: {

package/src/Icon/globalIconRegistry.test.tsx

@@ -1,8 +1,18 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-import {describe, it, expect, beforeEach, afterEach, vi} from 'vitest';
-import {render} from '@testing-library/react';
-import {defineTheme} from '../theme/defineTheme';
+import {
+  describe,
+  it,
+  expect,
+  expectTypeOf,
+  beforeEach,
+  afterEach,
+  vi,
+} from 'vitest';
+import type {ReactNode} from 'react';
+import {render, screen} from '@testing-library/react';
+import {Theme} from '../theme/Theme';
+import {defineTheme, type DefinedTheme} from '../theme/defineTheme';
 import {resetThemes} from '../theme/themeRegistry';
 import {__resetDevWarnings} from '../utils/devWarning';
 import {defaultIcons} from './defaultIcons';
@@ -12,9 +22,24 @@ import {
   getIcon,
   getExtendedIcon,
   resetIcons,
+  resolveIcon,
+  type IconEntry,
   type IconRegistry,
+  type IconRequest,
 } from './globalIconRegistry';
 import {Icon} from './Icon';
+import type {IconSize} from './IconSize.stylex';
+import type {IconVariant, IconVariantMap} from './index';
+import {useIcon} from './useIcon';
+
+// An application augments the public map with the variant names it requests
+// (spec:AST-087 FR3).
+declare module './index' {
+  interface IconVariantMap {
+    outline: true;
+    filled: true;
+  }
+}
 
 describe('iconRegistry (global, RSC-compatible)', () => {
   beforeEach(() => {
@@ -218,4 +243,371 @@ describe('iconRegistry (global, RSC-compatible)', () => {
       expect(getExtendedIcon('richtext:bold', 'fallback')).toBe('fallback');
     });
   });
+
+  // spec:AST-087 FR1, FR6, FR7, FR9, FR18 — an entry is a node or a pure
+  // function of the request; sources resolve before the request; public reads
+  // stay node-valued and read a function at {size: 'md'}.
+  describe('function entries', () => {
+    const sized = (label: string) => (request: IconRequest) =>
+      `${label}-${request.size}`;
+
+    it('calls a theme function entry with the requested size', () => {
+      const info = vi.fn(sized('theme-info'));
+      const theme = defineTheme({name: 'fn-theme', icons: {info}});
+
+      for (const size of ['xsm', 'sm', 'md', 'lg'] as const) {
+        expect(resolveIcon('info', theme, {size})).toBe(`theme-info-${size}`);
+        expect(info).toHaveBeenLastCalledWith({size});
+      }
+    });
+
+    it('calls a process-wide function entry with the requested size', () => {
+      const info = vi.fn(sized('global-info'));
+      registerIcons({info});
+
+      expect(resolveIcon('info', null, {size: 'lg'})).toBe('global-info-lg');
+      expect(info).toHaveBeenLastCalledWith({size: 'lg'});
+    });
+
+    it('resolves a function entry for a namespaced key', () => {
+      const theme = defineTheme({
+        name: 'fn-namespaced',
+        icons: {'numberInput:stepperDown': sized('stepper')},
+      });
+
+      expect(resolveIcon('numberInput:stepperDown', theme, {size: 'xsm'})).toBe(
+        'stepper-xsm',
+      );
+    });
+
+    it('resolves through a registered theme name', () => {
+      defineTheme({name: 'fn-by-name', icons: {info: sized('named-info')}});
+
+      expect(resolveIcon('info', 'fn-by-name', {size: 'sm'})).toBe(
+        'named-info-sm',
+      );
+      expect(getIcon('info', 'fn-by-name')).toBe('named-info-md');
+    });
+
+    describe('source precedence', () => {
+      it('prefers a theme entry over a process-wide registration and the default', () => {
+        const global = vi.fn(sized('global-info'));
+        registerIcons({info: global});
+        const theme = defineTheme({
+          name: 'fn-precedence',
+          icons: {info: sized('theme-info')},
+        });
+
+        expect(resolveIcon('info', theme, {size: 'sm'})).toBe('theme-info-sm');
+        expect(global).not.toHaveBeenCalled();
+      });
+
+      it('prefers a process-wide registration over the built-in default', () => {
+        registerIcons({info: sized('global-info')});
+
+        expect(resolveIcon('info', null, {size: 'sm'})).toBe('global-info-sm');
+        expect(getIcon('info')).toBe('global-info-md');
+      });
+
+      it('uses the built-in default when neither source has an entry', () => {
+        const theme = defineTheme({
+          name: 'fn-default',
+          icons: {close: sized('theme-close')},
+        });
+
+        expect(resolveIcon('info', theme, {size: 'sm'})).toBe(
+          defaultIcons.info,
+        );
+      });
+
+      it('lets a nullish static theme entry fall through to the next source', () => {
+        registerIcons({info: sized('global-info')});
+        const theme = defineTheme({
+          name: 'fn-nullish-static',
+          icons: {info: null, close: undefined},
+        });
+
+        expect(resolveIcon('info', theme, {size: 'sm'})).toBe('global-info-sm');
+        expect(resolveIcon('close', theme, {size: 'sm'})).toBe(
+          defaultIcons.close,
+        );
+      });
+
+      it('treats a selected function result as final, even when nullish', () => {
+        registerIcons({info: 'global-info', close: 'global-close'});
+        const theme = defineTheme({
+          name: 'fn-final',
+          icons: {info: () => null, close: () => undefined},
+        });
+
+        expect(resolveIcon('info', theme, {size: 'sm'})).toBeNull();
+        expect(resolveIcon('close', theme, {size: 'sm'})).toBeUndefined();
+        expect(getIcon('info', theme)).toBeNull();
+        expect(getIconRegistry(theme).info).toBeNull();
+        expect(getExtendedIcon('info', 'fallback', theme)).toBeNull();
+      });
+
+      it('treats a process-wide function result as final', () => {
+        registerIcons({info: () => null});
+
+        expect(resolveIcon('info', null, {size: 'sm'})).toBeNull();
+        expect(getIcon('info')).toBeNull();
+        expect(getExtendedIcon('info', 'fallback')).toBeNull();
+      });
+
+      it('returns a function result per request, never mixing sources', () => {
+        // The theme draws only `sm`; every other size draws nothing rather than
+        // borrowing the default's artwork.
+        const theme = defineTheme({
+          name: 'fn-partial',
+          icons: {info: ({size}) => (size === 'sm' ? 'theme-info-sm' : null)},
+        });
+
+        expect(resolveIcon('info', theme, {size: 'sm'})).toBe('theme-info-sm');
+        expect(resolveIcon('info', theme, {size: 'lg'})).toBeNull();
+      });
+    });
+
+    describe('extends', () => {
+      it('inherits a base function entry and keeps calling it per request', () => {
+        const base = defineTheme({
+          name: 'fn-base',
+          icons: {info: sized('base-info')},
+        });
+        const child = defineTheme({name: 'fn-child', extends: base});
+
+        expect(resolveIcon('info', child, {size: 'lg'})).toBe('base-info-lg');
+        expect(child.icons?.info).toBe('base-info-md');
+      });
+
+      it("replaces the inherited entry whole with the child's entry for the same key", () => {
+        const base = defineTheme({
+          name: 'fn-base-replace',
+          icons: {info: sized('base-info'), close: 'base-close'},
+        });
+        const child = defineTheme({
+          name: 'fn-child-replace',
+          extends: base,
+          icons: {info: 'child-info', close: sized('child-close')},
+        });
+
+        expect(resolveIcon('info', child, {size: 'lg'})).toBe('child-info');
+        expect(resolveIcon('close', child, {size: 'lg'})).toBe(
+          'child-close-lg',
+        );
+        expect(child.icons).toEqual({
+          info: 'child-info',
+          close: 'child-close-md',
+        });
+      });
+    });
+
+    describe('public reads stay node-valued', () => {
+      it('getIcon reads a theme function entry at md', () => {
+        const info = vi.fn(sized('theme-info'));
+        const theme = defineTheme({name: 'fn-read', icons: {info}});
+        info.mockClear();
+
+        expect(getIcon('info', theme)).toBe('theme-info-md');
+        expect(info).toHaveBeenCalledWith({size: 'md'});
+      });
+
+      it('getIconRegistry reads every function entry at md', () => {
+        registerIcons({close: sized('global-close')});
+        const theme = defineTheme({
+          name: 'fn-snapshot',
+          icons: {info: sized('theme-info')},
+        });
+
+        const registry = getIconRegistry(theme);
+        expect(registry.info).toBe('theme-info-md');
+        expect(registry.close).toBe('global-close-md');
+        expect(registry.check).toBe(defaultIcons.check);
+        expect(
+          Object.values(registry).some(value => typeof value === 'function'),
+        ).toBe(false);
+      });
+
+      it('getExtendedIcon reads a function entry at md', () => {
+        registerIcons({'richtext:bold': sized('bold')});
+
+        expect(getExtendedIcon('richtext:bold', 'fallback')).toBe('bold-md');
+      });
+
+      it("DefinedTheme['icons'] holds the md node for a function entry", () => {
+        const theme = defineTheme({
+          name: 'fn-public-icons',
+          icons: {info: sized('theme-info'), close: 'theme-close'},
+        });
+
+        expect(theme.icons).toEqual({
+          info: 'theme-info-md',
+          close: 'theme-close',
+        });
+      });
+
+      it('useIcon reads a function entry at md from the nearest Theme', () => {
+        const theme = defineTheme({
+          name: 'fn-hook',
+          icons: {info: sized('theme-info')},
+        });
+        function Probe() {
+          return <span data-testid="probe">{useIcon('info')}</span>;
+        }
+
+        render(
+          <Theme theme={theme}>
+            <Probe />
+          </Theme>,
+        );
+
+        expect(screen.getByTestId('probe')).toHaveTextContent('theme-info-md');
+      });
+
+      it('keeps public read types node-valued while entries accept functions', () => {
+        expectTypeOf<IconRegistry['info']>().toEqualTypeOf<ReactNode>();
+        expectTypeOf(getIcon).returns.toEqualTypeOf<ReactNode>();
+        expectTypeOf(getIconRegistry).returns.toEqualTypeOf<
+          Readonly<Record<keyof IconRegistry, ReactNode>>
+        >();
+        expectTypeOf<
+          NonNullable<DefinedTheme['icons']>['info']
+        >().toEqualTypeOf<ReactNode>();
+        expectTypeOf<IconRequest>().toEqualTypeOf<
+          Readonly<{size: IconSize; variant?: IconVariant}>
+        >();
+        expectTypeOf<IconEntry>().toEqualTypeOf<
+          ReactNode | ((request: IconRequest) => ReactNode)
+        >();
+
+        defineTheme({
+          name: 'fn-types',
+          icons: {
+            info: ({size, variant}) => {
+              expectTypeOf(size).toEqualTypeOf<IconSize>();
+              expectTypeOf(variant).toEqualTypeOf<undefined>();
+              return null;
+            },
+            // @ts-expect-error — an entry returns artwork, not a props object.
+            close: () => ({weight: 'bold'}),
+          },
+        });
+        registerIcons({
+          info: ({size}) => `global-${size}`,
+          // @ts-expect-error — the request has no `name`.
+          close: ({name}) => String(name),
+        });
+      });
+    });
+
+    describe('variant names', () => {
+      it('types a process-wide entry by the augmentable IconVariantMap', () => {
+        expectTypeOf<IconVariant>().toEqualTypeOf<
+          keyof IconVariantMap & string
+        >();
+        expectTypeOf<IconVariant>().toEqualTypeOf<'outline' | 'filled'>();
+
+        registerIcons({
+          info: ({variant}) => {
+            expectTypeOf(variant).toEqualTypeOf<
+              'outline' | 'filled' | undefined
+            >();
+            return variant === 'filled' ? 'global-info-filled' : 'global-info';
+          },
+          close: ({variant}) =>
+            // @ts-expect-error — 'bold' is not an augmented variant name.
+            variant === 'bold' ? 'bold-close' : 'close',
+        });
+      });
+
+      it('passes a listed variant to theme and process-wide entries only', () => {
+        const themeInfo = vi.fn(
+          ({variant}: IconRequest) => `theme-${variant ?? 'normal'}`,
+        );
+        const globalClose = vi.fn(
+          ({variant}: IconRequest) => `global-${variant ?? 'normal'}`,
+        );
+        registerIcons({close: globalClose});
+        const theme = defineTheme({
+          name: 'resolve-listed',
+          iconVariants: ['filled'],
+          icons: {info: themeInfo},
+        });
+
+        expect(
+          resolveIcon('info', theme, {size: 'sm', variant: 'filled'}),
+        ).toBe('theme-filled');
+        expect(
+          resolveIcon('close', theme, {size: 'sm', variant: 'filled'}),
+        ).toBe('global-filled');
+        expect(
+          resolveIcon('info', theme, {size: 'sm', variant: 'outline'}),
+        ).toBe('theme-normal');
+        expect(
+          resolveIcon('close', null, {size: 'sm', variant: 'filled'}),
+        ).toBe('global-normal');
+        expect(
+          resolveIcon('check', theme, {size: 'sm', variant: 'filled'}),
+        ).toBe(defaultIcons.check);
+      });
+
+      it('keeps the defining list through more than one extends', () => {
+        const grandparent = defineTheme({
+          name: 'resolve-grandparent',
+          iconVariants: ['outline'],
+          icons: {info: ({variant}) => `info-${variant ?? 'normal'}`},
+        });
+        const parent = defineTheme({
+          name: 'resolve-parent',
+          extends: grandparent,
+          iconVariants: ['outline', 'filled'],
+        });
+        const child = defineTheme({name: 'resolve-child', extends: parent});
+
+        expect(child.iconVariants).toEqual(['outline', 'filled']);
+        expect(
+          resolveIcon('info', child, {size: 'md', variant: 'filled'}),
+        ).toBe('info-normal');
+        expect(
+          resolveIcon('info', child, {size: 'md', variant: 'outline'}),
+        ).toBe('info-outline');
+      });
+
+      it('never passes a variant through public reads', () => {
+        const info = vi.fn(
+          ({variant}: IconRequest) => `info-${variant ?? 'normal'}`,
+        );
+        const theme = defineTheme({
+          name: 'resolve-public-reads',
+          iconVariants: ['outline', 'filled'],
+          icons: {info},
+        });
+
+        expect(getIcon('info', theme)).toBe('info-normal');
+        expect(getIconRegistry(theme).info).toBe('info-normal');
+        expect(getExtendedIcon('info', 'fallback', theme)).toBe('info-normal');
+        expect(theme.icons?.info).toBe('info-normal');
+      });
+
+      it('passes no variant to an entry, so it draws its normal artwork', () => {
+        const info = vi.fn(({variant}: IconRequest) =>
+          variant === 'filled' ? 'filled-info' : 'normal-info',
+        );
+        registerIcons({info});
+        const theme = defineTheme({
+          name: 'fn-listed',
+          iconVariants: ['outline', 'filled'],
+          icons: {close: info},
+        });
+
+        expect(resolveIcon('info', theme, {size: 'sm'})).toBe('normal-info');
+        expect(resolveIcon('close', theme, {size: 'sm'})).toBe('normal-info');
+        expect(getIcon('close', theme)).toBe('normal-info');
+        expect(info).toHaveBeenCalled();
+        for (const [request] of info.mock.calls) {
+          expect(request.variant).toBeUndefined();
+        }
+      });
+    });
+  });
 });