@astryxdesign/core 0.2.0-canary.fc53ff7 → 0.2.0-canary.fce8b64

package/src/Popover/Popover.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: 'Popover',
@@ -72,6 +72,20 @@ export const docs = {
           type: 'string',
           description: 'Accessible label for the popover dialog.',
         },
+        {
+          name: 'role',
+          type: "'dialog' | 'none'",
+          description:
+            'ARIA role for the popover wrapper. Use dialog for dialog-style popovers; use none when content provides its own role, like menu or listbox.',
+          default: "'dialog'",
+        },
+        {
+          name: 'isModal',
+          type: 'boolean',
+          description:
+            'Whether a dialog-style popover sets aria-modal. Only applies when role is dialog.',
+          default: 'true',
+        },
         {
           name: 'hasCloseButton',
           type: 'boolean',
@@ -145,7 +159,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 export const docsZh = {
   name: 'Popover',
   displayName: 'Popover',
@@ -213,6 +227,20 @@ export const docsZh = {
           type: 'string',
           description: '弹出框对话框的无障碍标签。',
         },
+        {
+          name: 'role',
+          type: "'dialog' | 'none'",
+          description:
+            '弹出框包装器的 ARIA 角色。对话框式弹出框使用 dialog；当内容提供自己的角色（如 menu 或 listbox）时使用 none。',
+          default: "'dialog'",
+        },
+        {
+          name: 'isModal',
+          type: 'boolean',
+          description:
+            '对话框式弹出框是否设置 aria-modal。仅在 role 为 dialog 时适用。',
+          default: 'true',
+        },
         {
           name: 'hasCloseButton',
           type: 'boolean',
@@ -275,7 +303,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description:
     'Click-triggered popover displaying interactive content anchored to trigger element; implements button+dialog ARIA pattern.',

package/src/Popover/Popover.test.tsx

@@ -107,6 +107,47 @@ describe('Popover', () => {
     expect(dialog).toHaveAttribute('aria-label', 'Greeting');
   });
 
+  it('can render a neutral wrapper when content owns its role', () => {
+    render(
+      <Popover
+        role="none"
+        content={
+          <div role="menu" aria-label="Actions">
+            Menu content
+          </div>
+        }
+        label="Actions">
+        <button type="button">Open</button>
+      </Popover>,
+    );
+
+    const trigger = screen.getByRole('button', {name: 'Open'});
+    expect(trigger).toHaveAttribute('aria-haspopup', 'true');
+    expect(
+      screen.queryByRole('dialog', {hidden: true}),
+    ).not.toBeInTheDocument();
+    expect(screen.getByRole('menu', {hidden: true})).toHaveAttribute(
+      'aria-label',
+      'Actions',
+    );
+  });
+
+  it('can render a non-modal dialog wrapper', () => {
+    render(
+      <Popover
+        role="dialog"
+        isModal={false}
+        content={<span>Hello</span>}
+        label="Greeting">
+        <button type="button">Open</button>
+      </Popover>,
+    );
+
+    const dialog = screen.getByRole('dialog', {hidden: true});
+    expect(dialog).toBeInTheDocument();
+    expect(dialog).not.toHaveAttribute('aria-modal');
+  });
+
   it('calls onOpenChange when opened', () => {
     const onOpenChange = vi.fn();
     render(

package/src/Popover/Popover.tsx

@@ -14,7 +14,7 @@
  * - /packages/core/src/Popover/Popover.test.tsx
  * - /packages/core/src/Popover/index.ts
  * - /apps/storybook/stories/Popover.stories.tsx
- * - /packages/cli/templates/blocks/components/Popover/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Popover/ (showcase blocks)
  */
 
 import React, {
@@ -163,10 +163,29 @@ export interface PopoverProps extends Pick<
 
   /**
    * Accessible label for the popover dialog.
-   * Recommended for accessibility (used as aria-label on the dialog).
+   * Recommended for accessibility when `role` is `'dialog'`.
    */
   label?: string;
 
+  /**
+   * ARIA role stamped on the popover content wrapper.
+   *
+   * Use `'dialog'` for dialog-style popovers. Use `'none'` when the popup
+   * content owns its own role, such as a child `role="menu"` or
+   * `role="listbox"`.
+   *
+   * @default 'dialog'
+   */
+  role?: 'dialog' | 'none';
+
+  /**
+   * Whether a dialog-style popover is modal (`aria-modal`). Only applies when
+   * `role` is `'dialog'`.
+   *
+   * @default true
+   */
+  isModal?: boolean;
+
   /**
    * Whether to include a hidden close button for accessibility.
    * The button appears when keyboard users tab past the last element.
@@ -293,6 +312,8 @@ export function Popover({
   isEnabled = true,
   width,
   label,
+  role = 'dialog',
+  isModal,
   hasCloseButton,
   closeButtonLabel,
   hasAutoFocus,
@@ -320,6 +341,8 @@ export function Popover({
 
   const popover = usePopover({
     dialogLabel: label,
+    role,
+    isModal,
     hasLightDismiss,
     hasEscapeDismiss,
     hasCloseButton,

package/src/Popover/usePopover.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: 'usePopover',
   displayName: 'usePopover',
@@ -46,7 +46,7 @@ export const docs = {
   category: 'interaction',
 };
 
-/** @type {import('../docs-types').HookTranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').HookTranslationDoc} */
 export const docsDense = {
   description: 'Headless click-triggered popovers w/ focus trap, auto-focus, light dismiss, Escape, optional hidden close button. Use for custom interactive floating content needing keyboard nav.',
   paramDescriptions: {

package/src/Popover/usePopover.tsx

@@ -27,6 +27,7 @@ import {
   shadowVars,
 } from '../theme/tokens.stylex';
 import {Button} from '../Button';
+import {rtlStyles} from '../utils';
 import {useTranslator} from '../i18n';
 import {useDevWarning} from '../hooks/useDevWarning';
 
@@ -43,12 +44,13 @@ const styles = stylex.create({
   contentWrapper: {
     position: 'relative',
   },
-  // Hidden close button wrapper - sr-only until focused, then positioned below popover
+  // Hidden close button wrapper - sr-only until focused, then positioned below
+  // popover. Inline-axis centering (+ the translateY(100%) that drops it below
+  // the surface) comes from rtlStyles.centerInline('100%') at the call site —
+  // it centers correctly in both LTR and RTL.
   closeButtonWrapper: {
     position: 'absolute',
     bottom: 0,
-    left: '50%',
-    transform: 'translate(-50%, 100%)',
     zIndex: 1,
     // sr-only by default
     width: {
@@ -417,7 +419,11 @@ export function usePopover(options: UsePopoverOptions = {}): UsePopoverReturn {
           )}>
           {children}
           {hasCloseButton && (
-            <div {...stylex.props(styles.closeButtonWrapper)}>
+            <div
+              {...stylex.props(
+                styles.closeButtonWrapper,
+                rtlStyles.centerInline('100%'),
+              )}>
               <Button
                 variant="secondary"
                 label={closeButtonLabel}

package/src/PowerSearch/PowerSearch.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: 'PowerSearch',
@@ -172,7 +172,7 @@ export const docs = {
 // See .context/decisions/dense-compression-protocol.md
 // -------------------------------------------------------
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 export const docsZh = {
   name: 'PowerSearch',
   displayName: 'Power Search',
@@ -319,7 +319,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description:
     'Structured filter bar where each token represents filter (field+operator+value). Users select fields from typeahead dropdown, configure operators+values in edit popover, manage filters as removable tokens.',

package/src/PowerSearch/PowerSearch.tsx

@@ -11,7 +11,7 @@
  *
  * SYNC: When modified, update:
  * - /packages/core/src/PowerSearch/index.ts
- * - /packages/cli/templates/blocks/components/PowerSearch/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/PowerSearch/ (showcase blocks)
  */
 
 import React, {

package/src/ProgressBar/ProgressBar.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: 'ProgressBar',
@@ -90,7 +90,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 export const docsZh = {
   name: 'ProgressBar',
   displayName: 'Progress Bar',
@@ -177,7 +177,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description:
     'Progress bar for displaying determinate or indeterminate progress.',

package/src/ProgressBar/ProgressBar.tsx

@@ -13,7 +13,7 @@
  * - /packages/core/src/ProgressBar/ProgressBar.test.tsx (tests for new/changed behavior)
  * - /packages/core/src/ProgressBar/index.ts (exports if types change)
  * - /apps/storybook/stories/ProgressBar.stories.tsx (storybook stories)
- * - /packages/cli/templates/blocks/components/ProgressBar/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/ProgressBar/ (showcase blocks)
  */
 
 import {useId} from 'react';
@@ -32,27 +32,7 @@ import {mergeProps} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
 import {VisuallyHidden} from '../VisuallyHidden';
-
-/**
- * Extensible variant map for ProgressBar.
- *
- * Theme packages can add custom variants via TypeScript module augmentation:
- * @example
- * ```
- * declare module '@astryxdesign/core/ProgressBar' {
- *   interface ProgressBarVariantMap {
- *     'brand': true;
- *   }
- * }
- * ```
- */
-export interface ProgressBarVariantMap {
-  accent: true;
-  success: true;
-  warning: true;
-  neutral: true;
-  error: true;
-}
+import type {ProgressBarVariantMap} from './index';
 
 /**
  * Progress bar variant type — maps to semantic color tokens.

package/src/ProgressBar/index.ts

@@ -6,9 +6,26 @@
  * @file ProgressBar component barrel export
  */
 
+/**
+ * Extensible variant map for ProgressBar.
+ *
+ * Theme packages can add custom variants via TypeScript module augmentation:
+ * @example
+ * ```
+ * declare module '@astryxdesign/core/ProgressBar' {
+ *   interface ProgressBarVariantMap {
+ *     'brand': true;
+ *   }
+ * }
+ * ```
+ */
+export interface ProgressBarVariantMap {
+  accent: true;
+  success: true;
+  warning: true;
+  neutral: true;
+  error: true;
+}
+
 export {ProgressBar} from './ProgressBar';
-export type {
-  ProgressBarProps,
-  ProgressBarVariant,
-  ProgressBarVariantMap,
-} from './ProgressBar';
+export type {ProgressBarProps, ProgressBarVariant} from './ProgressBar';

package/src/RadioList/RadioList.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: 'RadioList',
@@ -149,7 +149,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsZh = {
   usage: {
     description:
@@ -171,7 +171,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description:
     'Radio group component for single-value selection from list of options.',

package/src/RadioList/RadioList.tsx

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

package/src/RadioList/RadioListItem.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: 'RadioListItem',

package/src/RadioList/RadioListItem.tsx

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

package/src/Resizable/Resizable.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: 'Resizable',
   displayName: 'Resizable',
@@ -188,7 +188,7 @@ export const docs = {
   ],
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description: 'Hook-based resizable panel system. useResizable() manages size state; ResizeHandle provides interactive pill-grip separator.',
   usage: {

package/src/Resizable/ResizeHandle.test.tsx

@@ -290,8 +290,9 @@ describe('ResizeHandle', () => {
   it('centers the grab zone on the divider when the pill is centered (no bias)', () => {
     render(<Harness handleProps={{pillPlacement: 'center'}} />);
     const hitArea = getSeparator().firstElementChild as HTMLElement;
-    // No physical offset — a plain logical centering class, no biased transform.
-    expect(hitArea.className).toContain('hitAreaCenteredX');
+    // Centered via the shared rtlStyles.centerInline helper (direction-symmetric
+    // left+translateX), not a biased offset.
+    expect(hitArea.className).toContain('centerInline');
     expect(hitArea.className).not.toContain('hitAreaOffsetX');
   });
 

package/src/Resizable/ResizeHandle.tsx

@@ -30,7 +30,7 @@ import {
   radiusVars,
   spacingVars,
 } from '../theme/tokens.stylex';
-import {mergeProps, mergeRefs} from '../utils';
+import {mergeProps, mergeRefs, rtlStyles} from '../utils';
 import type {ResizableProps} from './useResizable';
 import {themeProps} from '../utils/themeProps';
 import {useTranslator} from '../i18n';
@@ -167,11 +167,8 @@ const styles = stylex.create({
     cursor: 'row-resize',
   },
   // Centered grab zone (pillPlacement 'center' / no bias): sit the hit area on
-  // the divider itself. Anchored logically so it centers in both directions.
-  hitAreaCenteredX: {
-    insetInlineStart: '50%',
-    transform: 'translateX(-50%)',
-  },
+  // the divider itself. Inline centering comes from rtlStyles.centerInline at
+  // the call site (correct in LTR and RTL); this block owns only the block axis.
   hitAreaCenteredY: {
     insetBlockStart: '50%',
     transform: 'translateY(-50%)',
@@ -188,8 +185,6 @@ const styles = stylex.create({
     transitionDuration: durationVars['--duration-fast'],
     transitionTimingFunction: easeVars['--ease-standard'],
     top: '50%',
-    insetInlineStart: '50%',
-    transform: 'translate(-50%, -50%)',
   },
   pillHorizontal: {
     width: 3,
@@ -586,7 +581,7 @@ export function ResizeHandle({
           // construction so the two stay aligned in LTR and RTL alike.
           hitBiasDir == null
             ? isHorizontal
-              ? styles.hitAreaCenteredX
+              ? rtlStyles.centerInline('0px')
               : styles.hitAreaCenteredY
             : isHorizontal
               ? dynamicStyles.hitAreaOffsetX(hitBiasDir)
@@ -609,14 +604,15 @@ export function ResizeHandle({
             stylex.props(
               styles.pill,
               isHorizontal ? styles.pillHorizontal : styles.pillVertical,
-              effectiveSide !== 'center' &&
-                (isHorizontal
+              effectiveSide === 'center'
+                ? rtlStyles.centerInline('-50%')
+                : isHorizontal
                   ? dynamicStyles.pillOffsetX(
                       effectiveSide === 'start' ? -1 : 1,
                     )
                   : dynamicStyles.pillOffsetY(
                       effectiveSide === 'start' ? -1 : 1,
-                    )),
+                    ),
               isAlwaysVisible ? styles.pillVisible : styles.pillHidden,
               isInteracting && !isDragging && styles.pillHover,
               isDragging && styles.pillActive,

package/src/Resizable/useResizable.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: 'useResizable',
   displayName: 'useResizable',
@@ -87,7 +87,7 @@ export const docs = {
   category: 'layout',
 };
 
-/** @type {import('../docs-types').HookTranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').HookTranslationDoc} */
 export const docsDense = {
   description: 'Adds drag-to-resize behavior to layout regions. Supports single-/multi-region configs w/ snap points, collapsible panels, localStorage persistence, cascade resize ordering.',
   paramDescriptions: {

package/src/Section/Section.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: 'Section',
@@ -86,7 +86,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 export const docsZh = {
   name: 'Section',
   displayName: 'Section',
@@ -168,7 +168,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description:
     'Page-level container for grouping content into regions. Use INSTEAD of Card for settings panels, form groups, and page sections.',

package/src/Section/Section.tsx

@@ -12,7 +12,7 @@
  * - /packages/core/src/Section/Section.doc.mjs (props table, features)
  * - /packages/core/src/Section/index.ts (exports if types change)
  * - /apps/storybook/stories/Section.stories.tsx (storybook stories)
- * - /packages/cli/templates/blocks/components/Section/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Section/ (showcase blocks)
  */
 
 import type {ReactNode} from 'react';
@@ -33,25 +33,7 @@ import {
 import type {SizeValue, SpacingStep} from '../utils/types';
 import {mergeProps} from '../utils';
 import {themeProps} from '../utils/themeProps';
-
-/**
- * Extensible variant map for Section.
- *
- * Theme packages can add custom variants via TypeScript module augmentation:
- * @example
- * ```
- * declare module '@astryxdesign/core/Section' {
- *   interface SectionVariantMap {
- *     'elevated': true;
- *   }
- * }
- * ```
- */
-export interface SectionVariantMap {
-  section: true;
-  transparent: true;
-  muted: true;
-}
+import type {SectionVariantMap} from './index';
 
 /**
  * Visual variant for the section.

package/src/Section/index.ts

@@ -11,9 +11,24 @@
  * SYNC: When modified, update /packages/core/src/Section/Section.doc.mjs
  */
 
+/**
+ * Extensible variant map for Section.
+ *
+ * Theme packages can add custom variants via TypeScript module augmentation:
+ * @example
+ * ```
+ * declare module '@astryxdesign/core/Section' {
+ *   interface SectionVariantMap {
+ *     'elevated': true;
+ *   }
+ * }
+ * ```
+ */
+export interface SectionVariantMap {
+  section: true;
+  transparent: true;
+  muted: true;
+}
+
 export {Section} from './Section';
-export type {
-  SectionProps,
-  SectionVariant,
-  SectionVariantMap,
-} from './Section';
+export type {SectionProps, SectionVariant} from './Section';

package/src/SegmentedControl/SegmentedControl.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: 'SegmentedControl',
@@ -108,7 +108,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsZh = {
   usage: {
     description:
@@ -123,7 +123,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   usage: {
     description:

package/src/SegmentedControl/SegmentedControl.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, {useMemo, useCallback, type ReactNode} from 'react';

package/src/SegmentedControl/SegmentedControlItem.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: 'SegmentedControlItem',