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

package/src/CodeBlock/CodeBlock.tsx

@@ -45,6 +45,7 @@ import type {SyntaxToken, TokenLine} from './tokenizer';
 import {ensureHighlightStyles} from './highlightStyles';
 import {applyHighlightRangesChunked} from './highlightRanges';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 import {SyntaxTheme, type SyntaxThemeDefinition} from '../theme/syntax';
 
 // ---------------------------------------------------------------------------
@@ -78,6 +79,13 @@ const dynamicStyles = stylex.create({
     minWidth: value === 'fit-content' ? 'min(100%, 400px)' : null,
     maxWidth: value === 'fit-content' ? '100%' : null,
   }),
+  // Width of the line-number column, sized to the widest number. `ch` is the
+  // advance of "0" in the (monospace) code font, so N digits => N ch. Set on
+  // <code>; `--_codeblock-gutter-width` is unregistered so it inherits (with its var()
+  // substituted) down to the line divs that read it for their grid track.
+  gutterWidth: (digits: number) => ({
+    '--_codeblock-gutter-width': `${digits}ch`,
+  }),
 });
 
 const styles = stylex.create({
@@ -188,22 +196,6 @@ const styles = stylex.create({
       ':focus-visible': '2px',
     },
   },
-  gutter: {
-    flexShrink: 0,
-    paddingBlock: spacingVars['--spacing-3'],
-    paddingInlineStart: spacingVars['--spacing-4'],
-    paddingInlineEnd: spacingVars['--spacing-3'],
-    textAlign: 'end',
-    userSelect: 'none',
-    color: 'var(--color-syntax-punctuation)',
-    borderRightWidth: borderVars['--border-width'],
-    borderRightStyle: 'solid',
-    borderRightColor: colorVars['--color-border'],
-  },
-  gutterLine: {
-    fontFamily: typographyVars['--font-family-code'],
-    lineHeight: typeScaleVars['--text-code-leading'],
-  },
   code: {
     display: 'block',
     flex: 1,
@@ -222,9 +214,53 @@ const styles = stylex.create({
     wordBreak: 'break-all',
     overflowWrap: 'break-word',
   },
+  // With line numbers on, the <code> element hosts the full-height divider
+  // between the number gutter and the code. It spans the code's block padding
+  // too (inset-block: 0), so the rule reaches the top and bottom edges the way
+  // the old separate gutter column did. The numbers themselves are drawn per
+  // line (see `lineNumbered`) — a separate column can't track wrap height.
+  codeNumbered: {
+    position: 'relative',
+    '::after': {
+      content: '""',
+      position: 'absolute',
+      insetBlock: 0,
+      insetInlineStart: `calc(${spacingVars['--spacing-4']} + var(--_codeblock-gutter-width) + ${spacingVars['--spacing-3']})`,
+      width: 0,
+      borderInlineStartWidth: borderVars['--border-width'],
+      borderInlineStartStyle: 'solid',
+      borderInlineStartColor: colorVars['--color-border'],
+      pointerEvents: 'none',
+    },
+  },
   line: {
     lineHeight: typeScaleVars['--text-code-leading'],
   },
+  // Per-line number gutter: a two-column grid ([number] [code]). The number is
+  // a ::before generated from the data-line attribute. Because the number and
+  // its code occupy one grid row, the row grows to fit wrapped code while the
+  // number stays pinned to the row's first visual line (alignSelf: start) —
+  // this is what keeps numbers aligned when isWrapped wraps a line.
+  lineNumbered: {
+    display: 'grid',
+    gridTemplateColumns: 'var(--_codeblock-gutter-width) 1fr',
+    columnGap: `calc(${spacingVars['--spacing-3']} + ${borderVars['--border-width']} + ${spacingVars['--spacing-4']})`,
+    '::before': {
+      content: 'attr(data-line)',
+      gridColumn: '1',
+      alignSelf: 'start',
+      textAlign: 'end',
+      color: 'var(--color-syntax-punctuation)',
+      userSelect: 'none',
+      fontFamily: typographyVars['--font-family-code'],
+    },
+  },
+  // In span mode the tokens are wrapped in this element so they form a single
+  // grid item in column 2 (otherwise each token span would flow into its own
+  // grid cell). minWidth:0 lets it shrink so long lines wrap within the track.
+  lineContent: {
+    minWidth: 0,
+  },
   lineChunk: {
     contentVisibility: 'auto',
   },
@@ -239,12 +275,6 @@ const styles = stylex.create({
   sizeMd: {
     fontSize: typeScaleVars['--text-code-size'],
   },
-  gutterSm: {
-    fontSize: typeScaleVars['--text-supporting-size'],
-  },
-  gutterMd: {
-    fontSize: typeScaleVars['--text-code-size'],
-  },
   copyButton: {
     display: 'inline-flex',
     alignItems: 'center',
@@ -285,11 +315,13 @@ const CodeChunk = React.memo(function CodeChunk({
   startIndex,
   highlightSet,
   renderLineContent,
+  lineNumbers,
 }: {
   lines: string[];
   startIndex: number;
   highlightSet: Set<number> | null;
   renderLineContent: (line: string, lineIndex: number) => React.ReactNode;
+  lineNumbers: boolean;
 }) {
   return (
     <>
@@ -301,6 +333,7 @@ const CodeChunk = React.memo(function CodeChunk({
             data-line={i + 1}
             {...stylex.props(
               styles.line,
+              lineNumbers && styles.lineNumbered,
               (highlightSet?.has(i + 1) ?? false) && styles.lineHighlighted,
             )}>
             {renderLineContent(line, i)}
@@ -315,6 +348,7 @@ function renderLines(
   lines: string[],
   highlightSet: Set<number> | null,
   renderLineContent: (line: string, lineIndex: number) => React.ReactNode,
+  lineNumbers: boolean,
   chunkSize: number = LINE_CHUNK_SIZE,
 ): React.ReactNode {
   chunkSize = Math.max(1, Math.floor(chunkSize));
@@ -326,6 +360,7 @@ function renderLines(
         startIndex={0}
         highlightSet={highlightSet}
         renderLineContent={renderLineContent}
+        lineNumbers={lineNumbers}
       />
     );
   }
@@ -347,6 +382,7 @@ function renderLines(
           startIndex={start}
           highlightSet={highlightSet}
           renderLineContent={renderLineContent}
+          lineNumbers={lineNumbers}
         />
       </div>,
     );
@@ -542,12 +578,16 @@ function SpanCodeContent({
   highlightSet,
   isWrapped,
   sizeStyle,
+  hasLineNumbers,
+  maxDigits,
 }: {
   lines: string[];
   tokenLines: TokenLine[];
   highlightSet: Set<number> | null;
   isWrapped: boolean;
   sizeStyle: stylex.StyleXStyles;
+  hasLineNumbers: boolean;
+  maxDigits: number;
 }) {
   useInsertionEffect(() => {
     ensureHighlightStyles();
@@ -556,7 +596,13 @@ function SpanCodeContent({
   const renderLineContent = useCallback(
     (line: string, lineIndex: number): React.ReactNode => {
       const tokens = tokenLines[lineIndex] ?? [];
-      return buildSpanLine(line, tokens);
+      // Wrap tokens in a single element so they occupy one grid cell when line
+      // numbers are on (see `lineNumbered`); an inline span is a no-op when off.
+      return (
+        <span {...stylex.props(styles.lineContent)}>
+          {buildSpanLine(line, tokens)}
+        </span>
+      );
     },
     [tokenLines],
   );
@@ -567,8 +613,10 @@ function SpanCodeContent({
         styles.code,
         sizeStyle,
         isWrapped && styles.codeWrapped,
+        hasLineNumbers && styles.codeNumbered,
+        hasLineNumbers && dynamicStyles.gutterWidth(maxDigits),
       )}>
-      {renderLines(lines, highlightSet, renderLineContent)}
+      {renderLines(lines, highlightSet, renderLineContent, hasLineNumbers)}
     </code>
   );
 }
@@ -583,12 +631,16 @@ function RangeCodeContent({
   highlightSet,
   isWrapped,
   sizeStyle,
+  hasLineNumbers,
+  maxDigits,
 }: {
   lines: string[];
   tokenLines: TokenLine[];
   highlightSet: Set<number> | null;
   isWrapped: boolean;
   sizeStyle: stylex.StyleXStyles;
+  hasLineNumbers: boolean;
+  maxDigits: number;
 }) {
   const codeRef = useRef<HTMLElement>(null);
 
@@ -606,6 +658,9 @@ function RangeCodeContent({
     return applyHighlightRangesChunked(codeEl, tokenLines);
   }, [tokenLines]);
 
+  // Range mode keeps the line's text as a bare text node (its firstChild) so
+  // applyHighlightRangesChunked can map token offsets onto it \u2014 no wrapper. The
+  // number ::before is a pseudo-element, so it never becomes a child node here.
   const renderLineContent = useCallback(
     (line: string): React.ReactNode => line || '\u200b',
     [],
@@ -618,8 +673,10 @@ function RangeCodeContent({
         styles.code,
         sizeStyle,
         isWrapped && styles.codeWrapped,
+        hasLineNumbers && styles.codeNumbered,
+        hasLineNumbers && dynamicStyles.gutterWidth(maxDigits),
       )}>
-      {renderLines(lines, highlightSet, renderLineContent)}
+      {renderLines(lines, highlightSet, renderLineContent, hasLineNumbers)}
     </code>
   );
 }
@@ -662,6 +719,7 @@ export function CodeBlock({
   ref,
   ...props
 }: CodeBlockProps) {
+  const t = useTranslator();
   const [copied, setCopied] = useState(false);
   const copyResetTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const announce = useAnnounce();
@@ -718,7 +776,8 @@ export function CodeBlock({
   }, [code, onCopy, announce]);
 
   const sizeStyle = size === 'sm' ? styles.sizeSm : styles.sizeMd;
-  const gutterSizeStyle = size === 'sm' ? styles.gutterSm : styles.gutterMd;
+  // Digits in the largest line number — sizes the gutter column width.
+  const maxLineDigits = String(lines.length).length;
   const languageLabel =
     hasLanguageLabel && language !== 'plaintext' ? language : null;
   const showHeader = title != null || languageLabel != null;
@@ -748,7 +807,7 @@ export function CodeBlock({
         e.stopPropagation();
         void handleCopy();
       }}
-      aria-label={copied ? 'Copied' : 'Copy code'}
+      aria-label={copied ? t('@astryx.codeBlock.copied') : t('@astryx.codeBlock.copyCode')}
       {...stylex.props(
         styles.copyButton,
         !showHeader && styles.copyButtonAbsolute,
@@ -811,7 +870,7 @@ export function CodeBlock({
       // create duplicate same-named landmarks (axe: landmark-unique).
       tabIndex={0}
       role="group"
-      aria-label={languageLabel ?? 'Code'}
+      aria-label={languageLabel ?? t('@astryx.codeBlock.code')}
       {...mergeProps(stylex.props(styles.scrollContainer), {
         style: scrollStyle,
       })}>
@@ -820,18 +879,6 @@ export function CodeBlock({
           styles.codeWrapper,
           showHeader && !hasLineNumbers && styles.codeWrapperCompact,
         )}>
-        {hasLineNumbers && (
-          <div
-            {...stylex.props(styles.gutter, gutterSizeStyle)}
-            aria-hidden="true">
-            {lines.map((_, i) => (
-              // eslint-disable-next-line @eslint-react/no-array-index-key -- gutter line numbers are positional by definition
-              <div key={i} {...stylex.props(styles.gutterLine)}>
-                {i + 1}
-              </div>
-            ))}
-          </div>
-        )}
         {useSpans ? (
           <SpanCodeContent
             lines={lines}
@@ -839,6 +886,8 @@ export function CodeBlock({
             highlightSet={highlightSet}
             isWrapped={isWrapped}
             sizeStyle={sizeStyle}
+            hasLineNumbers={hasLineNumbers}
+            maxDigits={maxLineDigits}
           />
         ) : (
           <RangeCodeContent
@@ -847,6 +896,8 @@ export function CodeBlock({
             highlightSet={highlightSet}
             isWrapped={isWrapped}
             sizeStyle={sizeStyle}
+            hasLineNumbers={hasLineNumbers}
+            maxDigits={maxLineDigits}
           />
         )}
       </div>

package/src/Collapsible/Collapsible.doc.mjs

@@ -17,6 +17,7 @@ export const docs = {
   theming: {
     targets: [
       {className: 'astryx-collapsible', visualProps: ['density']},
+      {className: 'astryx-collapsible-content', visualProps: ['density']},
       {className: 'astryx-collapsible-group', visualProps: ['density']},
     ],
   },
@@ -53,6 +54,12 @@ export const docs = {
       type: 'boolean',
       description: 'Controlled open state.',
     },
+    {
+      name: 'isDisabled',
+      type: 'boolean',
+      description: "Disable the item so its trigger can't be toggled (dimmed, aria-disabled, and out of the tab order). Doesn't collapse an already-open item.",
+      default: 'false',
+    },
     {
       name: 'onOpenChange',
       type: '(isOpen: boolean) => void',

package/src/Collapsible/Collapsible.test.tsx

@@ -72,6 +72,12 @@ describe('Collapsible', () => {
       expect(screen.getByTestId('root')).toHaveClass('astryx-collapsible');
     });
 
+    it('renders the stable astryx-collapsible-content class on the content area', () => {
+      render(<Collapsible trigger="T">c</Collapsible>);
+      const content = contentFor(screen.getByRole('button'));
+      expect(content).toHaveClass('astryx-collapsible-content');
+    });
+
     it('renders a ReactNode trigger, not just a string', () => {
       render(
         <Collapsible trigger={<span data-testid="rich">Rich</span>}>
@@ -240,6 +246,80 @@ describe('Collapsible', () => {
     });
   });
 
+  describe('disabled state', () => {
+    it('marks the trigger aria-disabled and drops it from the tab order', () => {
+      render(
+        <Collapsible trigger="T" isDisabled>
+          Body
+        </Collapsible>,
+      );
+      const button = screen.getByRole('button');
+      expect(button).toHaveAttribute('aria-disabled', 'true');
+      expect(button).toHaveAttribute('tabindex', '-1');
+      // Never the native disabled attribute — it stays focusable/perceivable.
+      expect(button).not.toBeDisabled();
+    });
+
+    it('is enabled by default (no aria-disabled, stays in tab order)', () => {
+      render(<Collapsible trigger="T">Body</Collapsible>);
+      const button = screen.getByRole('button');
+      expect(button).not.toHaveAttribute('aria-disabled');
+      expect(button).not.toHaveAttribute('tabindex', '-1');
+    });
+
+    it('does not toggle when the trigger is clicked while disabled', async () => {
+      const user = userEvent.setup();
+      render(
+        <Collapsible trigger="T" isDisabled defaultIsOpen>
+          Body
+        </Collapsible>,
+      );
+      const button = screen.getByRole('button');
+      expect(button).toHaveAttribute('aria-expanded', 'true');
+      await user.click(button);
+      expect(button).toHaveAttribute('aria-expanded', 'true');
+    });
+
+    it('does not fire onOpenChange while disabled', async () => {
+      const user = userEvent.setup();
+      const onOpenChange = vi.fn();
+      render(
+        <Collapsible trigger="T" isDisabled onOpenChange={onOpenChange}>
+          Body
+        </Collapsible>,
+      );
+      await user.click(screen.getByRole('button'));
+      expect(onOpenChange).not.toHaveBeenCalled();
+    });
+
+    it('does not collapse an already-open item — content stays visible', () => {
+      render(
+        <Collapsible trigger="T" isDisabled defaultIsOpen>
+          Body
+        </Collapsible>,
+      );
+      const content = contentFor(screen.getByRole('button'));
+      expect(content).not.toHaveStyle({display: 'none'});
+    });
+
+    it('does not toggle its group item when disabled', async () => {
+      const user = userEvent.setup();
+      render(
+        <CollapsibleGroup type="single">
+          <Collapsible trigger="A" value="a" isDisabled>
+            Body A
+          </Collapsible>
+          <Collapsible trigger="B" value="b">
+            Body B
+          </Collapsible>
+        </CollapsibleGroup>,
+      );
+      const triggerA = screen.getByRole('button', {name: /A/});
+      await user.click(triggerA);
+      expect(triggerA).toHaveAttribute('aria-expanded', 'false');
+    });
+  });
+
   describe('prop forwarding', () => {
     it('forwards a ref to the root element', () => {
       const ref = vi.fn();

package/src/Collapsible/Collapsible.tsx

@@ -39,6 +39,7 @@ import {
   durationVars,
   easeVars,
 } from '../theme/tokens.stylex';
+
 import {useCollapsible} from './useCollapsible';
 import {CollapsibleGroupPresentationContext} from './CollapsibleGroupContext';
 import {getIcon} from '../Icon/globalIconRegistry';
@@ -81,6 +82,13 @@ const styles = stylex.create({
     textBoxEdge: 'cap alphabetic',
     textBoxTrim: 'trim-both',
   },
+  // Disabled trigger — non-interactive, dimmed. Native `disabled` on the
+  // button blocks click + keyboard activation; these styles restore the
+  // visual affordance that `all: unset` wipes.
+  triggerDisabled: {
+    cursor: 'not-allowed',
+    opacity: 0.5,
+  },
   // Chevron indicator
   chevron: {
     display: 'inline-flex',
@@ -102,8 +110,17 @@ const styles = stylex.create({
   contentHidden: {
     display: 'none',
   },
+  // Anchors body typography so revealed text renders at the system's body
+  // scale (family/size/weight/leading) instead of inheriting from wherever
+  // the Collapsible is placed. External themes override via the
+  // `astryx-collapsible-content` target.
   content: {
     paddingBlockStart: spacingVars['--spacing-1'],
+    fontFamily: typographyVars['--font-family-body'],
+    fontSize: typeScaleVars['--text-body-size'],
+    fontWeight: typeScaleVars['--text-body-weight'],
+    lineHeight: typeScaleVars['--text-body-leading'],
+    color: colorVars['--color-text-primary'],
   },
   // Group divider chrome — a hairline above every item except the first.
   // The group's wrapper (or 'all' mode) owns the outer edges.
@@ -166,6 +183,17 @@ export interface CollapsibleProps extends BaseProps {
    */
   isOpen?: boolean;
 
+  /**
+   * Whether the collapsible is disabled. A disabled item can't be toggled —
+   * its trigger is non-interactive and dimmed. Following the system-wide
+   * disabled convention, the trigger uses `aria-disabled` (not the native
+   * `disabled` attribute) and drops out of the tab order, staying perceivable
+   * to assistive tech. The content stays in whatever open state it was;
+   * disabling doesn't collapse an already-open item.
+   * @default false
+   */
+  isDisabled?: boolean;
+
   /**
    * Callback when the open state changes.
    */
@@ -225,6 +253,7 @@ export function Collapsible({
   children,
   defaultIsOpen,
   isOpen: controlledIsOpen,
+  isDisabled = false,
   onOpenChange,
   value,
   ref,
@@ -244,6 +273,17 @@ export function Collapsible({
     value,
   });
 
+  // Activation is blocked by this guard rather than the native `disabled`
+  // attribute, so the trigger keeps `aria-disabled` semantics and stays
+  // discoverable. A native `disabled` button would silently swallow events
+  // (e.g. a wrapping tooltip's hover) — the system-wide disabled convention.
+  const handleToggle = () => {
+    if (isDisabled) {
+      return;
+    }
+    toggle();
+  };
+
   const presentation = use(CollapsibleGroupPresentationContext);
   const isDivided = presentation?.hasDividers ?? false;
   const density = presentation?.density ?? null;
@@ -268,12 +308,20 @@ export function Collapsible({
       {...props}>
       <button
         type="button"
-        onClick={toggle}
+        onClick={handleToggle}
+        aria-disabled={isDisabled || undefined}
         aria-expanded={isOpen}
         aria-controls={contentId}
+        // A disabled trigger drops out of the tab order so it isn't a silently
+        // dead tab stop; activation stays blocked by the handleToggle guard,
+        // and aria-disabled keeps the state perceivable to assistive tech —
+        // the system-wide disabled convention (never native `disabled`, which
+        // would swallow events like a wrapping tooltip's hover).
+        tabIndex={isDisabled ? -1 : undefined}
         {...stylex.props(
           styles.trigger,
           density != null && triggerDensity[density],
+          isDisabled && styles.triggerDisabled,
         )}>
         <span {...stylex.props(styles.triggerLabel)}>{trigger}</span>
         <span
@@ -286,10 +334,15 @@ export function Collapsible({
       </button>
       <div
         id={contentId}
-        {...stylex.props(
-          styles.content,
-          density != null && contentDensity[density],
-          !isOpen && styles.contentHidden,
+        {...mergeProps(
+          themeProps('collapsible-content', {
+            density: density ?? undefined,
+          }),
+          stylex.props(
+            styles.content,
+            density != null && contentDensity[density],
+            !isOpen && styles.contentHidden,
+          ),
         )}>
         {presentation != null ? (
           <CollapsibleGroupPresentationContext value={null}>

package/src/CommandPalette/CommandPalette.tsx

@@ -36,6 +36,7 @@ import {CommandPaletteInput} from './CommandPaletteInput';
 import {CommandPaletteFooter} from './CommandPaletteFooter';
 import {CommandPaletteEmpty} from './CommandPaletteEmpty';
 import type {BaseProps} from '../BaseProps';
+import {useTranslator} from '../i18n';
 
 export interface CommandPaletteProps<
   T extends SearchableItem = SearchableItem,
@@ -260,14 +261,20 @@ export function CommandPalette<T extends SearchableItem = SearchableItem>({
   input,
   footer,
   renderItem,
-  emptySearchText = 'No results',
-  emptyBootstrapText = 'Type to search',
+  emptySearchText: emptySearchTextFromProps,
+  emptyBootstrapText: emptyBootstrapTextFromProps,
   value: controlledValue,
   onValueChange,
-  label = 'Command palette',
+  label: labelFromProps,
   width = 640,
   maxHeight = 480,
 }: CommandPaletteProps<T>) {
+  const t = useTranslator();
+  const label = labelFromProps ?? t('@astryx.commandPalette.label');
+  const emptySearchText =
+    emptySearchTextFromProps ?? t('@astryx.commandPalette.emptySearch');
+  const emptyBootstrapText =
+    emptyBootstrapTextFromProps ?? t('@astryx.commandPalette.emptyBootstrap');
   const listId = useId();
   // search: the committed query — only advances when async results arrive.
   // optimisticSearch: updates immediately on keystroke, drives input + empty state.

package/src/CommandPalette/CommandPaletteInput.test.tsx

@@ -17,7 +17,7 @@ import type {CommandPaletteContextValue} from './CommandPaletteContext';
 describe('CommandPaletteInput', () => {
   it('renders with default placeholder', () => {
     render(<CommandPaletteInput />);
-    expect(screen.getByPlaceholderText('Search...')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('Search…')).toBeInTheDocument();
   });
 
   it('renders with custom placeholder', () => {

package/src/CommandPalette/CommandPaletteInput.tsx

@@ -27,6 +27,7 @@ import {useCommandPaletteContext} from './CommandPaletteContext';
 import {useDialogContext} from '../Dialog/DialogContext';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 
 const styles = stylex.create({
   wrapper: {
@@ -147,7 +148,7 @@ export interface CommandPaletteInputProps extends Omit<
 export function CommandPaletteInput({
   value: controlledValue,
   onValueChange,
-  placeholder = 'Search...',
+  placeholder: placeholderFromProps,
   hasAutoFocus = true,
   endContent,
   onChange,
@@ -156,6 +157,9 @@ export function CommandPaletteInput({
   xstyle,
   ...props
 }: CommandPaletteInputProps) {
+  const t = useTranslator();
+  const placeholder =
+    placeholderFromProps ?? t('@astryx.commandPalette.input.placeholder');
   const ctx = useCommandPaletteContext();
   const dialogContext = useDialogContext();
   const inputRef = useRef<HTMLInputElement>(null);

package/src/CommandPalette/CommandPaletteList.tsx

@@ -20,6 +20,7 @@ import {mergeProps} from '../utils';
 import {spacingVars} from '../theme/tokens.stylex';
 import {useCommandPaletteContext} from './CommandPaletteContext';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 
 const styles = stylex.create({
   list: {
@@ -72,13 +73,15 @@ export interface CommandPaletteListProps extends BaseProps<HTMLDivElement> {
  */
 export function CommandPaletteList({
   children,
-  label = 'Commands',
+  label: labelFromProps,
   ref,
   xstyle,
   className,
   style,
   ...props
 }: CommandPaletteListProps) {
+  const t = useTranslator();
+  const label = labelFromProps ?? t('@astryx.commandPalette.list.label');
   const ctx = useCommandPaletteContext();
 
   return (