@astryxdesign/core 0.1.6 → 0.1.7-canary.04cd8f7

package/src/Lightbox/Lightbox.tsx

@@ -35,6 +35,7 @@ import {useIsomorphicLayoutEffect} from '../hooks/useIsomorphicLayoutEffect';
 import {mergeProps, mergeRefs} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 
 /**
  * Media type for lightbox items.
@@ -282,6 +283,7 @@ export function Lightbox({
   onKeyDown: onKeyDownProp,
   ...props
 }: LightboxProps) {
+  const t = useTranslator();
   const dialogRef = useRef<HTMLDialogElement>(null);
   const imageWrapperRef = useRef<HTMLDivElement>(null);
   const triggerElementRef = useRef<Element | null>(null);
@@ -504,7 +506,7 @@ export function Lightbox({
         handleKeyDown(e);
         onKeyDownProp?.(e);
       }}
-      aria-label={currentItem.alt || 'Media viewer'}
+      aria-label={currentItem.alt || t('@astryx.lightbox.mediaViewer')}
       {...mergeProps(
         themeProps('lightbox'),
         stylex.props(styles.dialog, xstyle),
@@ -517,7 +519,7 @@ export function Lightbox({
         <div {...stylex.props(styles.closeButton)}>
           <IconButton
             icon={<Icon icon="close" size="sm" color="inherit" />}
-            label="Close"
+            label={t('@astryx.lightbox.close')}
             variant="ghost"
             onClick={handleClose}
             xstyle={styles.controlButton}
@@ -531,7 +533,7 @@ export function Lightbox({
           <div {...stylex.props(styles.navButton, styles.navPrev)}>
             <IconButton
               icon={<Icon icon="chevronLeft" size="sm" color="inherit" />}
-              label="Previous"
+              label={t('@astryx.lightbox.previous')}
               variant="ghost"
               isDisabled={!canPrev}
               onClick={goToPrev}
@@ -586,7 +588,7 @@ export function Lightbox({
           <div {...stylex.props(styles.navButton, styles.navNext)}>
             <IconButton
               icon={<Icon icon="chevronRight" size="sm" color="inherit" />}
-              label="Next"
+              label={t('@astryx.lightbox.next')}
               variant="ghost"
               isDisabled={!canNext}
               onClick={goToNext}

package/src/Link/Link.test.tsx

@@ -10,7 +10,7 @@
  */
 
 import {describe, it, expect, vi} from 'vitest';
-import {render, screen} from '@testing-library/react';
+import {fireEvent, render, screen} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {Link} from './Link';
 import {LinkProvider} from './LinkProvider';
@@ -153,9 +153,81 @@ describe('Link', () => {
         Disabled Link
       </Link>,
     );
-    const link = screen.getByRole('link');
+    // An href-less anchor has no implicit `link` role, so query by text.
+    const link = screen.getByText('Disabled Link').closest('a');
+    expect(link).not.toBeNull();
     expect(link).toHaveAttribute('aria-disabled', 'true');
     expect(link).toHaveAttribute('tabIndex', '-1');
+    // Visual classes are preserved in the disabled state.
+    expect(link?.className).toContain('astryx-link');
+  });
+
+  it('disabled link has no href attribute', () => {
+    render(
+      <Link href="/test" isDisabled>
+        Disabled Link
+      </Link>,
+    );
+    const link = screen.getByText('Disabled Link').closest('a');
+    expect(link).not.toBeNull();
+    expect(link).not.toHaveAttribute('href');
+  });
+
+  it('clicking a disabled link cancels default navigation', () => {
+    render(
+      <Link href="/test" isDisabled>
+        Disabled Link
+      </Link>,
+    );
+    const link = screen.getByText('Disabled Link').closest('a');
+    expect(link).not.toBeNull();
+    // fireEvent bypasses pointer-events, simulating programmatic/AT
+    // activation. It returns false when preventDefault was called, i.e.
+    // any default navigation behavior is cancelled.
+    const notCancelled = fireEvent.click(link as HTMLAnchorElement);
+    expect(notCancelled).toBe(false);
+  });
+
+  it('disabled link with onClick fires neither navigation nor the consumer onClick', () => {
+    const handleClick = vi.fn();
+    const {container} = render(
+      <Link href="/test" isDisabled onClick={handleClick}>
+        Disabled Link
+      </Link>,
+    );
+    // With onClick present, a disabled Link renders as a disabled <button>
+    // (useInteractiveRole excludes a disabled href). Either way the rendered
+    // root must carry no live href and never invoke the consumer handler.
+    const el = container.firstElementChild as HTMLElement;
+    expect(el).not.toHaveAttribute('href');
+    fireEvent.click(el);
+    expect(handleClick).not.toHaveBeenCalled();
+  });
+
+  it('disabled link omits target and rel', () => {
+    render(
+      <Link href="https://example.com" isDisabled isExternalLink>
+        Disabled External
+      </Link>,
+    );
+    const link = screen.getByText('Disabled External').closest('a');
+    expect(link).not.toBeNull();
+    expect(link).not.toHaveAttribute('target');
+    expect(link).not.toHaveAttribute('rel');
+  });
+
+  it('disabled link renders a plain anchor, not the custom LinkComponent', () => {
+    render(
+      <LinkProvider component={CustomLink}>
+        <Link href="/custom" as={CustomLink} isDisabled>
+          Disabled Custom
+        </Link>
+      </LinkProvider>,
+    );
+    const link = screen.getByText('Disabled Custom').closest('a');
+    expect(link).not.toBeNull();
+    expect(link).not.toHaveAttribute('data-custom-link');
+    expect(link).not.toHaveAttribute('href');
   });
 
   it('renders external link with icon and target="_blank"', () => {

package/src/Link/Link.tsx

@@ -44,6 +44,7 @@ import {mergeProps} from '../utils';
 import {computeTargetAndRel} from './computeTargetAndRel';
 import {useInteractiveRole} from '../hooks/useInteractiveRole';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 
 /**
  * Base link styles
@@ -174,6 +175,10 @@ export interface LinkProps extends BaseProps<
   hasUnderline?: boolean;
   /**
    * Whether the link is disabled.
+   * A disabled link renders as a plain anchor without an href (and without
+   * target/rel/onClick), so it cannot be focused or activated — no
+   * navigation and no onClick, even via programmatic focus or assistive
+   * technology activation.
    * @default false
    */
   isDisabled?: boolean;
@@ -261,6 +266,15 @@ export interface LinkProps extends BaseProps<
   children: ReactNode;
 }
 
+/**
+ * Click handler for disabled links. The disabled anchor renders without an
+ * href, so there is no navigation to block in practice; preventDefault is a
+ * defensive guard against synthetic/programmatic clicks.
+ */
+function preventDefaultClick(event: React.MouseEvent<HTMLAnchorElement>): void {
+  event.preventDefault();
+}
+
 /**
  * A styled anchor link component.
  *
@@ -286,7 +300,7 @@ export function Link({
   hasUnderline = false,
   isDisabled = false,
   isExternalLink = false,
-  newTabLabel = '(opens in new tab)',
+  newTabLabel: newTabLabelFromProps,
   target: targetFromProps,
   onClick,
   tooltip,
@@ -305,6 +319,8 @@ export function Link({
   ref,
   ...props
 }: LinkProps) {
+  const t = useTranslator();
+  const newTabLabel = newTabLabelFromProps ?? t('@astryx.link.newTab');
   const LinkComponent = useLinkComponent(as);
   const role = useInteractiveRole({href, onClick, isDisabled});
   // Determine target and rel based on isExternalLink
@@ -368,6 +384,37 @@ export function Link({
         {sharedContent}
       </button>
     );
+  } else if (isDisabled) {
+    // A disabled link renders as a plain <a> with no href: an href-less
+    // anchor is not focusable and exposes no link affordance, so programmatic
+    // focus + Enter, AT activation commands, and middle-click cannot navigate
+    // or fire the consumer onClick. The router LinkComponent is deliberately
+    // skipped — a disabled link performs no navigation, and custom router
+    // links may require a live href. target/rel are omitted with the href.
+    linkElement = (
+      <a
+        ref={ref as React.Ref<HTMLAnchorElement>}
+        onClick={preventDefaultClick}
+        aria-label={label || undefined}
+        aria-disabled={true}
+        tabIndex={-1}
+        {...mergeProps(
+          themeProps('link', {color}),
+          stylex.props(
+            styles.base,
+            linkColorStyles[color],
+            hasUnderline && styles.hasUnderline,
+            isStandalone && styles.standalone,
+            styles.disabled,
+            xstyle,
+          ),
+          className,
+          style,
+        )}
+        {...props}>
+        {sharedContent}
+      </a>
+    );
   } else {
     linkElement = (
       <LinkComponent

package/src/Markdown/Markdown.tsx

@@ -56,6 +56,7 @@ import {
 } from './parser';
 import type {BlockNode, InlineNode, IncrementalState} from './parser';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator, type TranslatorFn} from '../i18n';
 
 type SyncReactNode = Exclude<React.ReactNode, Promise<unknown>>;
 
@@ -1041,8 +1042,9 @@ function renderBlock(
   contentWidthValue: string | null,
   contentAlign: 'start' | 'center',
   linkComponent: LinkComponentType = 'a',
-  inlinePlugins?: MarkdownInlinePlugin[],
-  components?: Partial<MarkdownComponents>,
+  inlinePlugins: MarkdownInlinePlugin[] | undefined,
+  components: Partial<MarkdownComponents> | undefined,
+  t: TranslatorFn,
 ): SyncReactNode {
   const blockAlignMargin = BLOCK_ALIGN_MARGIN[contentAlign];
   const blockAlignStyle =
@@ -1197,6 +1199,7 @@ function renderBlock(
             linkComponent,
             inlinePlugins,
             components,
+            t,
           ),
         );
         return <BlockquoteComp key={index}>{bqC}</BlockquoteComp>;
@@ -1230,6 +1233,7 @@ function renderBlock(
               linkComponent,
               inlinePlugins,
               components,
+              t,
             ),
           )}
         </Blockquote>
@@ -1256,7 +1260,7 @@ function renderBlock(
               isLast && styles.noMarginBlockEnd,
             )}>
             <CheckboxList
-              label="Task list"
+              label={t('@astryx.markdown.taskList')}
               isLabelHidden
               value={checkedValues}
               xstyle={styles.blockIndent}
@@ -1300,6 +1304,7 @@ function renderBlock(
                         linkComponent,
                         inlinePlugins,
                         components,
+                        t,
                       ),
                     )}
                   </>
@@ -1378,6 +1383,7 @@ function renderBlock(
                       linkComponent,
                       inlinePlugins,
                       components,
+                      t,
                     ),
                   )}
                 </>
@@ -1407,7 +1413,7 @@ function renderBlock(
           // (axe: landmark-unique).
           tabIndex={0}
           role="group"
-          aria-label="Table"
+          aria-label={t('@astryx.markdown.table')}
           {...stylex.props(
             styles.tableWrapper,
             spacing,
@@ -1567,6 +1573,7 @@ export function Markdown({
   style,
   'data-testid': testId,
 }: MarkdownProps): React.ReactElement {
+  const t = useTranslator();
   const LinkComponent = useLinkComponent();
   // Derive the set of source IDs for the parser (stable across renders when sources don't change)
   const sourceIds = useMemo(
@@ -1725,6 +1732,7 @@ export function Markdown({
           LinkComponent,
           inlinePlugins,
           components,
+          t,
         ),
       )}
     </div>

package/src/MobileNav/MobileNav.tsx

@@ -49,6 +49,7 @@ import {useAppShellMobile} from '../AppShell/AppShellMobileContext';
 import {mergeProps, mergeRefs, composeEventHandlers} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 
 // =============================================================================
 // Styles
@@ -290,6 +291,7 @@ export function MobileNav({
   ref,
   ...rest
 }: MobileNavProps) {
+  const t = useTranslator();
   // Read from AppShell context as fallback
   const appShellMobile = useAppShellMobile();
   const isOpen = isOpenProp ?? appShellMobile.isMobileNavOpen;
@@ -423,7 +425,7 @@ export function MobileNav({
       )}
       {...rest}
       data-testid={testId}
-      aria-label={label ?? (typeof header === 'string' ? header : 'Navigation')}
+      aria-label={label ?? (typeof header === 'string' ? header : t('@astryx.mobileNav.navigation'))}
       onClick={composeEventHandlers(onClickProp, handleDialogClick)}
       onCancel={handleCancel}>
       {/* Drawer panel — tabIndex so showModal() focuses the drawer, not the close button */}
@@ -448,7 +450,7 @@ export function MobileNav({
           )}
           <Button
             variant="ghost"
-            label="Close navigation"
+            label={t('@astryx.mobileNav.closeNavigation')}
             icon={<Icon icon="close" color="inherit" />}
             onClick={() => onOpenChange(false)}
             isIconOnly

package/src/MobileNav/MobileNavToggle.tsx

@@ -18,6 +18,7 @@ import {Button} from '../Button';
 import {Icon} from '../Icon';
 import {useAppShellMobile} from '../AppShell/AppShellMobileContext';
 import type {BaseProps} from '../BaseProps';
+import {useTranslator} from '../i18n';
 
 export interface MobileNavToggleProps extends Pick<
   BaseProps,
@@ -60,14 +61,15 @@ export interface MobileNavToggleProps extends Pick<
 export function MobileNavToggle({
   ref,
   children,
-  label = 'Open navigation',
+  label: labelFromProps,
   'data-testid': testId,
   xstyle,
   className,
   style,
 }: MobileNavToggleProps) {
-  const {isMobile, isMobileNavEnabled, toggleMobileNav} =
-    useAppShellMobile();
+  const t = useTranslator();
+  const label = labelFromProps ?? t('@astryx.mobileNav.toggle.open');
+  const {isMobile, isMobileNavEnabled, toggleMobileNav} = useAppShellMobile();
 
   // Don't render above the breakpoint or when mobile nav is disabled
   if (!isMobile || !isMobileNavEnabled) {

package/src/MoreMenu/MoreMenu.tsx

@@ -26,6 +26,7 @@ import type {DropdownMenuOption} from '../DropdownMenu';
 import type {ButtonVariant, ButtonSize} from '../Button';
 import type {BaseProps} from '../BaseProps';
 import {stableClassName} from '../naming';
+import {useTranslator} from '../i18n';
 
 export interface MoreMenuProps extends Pick<
   BaseProps,
@@ -102,7 +103,7 @@ export interface MoreMenuProps extends Pick<
  */
 export function MoreMenu({
   items,
-  label = 'More options',
+  label: labelFromProps,
   variant = 'ghost',
   size: sizeProp,
   icon,
@@ -115,6 +116,8 @@ export function MoreMenu({
   'data-testid': testId,
   ref,
 }: MoreMenuProps) {
+  const t = useTranslator();
+  const label = labelFromProps ?? t('@astryx.moreMenu.label');
   const size = useSize(sizeProp, 'md');
   const moreIcon = getIcon('moreHorizontal');
 

package/src/MultiSelector/MultiSelector.tsx

@@ -76,6 +76,7 @@ import {themeProps} from '../utils/themeProps';
 import {groupStyles} from '../InputGroup/groupStyles';
 import {useInputGroup} from '../InputGroup/InputGroupContext';
 import {VisuallyHidden} from '../VisuallyHidden';
+import {useTranslator} from '../i18n';
 
 // Sentinel value for the select-all item in keyboard navigation
 const SELECT_ALL_VALUE = '__xds_select_all__';
@@ -589,16 +590,16 @@ export function MultiSelector<T extends MultiSelectorOptionType>({
   onChange,
   changeAction,
   isLoading = false,
-  placeholder = 'Select...',
+  placeholder: placeholderFromProps,
   size: sizeProp,
   status,
   labelTooltip,
   startIcon,
   hasClear = false,
   hasSelectAll = false,
-  selectAllLabel = 'Select all',
+  selectAllLabel: selectAllLabelFromProps,
   hasSearch = false,
-  searchPlaceholder = 'Search...',
+  searchPlaceholder: searchPlaceholderFromProps,
   triggerDisplay = 'count',
   maxBadges = 3,
   renderOption,
@@ -610,6 +611,13 @@ export function MultiSelector<T extends MultiSelectorOptionType>({
   className,
   style,
 }: MultiSelectorProps<T>) {
+  const t = useTranslator();
+  const placeholder =
+    placeholderFromProps ?? t('@astryx.multiSelector.selectPlaceholder');
+  const selectAllLabel =
+    selectAllLabelFromProps ?? t('@astryx.multiSelector.selectAll');
+  const searchPlaceholder =
+    searchPlaceholderFromProps ?? t('@astryx.multiSelector.searchPlaceholder');
   const size = useSize(sizeProp, 'md');
   const triggerId = useId();
   const listboxId = useId();
@@ -1030,7 +1038,7 @@ export function MultiSelector<T extends MultiSelectorOptionType>({
               ? getItemId(highlightedIndex)
               : undefined
           }
-          aria-label="Search options"
+          aria-label={t('@astryx.multiSelector.searchOptions')}
           type="text"
           value={searchQuery}
           onChange={e => setSearchQuery(e.target.value)}
@@ -1063,6 +1071,7 @@ export function MultiSelector<T extends MultiSelectorOptionType>({
     popover.isOpen,
     highlightedIndex,
     getItemId,
+    t,
   ]);
 
   // Render an individual item (index-based)
@@ -1305,7 +1314,7 @@ export function MultiSelector<T extends MultiSelectorOptionType>({
           <button
             type="button"
             onClick={handleClear}
-            aria-label={`Clear all ${label}`}
+            aria-label={t('@astryx.multiSelector.clearAll', {label})}
             {...stylex.props(styles.clearButton)}>
             <Icon icon="close" size="sm" color="secondary" />
           </button>

package/src/NumberInput/NumberInput.doc.mjs

@@ -82,12 +82,12 @@ export const docs = {
     {
       name: 'startIcon',
       type: 'IconType',
-      description: 'Icon to display at the start of the input. See `npx astryx docs icons` for valid semantic names.',
+      description: 'Icon to display at the start of the input. See `astryx docs icons` for valid semantic names.',
     },
     {
       name: 'labelIcon',
       type: 'IconType',
-      description: 'Icon to display before the label text. See `npx astryx docs icons` for valid semantic names.',
+      description: 'Icon to display before the label text. See `astryx docs icons` for valid semantic names.',
     },
     {
       name: 'status',

package/src/NumberInput/NumberInput.tsx

@@ -135,6 +135,7 @@ import {mergeProps, mergeRefs} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import type {SizeValue} from '../utils/types';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 
 interface NumberInputPropsBase extends Omit<
   BaseProps,
@@ -399,6 +400,7 @@ export function NumberInput({
   ref,
   ...rest
 }: NumberInputProps) {
+  const t = useTranslator();
   const size = useSize(sizeProp, 'md');
   const id = useId();
   const inputLabelID = useId();
@@ -663,7 +665,7 @@ export function NumberInput({
         <button
           type="button"
           onClick={handleClear}
-          aria-label={`Clear ${label}`}
+          aria-label={t('@astryx.numberInput.clearLabel', {label})}
           {...stylex.props(styles.clearButton)}>
           <Icon icon="close" size="sm" color="secondary" />
         </button>

package/src/Outline/Outline.tsx

@@ -37,6 +37,7 @@ import type {BaseProps} from '../BaseProps';
 import {useScrollSpy} from './useScrollSpy';
 import type {OutlineItem} from './types';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 
 export type {OutlineItem} from './types';
 
@@ -236,7 +237,7 @@ export function Outline({
   items,
   activeId,
   onActiveIdChange,
-  label = 'Table of contents',
+  label: labelFromProps,
   density = 'default',
   xstyle,
   className,
@@ -245,6 +246,8 @@ export function Outline({
   'data-testid': testId,
   ...props
 }: OutlineProps) {
+  const t = useTranslator();
+  const label = labelFromProps ?? t('@astryx.outline.label');
   const rootRef = useRef<HTMLElement | null>(null);
   const LinkComponent = useLinkComponent();
   const isControlled = activeId !== undefined;

package/src/OverflowList/OverflowList.doc.mjs

@@ -50,7 +50,7 @@ export const docs = {
     },
     {
       name: 'gap',
-      type: 'SpacingStep',
+      type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
       description:
         'Gap between items as a spacing token step (0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10).',
       default: '2',
@@ -116,7 +116,7 @@ export const docsZh = {
     },
     {
       name: 'gap',
-      type: 'SpacingStep',
+      type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
       description:
         '项目间距，使用间距步进值（0、0.5、1、1.5、2、3、4、5、6、8、10）。',
       default: '2',