@astryxdesign/core 0.2.0 → 0.3.0-canary.1b8b3f2

package/dist/Pagination/Pagination.js

@@ -5,7 +5,9 @@
 /**
  * @file Pagination.tsx
  * @input Uses React, StyleX, Button, Icon, Selector, Text; page number buttons delegate to Button.
- *   Reads i18n direction via useDirection() to flip the prev/next chevrons under RTL.
+ *   Prev/next and first/last chevrons mirror under RTL via the shared rtlStyles.mirror
+ *   (CSS scaleX), not a JS direction read. The input variant uses the chevronsLeft/chevronsRight
+ *   (first/last) icons.
  * @output Exports Pagination component, PaginationProps, PaginationVariant, PaginationSize types
  * @position Core implementation; consumed by index.ts, tested by Pagination.test.tsx
  *
@@ -13,11 +15,11 @@
  * - /packages/core/src/Pagination/Pagination.test.tsx (tests for new/changed behavior)
  * - /packages/core/src/Pagination/index.ts (exports if types change)
  * - /apps/storybook/stories/Pagination.stories.tsx (storybook stories)
- * - /packages/cli/templates/blocks/components/Pagination/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Pagination/ (showcase blocks)
  *
  * Last synced props: page, onChange, changeAction, totalItems, totalPages, hasMore,
- *   pageSize, pageSizeOptions, onPageSizeChange, variant, siblingCount, size, isDisabled,
- *   label, data-testid, xstyle
+ *   pageSize, pageSizeOptions, onPageSizeChange, variant, pageLabel,
+ *   hasFirstLast, step, siblingCount, size, isDisabled, label, data-testid, xstyle
  */
 import { useOptimistic, useTransition } from 'react';
 import * as stylex from '@stylexjs/stylex';
@@ -25,33 +27,19 @@ import "../theme/tokens.stylex.js";
 import { colorVars, fontWeightVars, sizeVars, spacingVars, durationVars, easeVars, typeScaleVars } from "../theme/tokens.stylex.js";
 import { Button } from "../Button/index.js";
 import { Icon } from "../Icon/index.js";
+import { NumberInput } from "../NumberInput/index.js";
 import { Selector } from "../Selector/index.js";
 import { Text } from "../Text/index.js";
 import { useAnnounce } from "../hooks/useAnnounce.js";
 import { useListFocus } from "../hooks/useListFocus.js";
-import { mergeProps } from "../utils/index.js";
+import { mergeProps, rtlStyles } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
 import { useTranslator } from "../i18n/useTranslator.js";
-import { useDirection } from "../i18n/useDirection.js";
 
 // =============================================================================
 // Types
 // =============================================================================
 
-/**
- * Extensible variant map for Pagination.
- *
- * Theme packages can add custom variants via TypeScript module augmentation:
- * @example
- * ```
- * declare module '@astryxdesign/core/Pagination' {
- *   interface PaginationVariantMap {
- *     'progress': true;
- *   }
- * }
- * ```
- */
-
 /** Visual variant controlling what appears between prev/next buttons.
  * Extensible via module augmentation of PaginationVariantMap.
  */
@@ -62,6 +50,8 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 // Styles
 // =============================================================================
 
+/** Width (px) of the page-size Selector field. */
+const PAGE_SIZE_SELECTOR_WIDTH = 80;
 const styles = {
   root: {
     k1xSpc: "x78zum5",
@@ -168,6 +158,9 @@ export function Pagination({
   pageSizeOptions,
   onPageSizeChange,
   variant = 'pages',
+  pageLabel,
+  hasFirstLast = true,
+  step: stepProp = 1,
   siblingCount = 1,
   size = 'md',
   isDisabled = false,
@@ -184,16 +177,12 @@ export function Pagination({
   // Resolve system strings once per render. Prop overrides win.
   const t = useTranslator();
   const label = labelFromProps ?? t('@astryx.pagination.label');
-  const previousLabel = t('@astryx.pagination.previous');
-  const nextLabel = t('@astryx.pagination.next');
-
-  // Directional icons: under RTL, the "previous" control points right and the
-  // "next" control points left. aria-labels stay semantic (unchanged).
-  const direction = useDirection();
-  const previousIcon = direction === 'rtl' ? 'chevronRight' : 'chevronLeft';
-  const nextIcon = direction === 'rtl' ? 'chevronLeft' : 'chevronRight';
+  const firstLabel = t('@astryx.pagination.first');
+  const lastLabel = t('@astryx.pagination.last');
   const pageIndicatorsLabel = t('@astryx.pagination.pageIndicators');
   const itemsPerPageLabel = t('@astryx.pagination.itemsPerPage');
+  const goToPageLabel = t('@astryx.pagination.goToPageInput');
+  const inputLabelText = pageLabel ?? t('@astryx.pagination.pageLabel');
 
   // pageSize is typed as number, so 0, NaN, and negatives are valid at the
   // type level but yield Infinity/NaN page counts, and
@@ -201,6 +190,21 @@ export function Pagination({
   // positive integer; non-finite values fall back to the default.
   const pageSize = Number.isFinite(pageSizeProp) ? Math.max(1, Math.floor(pageSizeProp)) : 10;
 
+  // Prev/next stride. Same guard as pageSize: non-integer or < 1 falls back to
+  // a single-page step so a bad value never freezes or reverses navigation.
+  const step = Number.isInteger(stepProp) && stepProp >= 1 ? stepProp : 1;
+
+  // The prev/next buttons advance `step` pages, so their accessible names must
+  // reflect the stride: a plain "previous/next page" for the default single
+  // step, or an explicit "back/forward N pages" so a screen reader never
+  // announces a single-page move for a multi-page jump.
+  const previousLabel = step > 1 ? t('@astryx.pagination.previousBy', {
+    step
+  }) : t('@astryx.pagination.previous');
+  const nextLabel = step > 1 ? t('@astryx.pagination.nextBy', {
+    step
+  }) : t('@astryx.pagination.next');
+
   // Announce page changes politely (navigation-10). The controls carry no
   // live region, so page transitions were previously silent to screen readers.
   // Only user-driven changes go through handlePageChange, so initial mount is
@@ -225,13 +229,9 @@ export function Pagination({
     wrap: true,
     orientation: 'horizontal'
   });
-
-  // Compute pagination state
   const computedTotalPages = totalPagesProp ?? (totalItems != null ? Math.ceil(totalItems / pageSize) : undefined);
   const hasPrevious = optimisticPage > 1;
   const hasNext = computedTotalPages != null ? optimisticPage < computedTotalPages : hasMore ?? false;
-
-  // Return null for empty state
   if (totalItems != null && totalItems <= 0) {
     return null;
   }
@@ -280,14 +280,32 @@ export function Pagination({
       handlePageChange(nextPage);
     }
   };
+
+  // Clamp a target page into the valid range. The lower bound is always 1; the
+  // upper bound only exists when the page count is known (cursor/hasMore mode
+  // leaves it open-ended).
+  const clampPage = target => {
+    const lower = Math.max(target, 1);
+    return computedTotalPages != null ? Math.min(lower, computedTotalPages) : lower;
+  };
   const handlePrevious = () => {
     if (hasPrevious) {
-      handlePageChange(optimisticPage - 1);
+      handlePageChange(clampPage(optimisticPage - step));
     }
   };
   const handleNext = () => {
     if (hasNext) {
-      handlePageChange(optimisticPage + 1);
+      handlePageChange(clampPage(optimisticPage + step));
+    }
+  };
+  const handleFirst = () => {
+    if (hasPrevious) {
+      handlePageChange(1);
+    }
+  };
+  const handleLast = () => {
+    if (hasNext && computedTotalPages != null) {
+      handlePageChange(computedTotalPages);
     }
   };
   const handlePageSizeChange = value => {
@@ -297,11 +315,28 @@ export function Pagination({
     handlePageChange(1);
   };
 
+  // The value currently shown in the input box is the committed page number.
+  const inputCommittedValue = optimisticPage;
+
+  // NumberInput owns the typing/pending state and clamps to [min, max] with
+  // integer-only semantics, so it only ever hands back a valid page here.
+  // Navigation is page-based via onChange.
+  const handleInputCommit = nextPage => {
+    if (isDisabled || nextPage === optimisticPage) {
+      return;
+    }
+    handlePageChange(nextPage);
+  };
+
   // Item range for count display
   const rangeStart = (optimisticPage - 1) * pageSize + 1;
   const rangeEnd = totalItems != null ? Math.min(optimisticPage * pageSize, totalItems) : optimisticPage * pageSize;
   const buttonSize = size === 'sm' ? 'sm' : 'md';
   const isSm = size === 'sm';
+
+  // First/last buttons only exist in the input variant, and only when the page
+  // count is known (they'd have no target otherwise).
+  const showFirstLast = hasFirstLast && variant === 'input' && computedTotalPages != null;
   const renderIndicator = () => {
     switch (variant) {
       case 'pages':
@@ -456,6 +491,63 @@ export function Pagination({
             })
           });
         }
+      case 'input':
+        {
+          // The editable box needs a known page count to clamp against; in
+          // cursor/hasMore mode (no total) there is no valid range, so the box is
+          // disabled rather than accepting entries it can't resolve — matching the
+          // convention that a typeable page box requires a known total.
+          const isInputDisabled = isDisabled || computedTotalPages == null;
+          const inputNode = /*#__PURE__*/_jsx(NumberInput, {
+            label: goToPageLabel,
+            isLabelHidden: true,
+            value: inputCommittedValue,
+            onChange: handleInputCommit,
+            min: 1,
+            max: computedTotalPages ?? undefined,
+            isIntegerOnly: true,
+            size: size,
+            width: isSm ? sizeVars['--size-element-sm'] : sizeVars['--size-element-md'],
+            isDisabled: isInputDisabled,
+            "data-testid": testId != null ? `${testId}-input` : undefined
+          });
+
+          // Label wording: "Page [ n ] / N". The leading noun comes from
+          // `pageLabel`; the trailing "/ N" total is omitted when unknown.
+          return /*#__PURE__*/_jsxs("span", {
+            ...{
+              className: "x3nfvp2 x6s0dn4 xzye2dw xuxw1ft"
+            },
+            children: [/*#__PURE__*/_jsx("span", {
+              "aria-hidden": "true",
+              ...mergeProps(themeProps('pagination-input-label', {
+                size
+              }), {
+                0: {
+                  className: "xv1l7n4 xcr08ib x87ps6o"
+                },
+                1: {
+                  className: "xv1l7n4 x87ps6o x141an7d"
+                }
+              }[!!isSm << 0]),
+              children: inputLabelText
+            }), inputNode, computedTotalPages != null && /*#__PURE__*/_jsx("span", {
+              ...mergeProps(themeProps('pagination-input-total', {
+                size
+              }), {
+                0: {
+                  className: "xv1l7n4 xcr08ib x87ps6o"
+                },
+                1: {
+                  className: "xv1l7n4 x87ps6o x141an7d"
+                }
+              }[!!isSm << 0]),
+              children: t('@astryx.pagination.ofTotalPages', {
+                total: computedTotalPages
+              })
+            })]
+          });
+        }
       case 'none':
       default:
         return null;
@@ -474,46 +566,76 @@ export function Pagination({
       ...{
         className: "x78zum5 x6s0dn4 x1txdalj"
       },
-      children: /*#__PURE__*/_jsx("div", {
-        ...{
-          className: "x1dmp6jm"
-        },
-        children: /*#__PURE__*/_jsx(Selector, {
-          label: itemsPerPageLabel,
-          isLabelHidden: true,
-          options: pageSizeOptions.map(opt => String(opt)),
-          value: String(pageSize),
-          onChange: handlePageSizeChange,
-          size: buttonSize,
-          isDisabled: isDisabled
-        })
+      children: /*#__PURE__*/_jsx(Selector, {
+        label: itemsPerPageLabel,
+        isLabelHidden: true,
+        options: pageSizeOptions.map(opt => String(opt)),
+        value: String(pageSize),
+        onChange: handlePageSizeChange,
+        size: buttonSize,
+        isDisabled: isDisabled
+        // `width`, not `xstyle`: Selector's xstyle lands on the trigger
+        // box, while `width` sizes the whole field — which is what the
+        // removed wrapper did.
+        ,
+        width: PAGE_SIZE_SELECTOR_WIDTH
       })
     }), /*#__PURE__*/_jsxs("div", {
       ...{
         className: "x78zum5 x6s0dn4 xzye2dw"
       },
-      children: [/*#__PURE__*/_jsx(Button, {
+      children: [showFirstLast && /*#__PURE__*/_jsx(Button, {
+        label: firstLabel,
+        tooltip: isDisabled || !hasPrevious ? undefined : firstLabel,
+        variant: "ghost",
+        size: buttonSize,
+        icon: /*#__PURE__*/_jsx(Icon, {
+          icon: "chevronsLeft",
+          size: isSm ? 'sm' : 'md',
+          xstyle: rtlStyles.mirror
+        }),
+        onClick: handleFirst,
+        isDisabled: isDisabled || !hasPrevious,
+        isIconOnly: true
+      }), /*#__PURE__*/_jsx(Button, {
         label: previousLabel,
+        tooltip: isDisabled || !hasPrevious ? undefined : previousLabel,
         variant: "ghost",
         size: buttonSize,
         icon: /*#__PURE__*/_jsx(Icon, {
-          icon: previousIcon,
-          size: isSm ? 'sm' : 'md'
+          icon: "chevronLeft",
+          size: isSm ? 'sm' : 'md',
+          xstyle: rtlStyles.mirror
         }),
         onClick: handlePrevious,
         isDisabled: isDisabled || !hasPrevious,
         isIconOnly: true
       }), renderIndicator(), /*#__PURE__*/_jsx(Button, {
         label: nextLabel,
+        tooltip: isDisabled || !hasNext ? undefined : nextLabel,
         variant: "ghost",
         size: buttonSize,
         icon: /*#__PURE__*/_jsx(Icon, {
-          icon: nextIcon,
-          size: isSm ? 'sm' : 'md'
+          icon: "chevronRight",
+          size: isSm ? 'sm' : 'md',
+          xstyle: rtlStyles.mirror
         }),
         onClick: handleNext,
         isDisabled: isDisabled || !hasNext,
         isIconOnly: true
+      }), showFirstLast && /*#__PURE__*/_jsx(Button, {
+        label: lastLabel,
+        tooltip: isDisabled || !hasNext ? undefined : lastLabel,
+        variant: "ghost",
+        size: buttonSize,
+        icon: /*#__PURE__*/_jsx(Icon, {
+          icon: "chevronsRight",
+          size: isSm ? 'sm' : 'md',
+          xstyle: rtlStyles.mirror
+        }),
+        onClick: handleLast,
+        isDisabled: isDisabled || !hasNext,
+        isIconOnly: true
       })]
     })]
   });

package/dist/Pagination/index.d.ts

@@ -4,6 +4,27 @@
  * @output Public API for Pagination module
  * @position Barrel export; consumed by packages/core/src/index.ts
  */
+/**
+ * Extensible variant map for Pagination.
+ *
+ * Theme packages can add custom variants via TypeScript module augmentation:
+ * @example
+ * ```
+ * declare module '@astryxdesign/core/Pagination' {
+ *   interface PaginationVariantMap {
+ *     'progress': true;
+ *   }
+ * }
+ * ```
+ */
+export interface PaginationVariantMap {
+    pages: true;
+    count: true;
+    compact: true;
+    dots: true;
+    input: true;
+    none: true;
+}
 export { Pagination, generatePageRange } from './Pagination';
-export type { PaginationProps, PaginationVariant, PaginationVariantMap, PaginationSize, } from './Pagination';
+export type { PaginationProps, PaginationVariant, PaginationSize, } from './Pagination';
 //# sourceMappingURL=index.d.ts.map

package/dist/Pagination/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Pagination/index.ts"],"names":[],"mappings":"AAIA;;;;;GAKG;AAEH,OAAO,EAAC,UAAU,EAAE,iBAAiB,EAAC,MAAM,cAAc,CAAC;AAC3D,YAAY,EACV,eAAe,EACf,iBAAiB,EACjB,oBAAoB,EACpB,cAAc,GACf,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Pagination/index.ts"],"names":[],"mappings":"AAIA;;;;;GAKG;AAEH;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,IAAI,CAAC;IACZ,KAAK,EAAE,IAAI,CAAC;IACZ,OAAO,EAAE,IAAI,CAAC;IACd,IAAI,EAAE,IAAI,CAAC;IACX,KAAK,EAAE,IAAI,CAAC;IACZ,IAAI,EAAE,IAAI,CAAC;CACZ;AAED,OAAO,EAAC,UAAU,EAAE,iBAAiB,EAAC,MAAM,cAAc,CAAC;AAC3D,YAAY,EACV,eAAe,EACf,iBAAiB,EACjB,cAAc,GACf,MAAM,cAAc,CAAC"}

package/dist/Pagination/index.js

@@ -8,4 +8,18 @@
  * @output Public API for Pagination module
  * @position Barrel export; consumed by packages/core/src/index.ts
  */
+
+/**
+ * Extensible variant map for Pagination.
+ *
+ * Theme packages can add custom variants via TypeScript module augmentation:
+ * @example
+ * ```
+ * declare module '@astryxdesign/core/Pagination' {
+ *   interface PaginationVariantMap {
+ *     'progress': true;
+ *   }
+ * }
+ * ```
+ */
 export { Pagination, generatePageRange } from "./Pagination.js";

package/dist/Popover/Popover.d.ts

@@ -10,7 +10,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, { type ReactElement, type ReactNode } from 'react';
 import type { BaseProps } from '../BaseProps';
@@ -108,9 +108,26 @@ export interface PopoverProps extends Pick<BaseProps, 'xstyle' | 'className' | '
     width?: number | string;
     /**
      * 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.
@@ -184,7 +201,7 @@ export interface PopoverProps extends Pick<BaseProps, 'xstyle' | 'className' | '
  * />
  * ```
  */
-export declare function Popover({ children, anchorRef, content, placement, alignment, isOpen, onOpenChange, isEnabled, width, label, hasCloseButton, closeButtonLabel, hasAutoFocus, hasLightDismiss, hasEscapeDismiss, xstyle, className, style, 'data-testid': testId, }: PopoverProps): ReactElement;
+export declare function Popover({ children, anchorRef, content, placement, alignment, isOpen, onOpenChange, isEnabled, width, label, role, isModal, hasCloseButton, closeButtonLabel, hasAutoFocus, hasLightDismiss, hasEscapeDismiss, xstyle, className, style, 'data-testid': testId, }: PopoverProps): ReactElement;
 export declare namespace Popover {
     var displayName: string;
 }

package/dist/Popover/Popover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../src/Popover/Popover.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,EAGZ,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,cAAc,EAAE,cAAc,EAAC,MAAM,mBAAmB,CAAC;AA4BtE;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC,2EAA2E;IAC3E,GAAG,EAAE,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IACtC,sCAAsC;IACtC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,+DAA+D;IAC/D,eAAe,EAAE,QAAQ,CAAC;IAC1B,6DAA6D;IAC7D,eAAe,EAAE,OAAO,CAAC;IACzB,4DAA4D;IAC5D,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,YAAa,SAAQ,IAAI,CACxC,SAAS,EACT,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA6BG;IACH,QAAQ,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,yBAAyB,KAAK,SAAS,CAAC,CAAC;IAEzE;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAEzC;;OAEG;IACH,OAAO,EAAE,SAAS,CAAC;IAEnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;;;;OAOG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAsCD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,SAAS,EACT,OAAO,EACP,SAAmB,EACnB,SAAmB,EACnB,MAAM,EACN,YAAY,EACZ,SAAgB,EAChB,KAAK,EACL,KAAK,EACL,cAAc,EACd,gBAAgB,EAChB,YAAY,EACZ,eAAsB,EACtB,gBAAuB,EACvB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,GACtB,EAAE,YAAY,GAAG,YAAY,CAkR7B;yBAtSe,OAAO"}
+{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../src/Popover/Popover.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,EAGZ,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,cAAc,EAAE,cAAc,EAAC,MAAM,mBAAmB,CAAC;AA4BtE;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC,2EAA2E;IAC3E,GAAG,EAAE,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IACtC,sCAAsC;IACtC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,+DAA+D;IAC/D,eAAe,EAAE,QAAQ,CAAC;IAC1B,6DAA6D;IAC7D,eAAe,EAAE,OAAO,CAAC;IACzB,4DAA4D;IAC5D,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,YAAa,SAAQ,IAAI,CACxC,SAAS,EACT,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA6BG;IACH,QAAQ,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,yBAAyB,KAAK,SAAS,CAAC,CAAC;IAEzE;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAEzC;;OAEG;IACH,OAAO,EAAE,SAAS,CAAC;IAEnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAEzB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;;;;OAOG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAsCD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,SAAS,EACT,OAAO,EACP,SAAmB,EACnB,SAAmB,EACnB,MAAM,EACN,YAAY,EACZ,SAAgB,EAChB,KAAK,EACL,KAAK,EACL,IAAe,EACf,OAAO,EACP,cAAc,EACd,gBAAgB,EAChB,YAAY,EACZ,eAAsB,EACtB,gBAAuB,EACvB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,GACtB,EAAE,YAAY,GAAG,YAAY,CAoR7B;yBA1Se,OAAO"}

package/dist/Popover/Popover.js

@@ -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, { useCallback, useRef } from 'react';
 import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js";
@@ -133,6 +133,8 @@ export function Popover({
   isEnabled = true,
   width,
   label,
+  role = 'dialog',
+  isModal,
   hasCloseButton,
   closeButtonLabel,
   hasAutoFocus,
@@ -157,6 +159,8 @@ export function Popover({
   }, [onOpenChange]);
   const popover = usePopover({
     dialogLabel: label,
+    role,
+    isModal,
     hasLightDismiss,
     hasEscapeDismiss,
     hasCloseButton,

package/dist/Popover/usePopover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePopover.d.ts","sourceRoot":"","sources":["../../src/Popover/usePopover.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,EAAiC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE5E,OAAO,EAAW,KAAK,kBAAkB,EAAC,MAAM,mBAAmB,CAAC;AAEpE,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AA2DnD;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IAEtB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;;;;;;;OAUG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;;;;;;;;OAYG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAEzB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;;;;;;OASG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,UAAU,EAAE,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IAE7C;;;;OAIG;IACH,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAEnD;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;;;OAIG;IACH,IAAI,EAAE,CAAC,OAAO,CAAC,EAAE;QAAC,aAAa,CAAC,EAAE,OAAO,CAAA;KAAC,KAAK,IAAI,CAAC;IAEpD;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;IAEjB;;OAEG;IACH,MAAM,EAAE,MAAM,IAAI,CAAC;IAEnB;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;;;;;;;;;;OAWG;IACH,MAAM,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,KAAK,CAAC,EAAE,kBAAkB,KAAK,SAAS,CAAC;IAEvE;;OAEG;IACH,YAAY,EAAE;QACZ,eAAe,EAAE,QAAQ,GAAG,MAAM,CAAC;QACnC,eAAe,EAAE,OAAO,CAAC;QACzB,eAAe,EAAE,MAAM,CAAC;KACzB,CAAC;CACH;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,wBAAgB,UAAU,CAAC,OAAO,GAAE,iBAAsB,GAAG,gBAAgB,CAyJ5E"}
+{"version":3,"file":"usePopover.d.ts","sourceRoot":"","sources":["../../src/Popover/usePopover.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,EAAiC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE5E,OAAO,EAAW,KAAK,kBAAkB,EAAC,MAAM,mBAAmB,CAAC;AAEpE,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AA6DnD;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IAEtB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;;;;;;;OAUG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;;;;;;;;OAYG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAEzB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;;;;;;OASG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,UAAU,EAAE,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IAE7C;;;;OAIG;IACH,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAEnD;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;;;OAIG;IACH,IAAI,EAAE,CAAC,OAAO,CAAC,EAAE;QAAC,aAAa,CAAC,EAAE,OAAO,CAAA;KAAC,KAAK,IAAI,CAAC;IAEpD;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;IAEjB;;OAEG;IACH,MAAM,EAAE,MAAM,IAAI,CAAC;IAEnB;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;;;;;;;;;;OAWG;IACH,MAAM,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,KAAK,CAAC,EAAE,kBAAkB,KAAK,SAAS,CAAC;IAEvE;;OAEG;IACH,YAAY,EAAE;QACZ,eAAe,EAAE,QAAQ,GAAG,MAAM,CAAC;QACnC,eAAe,EAAE,OAAO,CAAC;QACzB,eAAe,EAAE,MAAM,CAAC;KACzB,CAAC;CACH;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,wBAAgB,UAAU,CAAC,OAAO,GAAE,iBAAsB,GAAG,gBAAgB,CA6J5E"}

package/dist/Popover/usePopover.js

@@ -21,6 +21,7 @@ import { useFocusTrap } from "../hooks/useFocusTrap.js";
 import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, radiusVars, shadowVars } from "../theme/tokens.stylex.js";
 import { Button } from "../Button/index.js";
+import { rtlStyles } from "../utils/index.js";
 import { useTranslator } from "../i18n/index.js";
 import { useDevWarning } from "../hooks/useDevWarning.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -34,6 +35,18 @@ const styles = {
   contentWrapper: {
     kVAEAm: "x1n2onr6",
     $$css: true
+  },
+  closeButtonWrapper: {
+    kVAEAm: "x10l6tqk",
+    krVfgx: "x1ey2m1c",
+    kY2c9j: "x1vjfegm",
+    kzqmXN: "x1i1rx1s x10okhzq",
+    kZKoxP: "xjm9jq1 x132qfvm",
+    kVQacm: "xb3r6kr x1dordxg",
+    kz4h6p: "x1hyvwdk x10wafsz",
+    kfzvcC: "x47corl xbt4iw",
+    kLKAdn: "xexx8yu x1kw28su",
+    $$css: true
   }
 };
 
@@ -182,9 +195,7 @@ export function usePopover(options = {}) {
       "aria-label": role === 'dialog' ? dialogLabel : undefined,
       ...stylex.props(styles.contentWrapper, hasSurface && styles.surface, xstyle),
       children: [children, hasCloseButton && /*#__PURE__*/_jsx("div", {
-        ...{
-          className: "x10l6tqk x1ey2m1c x1nrll8i x31h1t8 x1vjfegm x1i1rx1s x10okhzq xjm9jq1 x132qfvm xb3r6kr x1dordxg x1hyvwdk x10wafsz x47corl xbt4iw xexx8yu x1kw28su"
-        },
+        ...stylex.props(styles.closeButtonWrapper, rtlStyles.centerInline('100%')),
         children: /*#__PURE__*/_jsx(Button, {
           variant: "secondary",
           label: closeButtonLabel,

package/dist/PowerSearch/PowerSearch.d.ts

@@ -7,7 +7,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, { type ReactNode } from 'react';
 import type { BaseProps } from '../BaseProps';

package/dist/PowerSearch/PowerSearch.js

@@ -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, { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import * as stylex from '@stylexjs/stylex';