@astryxdesign/core 0.2.0-canary.85f5022 → 0.2.0-canary.8dfd7cf

package/src/SegmentedControl/SegmentedControlItem.tsx

@@ -12,7 +12,7 @@
  * - /packages/core/src/SegmentedControl/SegmentedControl.doc.mjs
  * - /packages/core/src/SegmentedControl/index.ts
  * - /packages/core/src/SegmentedControl/SegmentedControl.test.tsx
- * - /packages/cli/templates/blocks/components/SegmentedControl/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/SegmentedControl/ (showcase blocks)
  */
 
 import React, {type ReactNode} from 'react';
@@ -103,9 +103,27 @@ const styles = stylex.create({
     },
   },
   selected: {
-    color: colorVars['--color-text-primary'],
+    // Forced colors (Windows High Contrast) strips the painted surface fill
+    // and box shadow, which would leave the selected segment with no state
+    // indication beyond font weight. Highlight/HighlightText is the platform
+    // convention for a selected item (WCAG 1.4.11).
+    //
+    // forced-color-adjust must be `none` here: the segment is a <button>, and
+    // the UA keeps native form-control colors (ButtonFace surface) for it under
+    // forced colors, ignoring the authored Highlight fill — the label kept its
+    // HighlightText color, giving white text on a white surface. Opting the
+    // selected segment out of UA remapping makes both the Highlight surface and
+    // the HighlightText label render as authored, restoring figure-ground.
+    forcedColorAdjust: 'none',
+    color: {
+      default: colorVars['--color-text-primary'],
+      '@media (forced-colors: active)': 'HighlightText',
+    },
     fontWeight: fontWeightVars['--font-weight-semibold'],
-    backgroundColor: colorVars['--color-background-surface'],
+    backgroundColor: {
+      default: colorVars['--color-background-surface'],
+      '@media (forced-colors: active)': 'Highlight',
+    },
     boxShadow: shadowVars['--shadow-low'],
   },
   disabled: {

package/src/SelectableCard/SelectableCard.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 export const docs = {
   name: 'SelectableCard',
   displayName: 'Selectable Card',
@@ -12,6 +12,7 @@ export const docs = {
     bestPractices: [
       {guidance: true, description: 'Use for plan pickers, filter chips, or option grids.'},
       {guidance: true, description: 'For single-select track one ID; for multi-select use a Set.'},
+      {guidance: true, description: 'When focused, toggle selection with Space or Enter.'},
       {guidance: false, description: 'Use for navigation; use ClickableCard for that.'},
     ],
     anatomy: [
@@ -54,7 +55,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description: 'Card toggling between selected/unselected states w/ accent border. For navigation use ClickableCard instead.',
   usage: {
@@ -62,6 +63,7 @@ export const docsDense = {
     bestPractices: [
       {guidance: true, description: 'Use for plan pickers, filter chips, option grids.'},
       {guidance: true, description: 'For single-select track one ID; for multi-select use a Set.'},
+      {guidance: true, description: 'When focused, toggle selection with Space or Enter.'},
       {guidance: false, description: 'Use for navigation; use ClickableCard instead.'},
     ],
   },

package/src/SelectableCard/SelectableCard.test.tsx

@@ -108,6 +108,61 @@ describe('SelectableCard', () => {
     expect(handleChange).not.toHaveBeenCalled();
   });
 
+  it('calls onChange with true when Enter is pressed on the checkbox (unselected)', () => {
+    const handleChange = vi.fn();
+    render(
+      <SelectableCard label="Test" isSelected={false} onChange={handleChange}>
+        Content
+      </SelectableCard>,
+    );
+    const checkbox = screen.getByRole('checkbox', {name: 'Test'});
+    fireEvent.keyDown(checkbox, {key: 'Enter'});
+    expect(handleChange).toHaveBeenCalledWith(true);
+  });
+
+  it('calls onChange with false when Enter is pressed on the checkbox (selected)', () => {
+    const handleChange = vi.fn();
+    render(
+      <SelectableCard label="Test" isSelected={true} onChange={handleChange}>
+        Content
+      </SelectableCard>,
+    );
+    const checkbox = screen.getByRole('checkbox', {name: 'Test'});
+    fireEvent.keyDown(checkbox, {key: 'Enter'});
+    expect(handleChange).toHaveBeenCalledWith(false);
+  });
+
+  it('does not toggle on Enter when disabled', () => {
+    const handleChange = vi.fn();
+    render(
+      <SelectableCard
+        label="Disabled"
+        isSelected={false}
+        onChange={handleChange}
+        isDisabled>
+        Content
+      </SelectableCard>,
+    );
+    const checkbox = screen.getByRole('checkbox', {name: 'Disabled'});
+    fireEvent.keyDown(checkbox, {key: 'Enter'});
+    expect(handleChange).not.toHaveBeenCalled();
+  });
+
+  it('toggles exactly once on Space (native), not doubled by the Enter handler', () => {
+    const handleChange = vi.fn();
+    render(
+      <SelectableCard label="Test" isSelected={false} onChange={handleChange}>
+        Content
+      </SelectableCard>,
+    );
+    const checkbox = screen.getByRole('checkbox', {name: 'Test'});
+    // Space activates the native checkbox, firing a single change event.
+    fireEvent.click(checkbox);
+    fireEvent.keyDown(checkbox, {key: ' '});
+    expect(handleChange).toHaveBeenCalledTimes(1);
+    expect(handleChange).toHaveBeenCalledWith(true);
+  });
+
   describe('elevation', () => {
     const noop = () => {};
 

package/src/SelectableCard/SelectableCard.tsx

@@ -12,9 +12,9 @@
  * - /packages/core/src/SelectableCard/SelectableCard.doc.mjs (props table, features)
  * - /packages/core/src/SelectableCard/index.ts (exports if types change)
  * - /apps/storybook/stories/SelectableCard.stories.tsx (storybook stories)
- * - /packages/cli/templates/blocks/components/Card/SelectableCardShowcase.tsx (showcase block)
- * - /packages/cli/templates/blocks/components/Card/SelectableCardMulti.tsx (block)
- * - /packages/cli/templates/blocks/components/Card/SelectableCardElevated.tsx (block)
+ * - /packages/cli/assets/templates/blocks/components/Card/SelectableCardShowcase.tsx (showcase block)
+ * - /packages/cli/assets/templates/blocks/components/Card/SelectableCardMulti.tsx (block)
+ * - /packages/cli/assets/templates/blocks/components/Card/SelectableCardElevated.tsx (block)
  *
  * Composes Card for all visual styling. Adds selection state with
  * an inset box-shadow (zero layout jitter) and useClickableContainer
@@ -22,6 +22,7 @@
  *
  * A hidden <input type="checkbox"> inside the card provides the accessible
  * role, label, and checked state — the card surface itself has no role/tabIndex.
+ * Space toggles it natively; Enter is wired up as an additional toggle key.
  *
  * For static display, use Card.
  * For navigation or action cards, use ClickableCard.
@@ -30,6 +31,7 @@
 import {
   type ReactNode,
   type MouseEvent,
+  type KeyboardEvent,
   useRef,
   useCallback,
   type Ref,
@@ -311,6 +313,19 @@ export function SelectableCard({
     [isDisabled, isSelected, onChange],
   );
 
+  // The focusable control is a native checkbox, which toggles on Space but
+  // ignores Enter. Add Enter as an extra toggle key; Space keeps its native
+  // handling, so we deliberately do not toggle on Space here (would double).
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLInputElement>) => {
+      if (!isDisabled && event.key === 'Enter') {
+        event.preventDefault();
+        onChange(!isSelected);
+      }
+    },
+    [isDisabled, isSelected, onChange],
+  );
+
   const {onClick, onMouseUp} = useClickableContainer({
     containerRef,
     interactiveRef,
@@ -369,6 +384,7 @@ export function SelectableCard({
         aria-label={label}
         disabled={isDisabled}
         onChange={() => onChange(!isSelected)}
+        onKeyDown={handleKeyDown}
         {...stylex.props(styles.srOnly)}
       />
       {children}

package/src/Selector/Selector.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'Selector',
@@ -252,7 +252,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsZh = {
   usage: {
     description:
@@ -344,7 +344,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   usage: {
     description:

package/src/Selector/Selector.test.tsx

@@ -613,6 +613,28 @@ describe('Selector', () => {
       expect(within(listbox).getByText('No results found')).toBeInTheDocument();
     });
 
+    it('empty-state message is not exposed as a listbox child', async () => {
+      const user = userEvent.setup();
+      render(
+        <Selector
+          label="Fruit"
+          options={OPTIONS}
+          value="Apple"
+          onChange={() => {}}
+          hasSearch
+        />,
+      );
+      await user.click(screen.getByRole('button', {name: 'Fruit'}));
+      await user.type(screen.getByRole('combobox', h), 'xyz');
+
+      // role="listbox" only permits option/group children — the visual
+      // empty-state message must be presentational (it is announced through
+      // the result-count live region instead).
+      const listbox = screen.getByRole('listbox', h);
+      const empty = within(listbox).getByText('No results found');
+      expect(empty).toHaveAttribute('role', 'presentation');
+    });
+
     it('calls onChange when selecting a filtered option', async () => {
       const user = userEvent.setup();
       const onChange = vi.fn();
@@ -1219,6 +1241,36 @@ describe('Selector statusVariant forwarding', () => {
       'detached',
     );
   });
+
+  it('keeps the on-field status icon for the attached variant', () => {
+    const {container} = render(
+      <Selector
+        label="Fruit"
+        options={['Apple', 'Banana']}
+        status={{type: 'error', message: 'Required'}}
+      />,
+    );
+    // Attached: the status glyph replaces the chevron indicator on the field.
+    expect(
+      container.querySelector('.astryx-selector-indicator-icon'),
+    ).toBeNull();
+  });
+
+  it('suppresses the on-field status icon for the detached variant', () => {
+    const {container} = render(
+      <Selector
+        label="Fruit"
+        options={['Apple', 'Banana']}
+        status={{type: 'error', message: 'Required'}}
+        statusVariant="detached"
+      />,
+    );
+    // Detached: the message box below carries its own leading icon, so the
+    // field keeps its chevron indicator rather than duplicating the glyph.
+    expect(
+      container.querySelector('.astryx-selector-indicator-icon'),
+    ).not.toBeNull();
+  });
 });
 
 describe('Selector clear icon theme target', () => {

package/src/Selector/Selector.tsx

@@ -13,7 +13,7 @@
  * - /packages/core/src/Selector/Selector.test.tsx
  * - /packages/core/src/Selector/index.ts
  * - /apps/storybook/stories/InputGroup.stories.tsx
- * - /packages/cli/templates/blocks/components/Selector/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Selector/ (showcase blocks)
  */
 
 import React, {
@@ -963,8 +963,15 @@ export function Selector<T extends SelectorOptionType>(
 
     // Nothing matched across every group/option: show the empty state.
     if (isSearching && filteredItems.length === 0) {
+      // role="presentation" keeps the message out of the listbox's
+      // accessibility tree (role="listbox" only permits option/group
+      // children); the no-results outcome is announced via the
+      // result-count live region instead.
       return [
-        <div key="empty" {...stylex.props(styles.emptyState)}>
+        <div
+          key="empty"
+          role="presentation"
+          {...stylex.props(styles.emptyState)}>
           No results found
         </div>,
       ];
@@ -1025,6 +1032,10 @@ export function Selector<T extends SelectorOptionType>(
     return elements;
   }, [options, renderItem, hasSearch, searchQuery, filteredItems]);
 
+  // The detached message box renders its own leading status icon, so the
+  // on-field icon would duplicate it — keep the chevron indicator instead.
+  const showStatusIcon = status != null && statusVariant !== 'detached';
+
   const selectorContent = (
     <>
       <div
@@ -1125,10 +1136,10 @@ export function Selector<T extends SelectorOptionType>(
         <span
           {...stylex.props(
             styles.triggerIcon,
-            !status && popover.isOpen && styles.triggerIconOpen,
-            status && styles.triggerIconStatus,
+            !showStatusIcon && popover.isOpen && styles.triggerIconOpen,
+            showStatusIcon && styles.triggerIconStatus,
           )}>
-          {status ? (
+          {showStatusIcon ? (
             <Icon
               icon={STATUS_ICON_MAP[status.type]}
               size="sm"

package/src/Selector/SelectorOption.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'SelectorOption',

package/src/SideNav/SideNav.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'SideNav',
@@ -142,7 +142,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsZh = {
   usage: {
     description:
@@ -161,7 +161,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   usage: {
     description:

package/src/SideNav/SideNav.tsx

@@ -18,7 +18,7 @@
  * - /packages/core/src/SideNav/SideNav.test.tsx
  * - /packages/core/src/SideNav/index.ts
  * - /apps/storybook/stories/SideNav.stories.tsx
- * - /packages/cli/templates/blocks/components/SideNav/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/SideNav/ (showcase blocks)
  */
 
 import {

package/src/SideNav/SideNavCollapseButton.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'SideNavCollapseButton',

package/src/SideNav/SideNavCollapseButton.tsx

@@ -14,13 +14,13 @@
  * SYNC: When modified, update:
  * - /packages/core/src/SideNav/SideNav.doc.mjs
  * - /packages/core/src/SideNav/index.ts
- * - /packages/cli/templates/blocks/components/SideNav/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/SideNav/ (showcase blocks)
  */
 
 import React, {type ReactNode} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {durationVars, easeVars} from '../theme/tokens.stylex';
-import {getIcon} from '../Icon/globalIconRegistry';
+import {useIcon} from '../Icon';
 import {Button} from '../Button';
 import type {BaseProps} from '../BaseProps';
 import {composeEventHandlers, rtlStyles} from '../utils';
@@ -107,6 +107,7 @@ export function SideNavCollapseButton({
   ...props
 }: SideNavCollapseButtonProps) {
   const t = useTranslator();
+  const chevronLeftIcon = useIcon('chevronLeft');
   const {isCollapsed, toggle, isCollapsible} =
     useSideNavCollapseState(handleRef);
   const {isMobile} = useAppShellMobile();
@@ -137,7 +138,7 @@ export function SideNavCollapseButton({
                 styles.chevron,
                 isCollapsed && styles.chevronCollapsed,
               )}>
-              {getIcon('chevronLeft')}
+              {chevronLeftIcon}
             </span>
           </span>
         )

package/src/SideNav/SideNavHeading.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'SideNavHeading',

package/src/SideNav/SideNavHeading.tsx

@@ -16,7 +16,7 @@
  * - /packages/core/src/SideNav/SideNav.test.tsx
  * - /packages/core/src/SideNav/index.ts
  * - /apps/storybook/stories/SideNav.stories.tsx
- * - /packages/cli/templates/blocks/components/SideNav/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/SideNav/ (showcase blocks)
  */
 
 import {useMemo, useRef, type ReactNode} from 'react';
@@ -33,7 +33,7 @@ import {
 // of lazy loading layer resources.
 import {usePopover} from '../Popover/usePopover';
 import {Link} from '../Link';
-import {getIcon} from '../Icon/globalIconRegistry';
+import {useIcon} from '../Icon';
 import {Tooltip} from '../Tooltip';
 import {navItemStyles} from '../NavItem/navItemStyles.stylex';
 import {useSideNavCollapse} from './SideNavCollapseContext';
@@ -344,6 +344,7 @@ export function SideNavHeading({
   ...props
 }: SideNavHeadingProps) {
   const t = useTranslator();
+  const chevronDownIcon = useIcon('chevronDown');
   const LinkComponent = useLinkComponent(as);
   const {isCollapsed} = useSideNavCollapse();
   const rootRef = useRef<HTMLDivElement>(null);
@@ -454,7 +455,7 @@ export function SideNavHeading({
                       {heading}
                     </span>
                     <span {...stylex.props(styles.popoverChevron)}>
-                      {getIcon('chevronDown')}
+                      {chevronDownIcon}
                     </span>
                   </span>
                   {subheading && (
@@ -550,7 +551,7 @@ export function SideNavHeading({
   );
 
   const chevronElement = showChevron && (
-    <span {...stylex.props(styles.chevron)}>{getIcon('chevronDown')}</span>
+    <span {...stylex.props(styles.chevron)}>{chevronDownIcon}</span>
   );
 
   const headerEndContentElement = headerEndContent && (
@@ -566,9 +567,7 @@ export function SideNavHeading({
       onClick={triggerProps.onClick}>
       {icon && <span {...stylex.props(styles.icon)}>{icon}</span>}
       {renderTextContent(
-        <span {...stylex.props(styles.popoverChevron)}>
-          {getIcon('chevronDown')}
-        </span>,
+        <span {...stylex.props(styles.popoverChevron)}>{chevronDownIcon}</span>,
       )}
     </button>
   );
@@ -620,7 +619,7 @@ export function SideNavHeading({
               }}
               {...popover.triggerProps}
               {...stylex.props(styles.chevron, styles.interactive)}>
-              {getIcon('chevronDown')}
+              {chevronDownIcon}
             </button>,
           )}
           {headerEndContentElement}
@@ -686,7 +685,7 @@ export function SideNavHeading({
                 }}
                 {...popover.triggerProps}
                 {...stylex.props(styles.chevron, styles.interactive)}>
-                {getIcon('chevronDown')}
+                {chevronDownIcon}
               </button>
             ) : undefined,
           )}

package/src/SideNav/SideNavItem.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'SideNavItem',

package/src/SideNav/SideNavItem.tsx

@@ -15,7 +15,7 @@
  * - /packages/core/src/SideNav/SideNav.test.tsx
  * - /packages/core/src/SideNav/index.ts
  * - /apps/storybook/stories/SideNav.stories.tsx
- * - /packages/cli/templates/blocks/components/SideNav/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/SideNav/ (showcase blocks)
  */
 
 import {
@@ -38,7 +38,7 @@ import {
   borderVars,
   radiusVars,
 } from '../theme/tokens.stylex';
-import {renderIconSlot, type IconType} from '../Icon';
+import {renderIconSlot, useIcon, type IconType} from '../Icon';
 import {useLinkComponent} from '../Link/useLinkComponent';
 import type {LinkComponentType} from '../Link/types';
 import {usePopover} from '../Popover/usePopover';
@@ -50,7 +50,6 @@ import {
   useSideNavCollapse,
   SideNavCollapseContext,
 } from './SideNavCollapseContext';
-import {getIcon} from '../Icon/globalIconRegistry';
 import {useSideNavRenderMode} from './SideNavRenderContext';
 import {useAppShellMobile} from '../AppShell/AppShellMobileContext';
 import {themeProps} from '../utils/themeProps';
@@ -357,9 +356,9 @@ export function SideNavItem({
   'data-testid': testId,
   ref,
   xstyle,
-  ...rest
 }: SideNavItemProps) {
   const t = useTranslator();
+  const chevronDownIcon = useIcon('chevronDown');
   const {isCollapsed} = useSideNavCollapse();
   const renderMode = useSideNavRenderMode();
   const {closeMobileNav} = useAppShellMobile();
@@ -580,7 +579,7 @@ export function SideNavItem({
             styles.expandChevron,
             !isItemCollapsed && styles.expandChevronExpanded,
           )}>
-          {getIcon('chevronDown')}
+          {chevronDownIcon}
         </span>
       )}
     </>
@@ -643,7 +642,7 @@ export function SideNavItem({
               styles.expandChevron,
               !isItemCollapsed && styles.expandChevronExpanded,
             )}>
-            {getIcon('chevronDown')}
+            {chevronDownIcon}
           </span>
         </button>
       </div>

package/src/SideNav/SideNavSection.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'SideNavSection',

package/src/SideNav/SideNavSection.tsx

@@ -15,7 +15,7 @@
  * - /packages/core/src/SideNav/SideNav.test.tsx
  * - /packages/core/src/SideNav/index.ts
  * - /apps/storybook/stories/SideNav.stories.tsx
- * - /packages/cli/templates/blocks/components/SideNav/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/SideNav/ (showcase blocks)
  */
 
 import React, {useId, type ReactNode} from 'react';

package/src/Skeleton/Skeleton.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'Skeleton',
@@ -61,7 +61,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 export const docsZh = {
   name: 'Skeleton',
   displayName: 'Skeleton',
@@ -110,7 +110,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   usage: {
     description:

package/src/Skeleton/Skeleton.test.tsx

@@ -3,6 +3,7 @@
 import {describe, it, expect} from 'vitest';
 import {render, screen} from '@testing-library/react';
 import {Skeleton} from './Skeleton';
+import {getForcedColorsRules} from '../__tests__/forcedColors';
 
 describe('Skeleton', () => {
   it('renders a placeholder element', () => {
@@ -23,3 +24,18 @@ describe('Skeleton', () => {
     expect(screen.getByTestId('sk')).toHaveAttribute('aria-hidden', 'false');
   });
 });
+
+// jsdom cannot emulate forced-colors rendering, so these assert that the
+// compiled output includes the forced-colors rules; visual behavior needs
+// manual verification under Windows High Contrast.
+describe('forced colors (WCAG 1.4.11)', () => {
+  it('compiles forced-colors overrides so the placeholder stays visible under Windows High Contrast', () => {
+    render(<Skeleton width={200} height={20} data-testid="sk" />);
+    const css = getForcedColorsRules();
+    // The painted fill is stripped to Canvas (invisible); GrayText is a
+    // system color, so it survives forcing.
+    expect(css).toContain('background-color: graytext;');
+    // The resting 0.25 opacity is lifted so the static placeholder reads.
+    expect(css).toContain('opacity: 1;');
+  });
+});