@astryxdesign/core 0.2.0 → 0.3.0

package/src/AppShell/AppShell.tsx

@@ -17,7 +17,7 @@ import React from 'react';
  * - /packages/core/src/AppShell/index.ts
  * - /packages/core/src/AppShell/AppShell.test.tsx
  * - /apps/storybook/stories/AppShell.stories.tsx
- * - /packages/cli/templates/blocks/components/AppShell/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/AppShell/ (showcase blocks)
  */
 
 import {
@@ -55,6 +55,7 @@ import {useMediaQuery} from '../hooks/useMediaQuery';
 import {observeResize, unobserveResize} from '../utils/sharedResizeObserver';
 import {themeProps} from '../utils/themeProps';
 import {useTranslator} from '../i18n';
+import type {AppShellVariantMap} from './index';
 
 const HasActivity = typeof React.Activity !== 'undefined';
 const ActivityWrapper = HasActivity
@@ -101,25 +102,6 @@ export type AppShellBreakpoint = 'sm' | 'md' | 'lg' | 'none';
  * - `elevated`: Wash nav background with elevated surface content + border radius
  * @default 'elevated'
  */
-/**
- * Extensible variant map for AppShell.
- *
- * Theme packages can add custom variants via TypeScript module augmentation:
- * @example
- * ```
- * declare module '@astryxdesign/core/AppShell' {
- *   interface AppShellVariantMap {
- *     'glass': true;
- *   }
- * }
- * ```
- */
-export interface AppShellVariantMap {
-  wash: true;
-  surface: true;
-  section: true;
-  elevated: true;
-}
 
 /**
  * Navigation background style. Extensible via module augmentation of AppShellVariantMap.
@@ -359,6 +341,15 @@ const styles = stylex.create({
     fontWeight: fontWeightVars['--font-weight-semibold'],
     fontSize: typeScaleVars['--text-body-size'],
   },
+  // Programmatic focus target for the skip link. The main container is only
+  // focusable via tabIndex={-1} (never tabbable), so a focus ring around the
+  // entire content area would be noise rather than guidance — suppress it.
+  mainFocusTarget: {
+    outline: {
+      default: null,
+      ':focus': 'none',
+    },
+  },
 
   elevatedBackdrop: {
     position: 'absolute',
@@ -531,6 +522,13 @@ export function AppShell({
     [mobileNavIsControlled, mobileNavConfig],
   );
 
+  // Move focus to the main content container when the skip link is activated.
+  // Hash navigation alone doesn't reliably move focus in every browser, so
+  // focus the target explicitly (it's focusable via tabIndex={-1}).
+  const handleSkipLinkClick = useCallback(() => {
+    document.getElementById(MAIN_CONTENT_ID)?.focus();
+  }, []);
+
   const isFill = height === 'fill';
   const isAuto = height === 'auto';
 
@@ -675,6 +673,9 @@ export function AppShell({
     headerInner != null ? (
       <div
         ref={headerRef}
+        // Top-level banner landmark for the header region (topNav + banner).
+        // Safe here: the wrapper is never nested inside main/nav/other landmarks.
+        role="banner"
         {...mergeProps(
           themeProps('app-shell-header', {variant}),
           stylex.props(navAreaStyle, isAuto && styles.headerSticky),
@@ -723,8 +724,11 @@ export function AppShell({
       padding={contentPadding ?? 0}
       role="main"
       id={MAIN_CONTENT_ID}
+      // Focusable skip-link target (WCAG 2.4.1) — without tabIndex, several
+      // browsers won't move focus to the div when the skip link is activated.
+      tabIndex={-1}
       isScrollable={isFill}
-      xstyle={contentAreaStyle}>
+      xstyle={[contentAreaStyle, styles.mainFocusTarget]}>
       {children}
     </LayoutContent>
   );
@@ -800,9 +804,10 @@ export function AppShell({
         {/* Skip-to-content link */}
         <a
           href={`#${MAIN_CONTENT_ID}`}
+          onClick={handleSkipLinkClick}
           {...stylex.props(styles.skipLink)}
           data-testid="skip-to-content">
-          Skip to content
+          {t('@astryx.appShell.skipToContent')}
         </a>
 
         <Layout

package/src/AppShell/index.ts

@@ -11,12 +11,31 @@
  * SYNC: When modified, update this header and /packages/core/src/AppShell/AppShell.doc.mjs
  */
 
+/**
+ * Extensible variant map for AppShell.
+ *
+ * Theme packages can add custom variants via TypeScript module augmentation:
+ * @example
+ * ```
+ * declare module '@astryxdesign/core/AppShell' {
+ *   interface AppShellVariantMap {
+ *     'glass': true;
+ *   }
+ * }
+ * ```
+ */
+export interface AppShellVariantMap {
+  wash: true;
+  surface: true;
+  section: true;
+  elevated: true;
+}
+
 export {AppShell} from './AppShell';
 export type {
   AppShellProps,
   AppShellBreakpoint,
   AppShellVariant,
-  AppShellVariantMap,
   MobileNavConfig,
 } from './AppShell';
 export {

package/src/AppShell/useAppShellMobile.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').HookDoc} */
+/** @type {import('@astryxdesign/cli/authoring').HookDoc} */
 export const docs = {
   name: 'useAppShellMobile',
   displayName: 'useAppShellMobile',
@@ -109,7 +109,7 @@ export const docs = {
   importPath: '@astryxdesign/core/AppShell',
 };
 
-/** @type {import('../docs-types').HookTranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').HookTranslationDoc} */
 export const docsDense = {
   description:
     'Reads/controls AppShell mobile nav context. Use for custom triggers, closing drawer after route changes, or syncing AppShell-adjacent mobile UI to the same breakpoint as mobile nav.',

package/src/AspectRatio/AspectRatio.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: 'AspectRatio',
@@ -62,7 +62,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 export const docsZh = {
   name: 'AspectRatio',
   displayName: 'Aspect Ratio',
@@ -105,7 +105,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description: 'maintains specific aspect ratio for children',
   usage: {

package/src/AspectRatio/AspectRatio.tsx

@@ -13,7 +13,7 @@
  * - /packages/core/src/AspectRatio/AspectRatio.test.tsx
  * - /packages/core/src/reset.css (AspectRatio fit baseline rules)
  * - /apps/storybook/stories/AspectRatio.stories.tsx
- * - /packages/cli/templates/blocks/components/AspectRatio/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/AspectRatio/ (showcase blocks)
  */
 
 import type {ReactNode} from 'react';

package/src/Avatar/Avatar.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: 'Avatar',
@@ -128,7 +128,7 @@ export const docs = {
   ],
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsZh = {
   usage: {
     description:
@@ -142,7 +142,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description: 'person/team avatar w/ photo → initials → icon fallback chain',
   usage: {

package/src/Avatar/Avatar.tsx

@@ -13,7 +13,7 @@
  * - /packages/core/src/Avatar/Avatar.doc.mjs (props table, features, implementation notes)
  * - /packages/core/src/Avatar/index.ts (exports if types change)
  * - /apps/storybook/stories/Avatar.stories.tsx (storybook stories)
- * - /packages/cli/templates/blocks/components/Avatar/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Avatar/ (showcase blocks)
  *
  * Last synced props: alt, fallbackSrc, name, size, src, status, href, as, target, rel, onClick
  */
@@ -215,8 +215,13 @@ const dynamicStyles = stylex.create({
   }),
   statusPosition: (size: number) => ({
     bottom: size * CIRCLE_EDGE_OFFSET_RATIO,
-    right: size * CIRCLE_EDGE_OFFSET_RATIO,
-    transform: 'translate(50%, 50%)',
+    insetInlineEnd: size * CIRCLE_EDGE_OFFSET_RATIO,
+    // `insetInlineEnd` anchors to the right edge in LTR / left in RTL, so the
+    // outward push must mirror too: +X in LTR, −X in RTL (Y is unaffected).
+    transform: {
+      default: 'translate(50%, 50%)',
+      ':is([dir="rtl"] *)': 'translate(-50%, 50%)',
+    },
   }),
 });
 

package/src/Avatar/AvatarStatusDot.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: 'AvatarStatusDot',

package/src/Avatar/AvatarStatusDot.tsx

@@ -12,7 +12,7 @@
  * - /packages/core/src/Avatar/Avatar.doc.mjs (features, files table)
  * - /packages/core/src/Avatar/index.ts (exports)
  * - /apps/storybook/stories/Avatar.stories.tsx (storybook stories)
- * - /packages/cli/templates/blocks/components/Avatar/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Avatar/ (showcase blocks)
  */
 
 import React, {use, type ReactNode} from 'react';
@@ -22,6 +22,7 @@ import {colorVars, radiusVars} from '../theme/tokens.stylex';
 import {AvatarSizeContext} from './AvatarSizeContext';
 import {isRenderable, mergeProps} from '../utils';
 import {themeProps} from '../utils/themeProps';
+import type {AvatarStatusDotVariantMap} from './index';
 
 /**
  * Discrete size tier of the status dot, derived from the avatar size.
@@ -65,32 +66,6 @@ function resolveStatusDotSize(avatarSize: number): {
   return {dotSize: 32, borderWidth: 4, iconSize: 18, tier: 'large'};
 }
 
-/**
- * Extensible variant map for AvatarStatusDot.
- *
- * Theme packages can add custom variants via TypeScript module augmentation:
- * @example
- * ```
- * declare module '@astryxdesign/core/Avatar' {
- *   interface AvatarStatusDotVariantMap {
- *     'away': true;
- *   }
- * }
- * ```
- *
- * Custom variants render no background fill, no ink colour, and no built-in
- * shape glyph — the theme must supply the fill and, if it passes an `icon`,
- * a `color` for it to paint with. It should also supply a non-colour mark
- * so the status is not distinguishable by colour alone (a WCAG 1.4.1
- * failure): pass `icon`, or theme a glyph onto the dot via
- * `.astryx-avatar-status-dot[data-variant="..."]` (e.g. a `::before` mark).
- */
-export interface AvatarStatusDotVariantMap {
-  success: true;
-  neutral: true;
-  error: true;
-}
-
 /**
  * AvatarStatusDot variant type. Extensible via module augmentation of AvatarStatusDotVariantMap.
  */

package/src/Avatar/index.ts

@@ -11,11 +11,36 @@
  * SYNC: When modified, update this header and /packages/core/src/Avatar/Avatar.doc.mjs
  */
 
+/**
+ * Extensible variant map for AvatarStatusDot.
+ *
+ * Theme packages can add custom variants via TypeScript module augmentation:
+ * @example
+ * ```
+ * declare module '@astryxdesign/core/Avatar' {
+ *   interface AvatarStatusDotVariantMap {
+ *     'away': true;
+ *   }
+ * }
+ * ```
+ *
+ * Custom variants render no background fill, no ink colour, and no built-in
+ * shape glyph — the theme must supply the fill and, if it passes an `icon`,
+ * a `color` for it to paint with. It should also supply a non-colour mark
+ * so the status is not distinguishable by colour alone (a WCAG 1.4.1
+ * failure): pass `icon`, or theme a glyph onto the dot via
+ * `.astryx-avatar-status-dot[data-variant="..."]` (e.g. a `::before` mark).
+ */
+export interface AvatarStatusDotVariantMap {
+  success: true;
+  neutral: true;
+  error: true;
+}
+
 export {Avatar, resolveSize} from './Avatar';
 export type {AvatarProps, AvatarSize} from './Avatar';
 export {AvatarStatusDot} from './AvatarStatusDot';
 export type {
   AvatarStatusDotProps,
   AvatarStatusDotVariant,
-  AvatarStatusDotVariantMap,
 } from './AvatarStatusDot';

package/src/AvatarGroup/AvatarGroup.doc.mjs

@@ -1,5 +1,5 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'AvatarGroup',
@@ -71,7 +71,7 @@ export const docs = {
   ],
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsZh = {
   usage: {
     description:
@@ -85,7 +85,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description: 'compositional overlapping avatar row w/ +N overflow or custom slot',
   usage: {

package/src/AvatarGroup/AvatarGroup.test.tsx

@@ -5,6 +5,7 @@ import userEvent from '@testing-library/user-event';
 import {AvatarGroup} from './AvatarGroup';
 import {AvatarGroupOverflow} from './AvatarGroupOverflow';
 import {Avatar, AvatarStatusDot} from '../Avatar';
+import {InternationalizationProvider} from '../i18n';
 
 describe('AvatarGroup', () => {
   it('renders all avatar children', () => {
@@ -238,7 +239,26 @@ describe('AvatarGroupOverflow — hardening', () => {
     );
 
     expect(screen.getByText('+4912')).toBeInTheDocument();
-    expect(screen.getByLabelText('4912 more')).toBeInTheDocument();
+    // The aria-label routes through the catalog's `{count, number}` ICU
+    // argument, so the en locale adds a grouping separator.
+    expect(screen.getByLabelText('4,912 more')).toBeInTheDocument();
+  });
+
+  it('localizes the overflow label through the i18n catalog', () => {
+    render(
+      <InternationalizationProvider
+        locale="fr"
+        overrides={{
+          fr: {'@astryx.avatarGroup.overflow': '{count, number} de plus'},
+        }}>
+        <AvatarGroup>
+          <Avatar name="Alice" />
+          <AvatarGroupOverflow count={3} />
+        </AvatarGroup>
+      </InternationalizationProvider>,
+    );
+
+    expect(screen.getByLabelText('3 de plus')).toBeInTheDocument();
   });
 });
 

package/src/AvatarGroup/AvatarGroup.tsx

@@ -21,7 +21,7 @@
  * - /packages/core/src/AvatarGroup/AvatarGroup.doc.mjs (props table, features)
  * - /packages/core/src/AvatarGroup/index.ts (exports if types change)
  * - /apps/storybook/stories/AvatarGroup.stories.tsx (storybook stories)
- * - /packages/cli/templates/blocks/components/AvatarGroup/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/AvatarGroup/ (showcase blocks)
  */
 
 import {useId, useMemo, useState, type ReactNode} from 'react';
@@ -108,11 +108,9 @@ export function AvatarGroup({
   );
 
   // The keyboard hint and roving tab stop only make sense once the group has
-  // interactive children. Detect their presence (and the writing direction for
-  // RTL-correct arrow navigation) from the rendered DOM after commit, matching
-  // how the codebase reads direction elsewhere (`getComputedStyle(el).direction`).
+  // interactive children. Detect their presence from the rendered DOM after
+  // commit. (Arrow-key direction is auto-detected inside useListFocus.)
   const [hasInteractiveItems, setHasInteractiveItems] = useState(false);
-  const [isRtl, setIsRtl] = useState(false);
 
   // Single tab stop + roving arrow focus over the group's interactive items.
   // `itemSelector` targets the shared `[data-avatar-item]` marker stamped on
@@ -123,7 +121,6 @@ export function AvatarGroup({
     itemSelector: '[data-avatar-item]',
     orientation: 'horizontal',
     hasRovingTabIndex: true,
-    isRtl,
   });
 
   useIsomorphicLayoutEffect(() => {
@@ -132,7 +129,6 @@ export function AvatarGroup({
       return;
     }
     setHasInteractiveItems(root.querySelector('[data-avatar-item]') != null);
-    setIsRtl(getComputedStyle(root).direction === 'rtl');
   });
 
   const hintId = useId();

package/src/AvatarGroup/AvatarGroupOverflow.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: 'AvatarGroupOverflow',

package/src/AvatarGroup/AvatarGroupOverflow.tsx

@@ -3,14 +3,14 @@
 
 /**
  * @file AvatarGroupOverflow.tsx
- * @input Uses React, StyleX, AvatarGroupContext
+ * @input Uses React, StyleX, AvatarGroupContext, i18n (useTranslator)
  * @output Exports AvatarGroupOverflow for overflow indicator
  * @position Slot component used inside AvatarGroup
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/AvatarGroup/AvatarGroup.doc.mjs
  * - /packages/core/src/AvatarGroup/index.ts
- * - /packages/cli/templates/blocks/components/AvatarGroup/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/AvatarGroup/ (showcase blocks)
  */
 
 import React, {type ReactNode} from 'react';
@@ -26,6 +26,7 @@ import {mergeProps} from '../utils';
 import {useAvatarGroup} from './AvatarGroupContext';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 
 const BORDER_WIDTH = 2;
 const OVERFLOW_FONT_RATIO = 0.35;
@@ -150,11 +151,12 @@ export function AvatarGroupOverflow({
   style,
   ...rest
 }: AvatarGroupOverflowProps): ReactNode {
+  const t = useTranslator();
   const group = useAvatarGroup();
   const numericSize = group?.numericSize ?? 36;
   const overlap = group?.overlap ?? 0;
 
-  const label = `${count} more`;
+  const label = t('@astryx.avatarGroup.overflow', {count});
   const content = children ?? `+${count}`;
 
   if (onClick) {

package/src/Badge/Badge.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: 'Badge',
@@ -60,7 +60,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 export const docsZh = {
   name: 'Badge',
   displayName: 'Badge',
@@ -107,7 +107,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description: 'highlights a status or category tag, NOT for general metadata',
   usage: {

package/src/Badge/Badge.tsx

@@ -13,7 +13,7 @@
  * - /packages/core/src/Badge/Badge.test.tsx (tests for new/changed behavior)
  * - /packages/core/src/Badge/index.ts (exports if types change)
  * - /apps/storybook/stories/Badge.stories.tsx (storybook stories)
- * - /packages/cli/templates/blocks/components/Badge/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Badge/ (showcase blocks)
  */
 
 import type {ReactNode} from 'react';
@@ -28,6 +28,7 @@ import {
 } from '../theme/tokens.stylex';
 import {mergeProps} from '../utils';
 import {themeProps} from '../utils/themeProps';
+import type {BadgeVariantMap} from './index';
 
 /**
  * Base badge styles
@@ -115,36 +116,6 @@ const variants = stylex.create({
   },
 });
 
-/**
- * Extensible variant map for Badge.
- *
- * Theme packages can add custom variants via TypeScript module augmentation:
- * @example
- * ```
- * declare module '@astryxdesign/core/Badge' {
- *   interface BadgeVariantMap {
- *     'premium': true;
- *   }
- * }
- * ```
- */
-export interface BadgeVariantMap {
-  neutral: true;
-  info: true;
-  success: true;
-  warning: true;
-  error: true;
-  blue: true;
-  cyan: true;
-  green: true;
-  orange: true;
-  pink: true;
-  purple: true;
-  red: true;
-  teal: true;
-  yellow: true;
-}
-
 /**
  * Badge variant type derived from BadgeVariantMap.
  * Extensible via module augmentation of BadgeVariantMap.

package/src/Badge/index.ts

@@ -5,15 +5,41 @@
 /**
  * @file index.ts
  * @input Imports Badge component and types from Badge.tsx
- * @output Exports Badge, BadgeProps, BadgeVariant, BadgeVariantMap
+ * @output Exports Badge, BadgeProps, BadgeVariant
  * @position Component entry point; re-exported by /packages/core/src/index.ts
  *
  * SYNC: When modified, update this header and /packages/core/src/Badge/Badge.doc.mjs
  */
 
+/**
+ * Extensible variant map for Badge.
+ *
+ * Theme packages can add custom variants via TypeScript module augmentation:
+ * @example
+ * ```
+ * declare module '@astryxdesign/core/Badge' {
+ *   interface BadgeVariantMap {
+ *     'premium': true;
+ *   }
+ * }
+ * ```
+ */
+export interface BadgeVariantMap {
+  neutral: true;
+  info: true;
+  success: true;
+  warning: true;
+  error: true;
+  blue: true;
+  cyan: true;
+  green: true;
+  orange: true;
+  pink: true;
+  purple: true;
+  red: true;
+  teal: true;
+  yellow: true;
+}
+
 export {Badge} from './Badge';
-export type {
-  BadgeProps,
-  BadgeVariant,
-  BadgeVariantMap,
-} from './Badge';
+export type {BadgeProps, BadgeVariant} from './Badge';

package/src/Banner/Banner.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: 'Banner',
@@ -131,7 +131,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 export const docsZh = {
   name: 'Banner',
   displayName: 'Banner',
@@ -206,7 +206,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description: 'persistent message for errors, updates, warnings, or confirmations',
   usage: {