@bug-on/m3-expressive 1.0.0 → 1.1.0

package/dist/{split-button-trailing-uncheckable-C5CLCIKP.d.ts → split-button-trailing-uncheckable-CjOFCoyW.d.ts}

@@ -175,72 +175,72 @@ declare const BUTTON_COLOR_TOKENS: {
 type ButtonGroupVariant = "standard" | "connected" | "navbar";
 type ButtonGroupOrientation = "horizontal" | "vertical";
 /**
- * Thuộc tính truyền vào cho thành phần nhóm nút (Button Group).
+ * Props for ButtonGroup component.
  */
 interface ButtonGroupProps extends React$1.FieldsetHTMLAttributes<HTMLFieldSetElement> {
     /**
-     * Cấu trúc hiển thị của nhóm nút:
-     * - `standard`: Các nút cách xa và có khoảng cách độc lập với nhau (gap).
-     * - `connected`: Các nút nối liền khung viền với nhau để tạo thành dạng Segmented Button.
-     * - `navbar`: Nút hiển thị dưới dạng thanh điều hướng với active pill chuyển động (Sliding Indicator).
+     * Display variant of the button group:
+     * - `standard`: Independent buttons with gap spacing.
+     * - `connected`: Connected buttons sharing borders (Segmented Button).
+     * - `navbar`: Navigation bar variant with animated active sliding indicator pill.
      * @default "standard"
      */
     variant?: ButtonGroupVariant;
     /**
-     * Hướng sắp xếp của các nút trong nhóm.
+     * Layout orientation of buttons in group.
      * @default "horizontal"
      */
     orientation?: ButtonGroupOrientation;
     /**
-     * Đặt thành `true` nếu bạn muốn nhóm hiển thị dạng `standard` giãn đều lấp đầy toàn bộ khu vực chứa (container).
+     * When `true`, expands `standard` group to stretch full width of container.
      * @default false
      */
     fullWidth?: boolean;
     /**
-     * Áp dụng thống nhất chung một kích thước (`size`) cho tất cả các con trong nhóm (ghi đè kích thước lẻ từng nút).
+     * Applies unified `size` to all child buttons in group (overrides individual button sizes).
      */
     size?: MD3Size;
     /**
-     * Bật/tắt hiệu ứng thu phóng độ rộng / khoảng đệm (Morphing Width) khi nhấn vào các nút (áp dụng cho nhóm `standard`).
+     * Toggles width expansion/padding animation (Morphing Width) when buttons are pressed (`standard` group).
      * @default true
      */
     morphingWidth?: boolean;
     /**
-     * Tỷ lệ mở rộng chiều rộng của nút khi được nhấn (áp dụng cho nhóm `standard` ngang).
-     * Theo MD3 Spec, mặc định là 0.15 (15%).
+     * Expansion ratio for button width on press (`standard` horizontal group).
+     * Per MD3 Spec, default is 0.15 (15%).
      * @default 0.15
      */
     expandedRatio?: number;
     /**
-     * Tự động hiển thị biểu tượng (icon) Check khi một nút trạng thái nằm trong nhóm được chỉ định là `selected={true}`.
+     * Automatically displays Check icon when a child button has `selected={true}`.
      * @default false
      */
     showCheck?: boolean;
     /**
-     * Điều khiển hành vi hiển thị Icon (áp dụng chính cho `navbar`).
-     * - `selected`: Chỉ hiển thị icon trên mục được chọn.
-     * - `all`: Hiển thị trên tất cả.
-     * - `none`: Ẩn toàn bộ icon.
+     * Controls icon display behavior (primarily for `navbar`).
+     * - `selected`: Display icon only on selected item.
+     * - `all`: Display on all items.
+     * - `none`: Hide all icons.
      */
     iconBehavior?: "selected" | "all" | "none";
     /**
-     * Điều khiển hành vi hiển thị Label (áp dụng chính cho `navbar`).
-     * - `selected`: Chỉ hiển thị label trên mục được chọn.
-     * - `all`: Hiển thị trên tất cả.
-     * - `none`: Ẩn toàn bộ label.
+     * Controls label display behavior (primarily for `navbar`).
+     * - `selected`: Display label only on selected item.
+     * - `all`: Display on all items.
+     * - `none`: Hide all labels.
      */
     labelBehavior?: "selected" | "all" | "none";
     /**
-     * Tùy chọn: Bật chế độ Active Morphing (dựa trên Selection).
-     * Khi `true`, các nút sẽ tự động co dãn (tăng/giảm width) dựa trên việc nút nào đang được chọn,
-     * tạo hiệu ứng thay đổi kích thước mượt mà theo trạng thái.
-     * Khi `false` hoặc `undefined`, Group sẽ hoạt động dựa trên `isPressed` (nhấn chuột) như mặc định.
+     * Enable Active Morphing mode (selection-based).
+     * When `true`, buttons automatically expand/contract based on selection state,
+     * creating smooth size transitions.
+     * When `false` or `undefined`, Group responds to `isPressed` by default.
      */
     activeMorphing?: boolean;
     /**
-     * Class CSS tùy chỉnh áp dụng cho từng button con trong nhóm.
-     * Hữu ích để thay đổi padding, min-width hoặc các thuộc tính khác một cách linh hoạt.
-     * Đối với variant `navbar`, class này sẽ được ưu tiên hơn so với các padding mặc định.
+     * Custom CSS class applied to individual child buttons in group.
+     * Useful for customizing padding, min-width, or other layout properties.
+     * For `navbar` variant, overrides default padding styles.
      */
     itemClassName?: string;
 }
@@ -287,236 +287,225 @@ declare const ExtendedFAB: React$1.NamedExoticComponent<Omit<ExtendedFABProps, "
 
 type MotionButtonProps$1 = Omit<HTMLMotionProps<"button">, "children" | "color">;
 /**
- * Tham số Props dùng cho component thao tác nổi `FAB`.
+ * Props for `FAB` Floating Action Button component.
  *
  * @remarks
- * - Đảm bảo rằng đối với loại FAB chỉ show ra mỗi con Icon mà không có nhãn hiển thị (icon-only), bắt buộc phải có thuộc tính `aria-label` nhằm phục vụ (accessibility).
- * - Ở hình thể mở rộng (khi `extended={true}`), phần nội dung truyền vào `children` chính là chuỗi Text được thể hiện cùng nút, và nó sẽ khiến nút button có label mặc định nên bạn có thể chém bớt tham số `aria-label`.
- * - Thuộc tính cờ `lowered` (chìm) giúp giáng cấp hiệu ứng tạo bóng Shadow của thẻ, rải mảng cái shadow theo phong thái MD3 "lowered" FAB;
- *   sử dụng khi nút FAB này vốn bị bọc bên trong bề mặt chìm đè lên component gì khác mà vốn tụi nó đã nhún ở mực sâu (Ví dụ Bottom App Bar) để thiết lập Hierarchy hài hoà.
+ * - Ensure icon-only FABs specify `aria-label` for accessibility.
+ * - In extended mode (`extended={true}`), text passed to `children` acts as the label, so `aria-label` may be omitted if children is string.
+ * - `lowered` prop reduces the container shadow to MD3 "lowered" FAB specification;
+ *   useful when placed on surface containers like Bottom App Bars for visual balance.
  *
  * @see https://m3.material.io/components/floating-action-button/overview
  */
 interface FABProps extends MotionButtonProps$1 {
     /**
-     * Icon đại diện render — thông thường là truyền thẻ component Icon.
-     * Sẽ được tráo đổi thành Spinner tự động quay khi giá trị `loading={true}`.
+     * Icon element to render — typically an Icon component.
+     * Swapped for loading spinner when `loading={true}`.
      */
     icon: React$1.ReactNode;
     /**
-     * Kích thước hiển thị FAB. Tuân chuẩn.
-     * - `sm`: Small (40dp) — Được khuyên dùng cho các không gian kín/trong lòng Content.
-     * - `md`: Regular (56dp) — Action thứ yếu hoặc tiêu điểm màn hình. (Phần đông người dùng xài).
-     * - `lg`: Large (96dp) — Trọng tâm thao tác quan trọng lớn nhát.
-     * - `xl`: Extra-large (136dp) — Gây tiếng vang, dạng Spotlight cực bùng nổ của app.
+     * FAB size variant according to MD3 specification.
+     * - `sm`: Small (40dp) — Recommended for tight layouts / inside content.
+     * - `md`: Regular (56dp) — Standard primary action.
+     * - `lg`: Large (96dp) — High-emphasis action.
+     * - `xl`: Extra-large (136dp) — Spotlight action element.
      * @default "md"
      */
     size?: "sm" | "md" | "lg" | "xl";
     /**
-     * Container vai trò hệ thống tông màu MD3 dùng phết nền.
+     * MD3 color role container style.
      * @default "primary"
      */
     colorStyle?: "primary" | "secondary" | "tertiary" | "surface";
     /**
-     * Kích hoạt khi giá trị được đổi là `true`, sẽ diễn tả Animation bung chữ kèm theo độ dãn hình dài cho cái FAB.
-     * Chiều rộng tự cơi nới để thích ứng chuỗi `children`.
+     * When `true`, expands FAB to display label text alongside icon.
+     * Width automatically expands to fit `children`.
      * @default false
      */
     extended?: boolean;
     /**
-     * Nơi đón lấy chữ được render cùng khi `extended={true}` bật lên.
-     * Khuyến nghị là Text string thuần.
+     * Label content rendered when `extended={true}`.
+     * Plain string recommended.
      */
     children?: React$1.ReactNode;
     /**
-     * Nhấn `true`, thì rút lại shadow đi một cấp xuống độ nổi nông cạn.
-     * Mảng bám ở Bottom bar hay Top bar Surface để ránh rườm rà.
+     * When `true`, reduces container shadow to lowered elevation.
      * @default false
      */
     lowered?: boolean;
     /**
-     * Nhấp chuột sang `true`, đổi Icon thành cối xay Spinner chờ kết quả. Đồng loạt chặn click tương tác.
+     * When `true`, displays loading spinner and disables click interactions.
      * @default false
      */
     loading?: boolean;
     /**
-     * Có 2 chuẩn hình của Loading chờ.
+     * Loading spinner variant.
      * @default "loading-indicator"
      */
     loadingVariant?: "loading-indicator" | "circular";
     /**
-     * Hiện thẻ FAB lên layout không (Kiểm soát bằng motion scale Entrance/Exit).
+     * Controls FAB visibility in layout using scale motion animation.
      * @default true
      */
     visible?: boolean;
 }
 /**
- * Interface cho component bọc thẻ `FABPosition` — Gắn lớp absolute position nhét cục FAB vào một góc cố định của góc nào đó tại trình duyệt/bề mặt render.
+ * Props for `FABPosition` layout wrapper component.
+ * Position absolute wrapper to anchor FAB to a screen corner.
  *
  * @see {@link FABPosition}
  */
 interface FABPositionProps {
     /**
-     * Góc để niêm chặt nút FAB.
+     * Screen corner position for FAB.
      * @default "bottom-right"
      */
     position?: "bottom-right" | "bottom-left" | "top-right" | "top-left";
-    /** Kẹp một nùi element. Mong chờ thả Node `<FAB>` vào đây.*/
+    /** Child elements — typically a `<FAB>` component */
     children: React$1.ReactNode;
-    /** CSS Class hỗ trợ chỉnh override */
+    /** Additional CSS class */
     className?: string;
 }
 /**
- * Element bao bọc thẻ định vị Absolute cho component `<FAB>`.
+ * Absolute position wrapper component for `<FAB>`.
  *
- * Component dùng để cắm phao Neo cái FAB vào sát ở góc của screen kèm theo một cái offset space theo responsive an toàn mà lại trơn chu nhạy nhẽo.
- * Nhưng có quy tắc gốc đó là phần tử bao bọc cha mẹ của nó PHẢI có thẻ tag css `position: relative` (hoặc ở cấp tổ tiêm của trang nào đó phải đẻ gốc rễ ra posisition).
+ * Anchors FAB to a screen corner with responsive offset padding.
+ * Requires parent element to have `position: relative`.
  *
- * @example
- * ```tsx
- * <div className="relative min-h-screen">
- *   // Cái nút sẽ xà xuống dưới cùng bên lề Trái
- *   <FABPosition position="bottom-left">
- *     <FAB icon={<Icon name="edit" />} aria-label="Compose New Mail" />
- *   </FABPosition>
- * </div>
- * ```
- *
- * @see {@link FAB}
  * @see https://m3.material.io/components/floating-action-button/guidelines
  */
 declare function FABPosition({ position, children, className, }: FABPositionProps): react_jsx_runtime.JSX.Element;
 /**
- * Action nổi chính theo phong cách MD3 Expressive Floating Action Button (FAB).
+ * Primary Floating Action Button (FAB) component adhering to MD3 Expressive.
  *
- * Phơi nhiễm các action tạo nhịp điệu kích hoạt cho người sử dụng với đủ bộ trang hoàn trọn kích thước Size (SM->XL),
- * mang nhiều màu sắc Color role khác biệt, cung cấp một sức nén cho Label để kéo toẹt cái ống dài ra (gọi là Dạng Mở Rộng - Extended) tạo nên hành động sinh động,
- * Trạng thái load/nhấp hiện xuất cùng animation thu scale thoát cảnh bắt mắt đầy nghệ thuật.
+ * Supports sizes from SM to XL, multiple color roles, extended label expansion,
+ * loading states, and entrance/exit scale motion animations.
  *
  * @remarks
- * - Chỉ định bắt buộc `aria-label` cho những mẫu icon bị đơn côi trơ trọi (icon-only FABs).
- * - Trường hợp xài mode Mở Rộng qua việc truyền hàm `extended={true}`, nút FAB này tự ngộ nhận thân thế, lấy `children` dùng làm Aria label luôn hễ như `children` đó đang chứa text string.
- *   Khi ấy bạn tha hồ cắt bỏ thuộc tính `aria-label` ra.
- * - Lúc cho biến mất (`visible={false}`), bộ nút tung chiêu lùi về sau làm quả rút bóng thoát Scale-out qua effect spring uyển chuyển.
- * - Sài kèm `FABPosition` bao đùm nó lại nếu bạn muốn xích nó cố định ngấm chân sâu góc màn hình hiển thị.
+ * - Requires `aria-label` for icon-only FABs.
+ * - When `extended={true}`, string `children` is automatically used as the accessible label.
+ * - Animates scale out when `visible={false}` using fluid spring animation.
+ * - Combine with `FABPosition` to anchor to screen corners.
  *
  * @example
  * ```tsx
- * // FAB cơ bản, nhỏ xinh, chỉ hiện icon.
- * <FAB icon={<Icon name="search" />} aria-label="Nhấn tìm kiếm" size="sm" />
+ * // Basic small icon-only FAB
+ * <FAB icon={<Icon name="search" />} aria-label="Search" size="sm" />
  *
- * // Dịch sang dòng Extended có dòng caption chữ dài thòn
+ * // Extended FAB with label
  * const [isOpen, setOpen] = React.useState(false);
  * <FAB
  *   icon={<Icon name="edit" />}
  *   extended={isOpen}
  *   onClick={() => setOpen(!isOpen)}
  * >
- *   Viết tâm thư
+ *   Compose
  * </FAB>
  *
- * // FAB to lớn nhất dùng trạng thái chờ load Submit lên Server
+ * // Large FAB with loading state
  * <FAB
  *   icon={<Icon name="upload" />}
+
  *   size="lg"
  *   loading={isUploading}
  *   colorStyle="secondary"
- *   aria-label="Upload Files lên mây xanh"
+ *   aria-label="Upload files"
  * />
  *
- * // Cố định dưới chân tay phải
+ * // Fixed at bottom right
  * <FABPosition position="bottom-right">
- *   <FAB icon={<Icon name="add" />} aria-label="Dấu Cộng sinh nảy" />
+ *   <FAB icon={<Icon name="add" />} aria-label="Add item" />
  * </FABPosition>
  * ```
+
  *
  * @see https://m3.material.io/components/floating-action-button/overview
  */
 declare const FAB: React$1.NamedExoticComponent<Omit<FABProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 
 /**
- * Định dạng dữ liệu cho từng hành động (item) trong biểu mẫu menu của FAB.
+ * Data interface for each action item in FAB menu.
  *
- * Nếu bỏ qua thuộc tính `label`, item sẽ render dạng ô vuông chỉ có icon.
+ * If `label` is omitted, renders as an icon-only item.
  */
 interface FABMenuItemData {
-    /** Một ID duy nhất để dùng cho key react và quản lý focus. */
+    /** Unique ID used for React keys and focus tracking. */
     id: string;
-    /** Label hiển thị cạnh icon (tuỳ chọn). Không thêm thuộc tính này nếu muốn hiển thị chỉ có icon (icon-only). */
+    /** Label displayed adjacent to icon (optional). Omit for icon-only item. */
     label?: string;
-    /** Node của Icon — thường là một component SVG Icon duy nhất. */
+    /** Icon node — typically an SVG icon component. */
     icon: React$1.ReactNode;
-    /** Gọi hàm ngay lập tức khi item được kích hoạt (click hoặc nhấn Enter/Phím cách). */
+    /** Callback invoked when item is activated (click, Enter, or Space). */
     onClick: () => void;
     /**
-     * Khi `true`, vô hiệu hoá item về mặt hình thức lẫn tương tác rẽ nhánh.
-     * Vẫn dùng `aria-disabled` thay vì HTML `disabled` nhằm giữ nó lấy được focus phục vụ cho accessibility.
+     * When `true`, visually and interactively disables the item.
+     * Uses `aria-disabled` instead of HTML `disabled` to preserve focusability for accessibility.
      * @default false
      */
     disabled?: boolean;
-    /** Thêm CSS classes bổ sung dùng cho wrapper chính của item. */
+    /** Additional CSS class names for item wrapper. */
     className?: string;
 }
 /**
- * Các props điều khiển Component chính `FABMenu`.
+ * Props controlling the main `FABMenu` component.
  *
  * @remarks
- * FABMenu quản lý vòng đời trạng thái mở/đóng menu (open/close), quản lý focus, điều khiển phím,
- * và điều hướng hiệu ứng chuyển động. Trạng thái `expanded` được truyền từ ngoài (controlled state),
- * do đó bạn có thể quản lý qua react state, hoặc dùng router hay business logic khác.
+ * FABMenu manages menu open/close lifecycle, focus trapping, keyboard control,
+ * and staggered motion transitions. `expanded` state is controlled externally.
  */
 interface FABMenuProps {
-    /** FAB Menu có đang mở (mở rộng)/hiển thị hay không. */
+    /** Whether the FAB Menu is open (expanded). */
     expanded: boolean;
-    /** Hàm handler kích hoạt khi Toggle FAB được người dùng tương tác, hoặc khi dismiss backdrop. */
+    /** Callback invoked when Toggle FAB is interacted with or backdrop dismissed. */
     onToggle: (expanded: boolean) => void;
-    /** Danh sách các action items (Spec MD3 đề nghị 2-6 item là hoàn hảo). */
+    /** List of action items (MD3 spec recommends 2–6 items). */
     items: FABMenuItemData[];
     /**
-     * Vai trò màu (color role container) MD3 cho cái nút FAB lẫn các menu items.
+     * MD3 container color role for trigger FAB and menu items.
      * @default "primary"
      */
     colorVariant?: "primary" | "secondary" | "tertiary";
     /**
-     * Kích cỡ khởi tạo cho cái ToggleFAB (FAB biến hình thành cục đóng dấu X khi nó expanded).
+     * Initial size variant for ToggleFAB (morphs into close icon when expanded).
      * @default "baseline"
      */
     fabSize?: "baseline" | "medium" | "large";
     /**
-     * Căn lề của danh sách menu items tương quan với cái Toggle FAB.
-     * - `"end"`: Các items dồn hết theo lề phía tay phải (trailing edge, default cực hữu hiệu đối với RTL design).
-     * - `"start"`: Các items dồn hết dọc theo lề trái.
-     * - `"center"`: Các item sẽ được căn ra giữa chiều dọc, căn giữa tâm khối với cái FAB.
+     * Menu items alignment relative to Toggle FAB.
+     * - `"end"`: Items align to right edge (trailing edge, recommended for RTL).
+     * - `"start"`: Items align along left edge.
+     * - `"center"`: Items align vertically centered above FAB.
      * @default "end"
      */
     alignment?: "start" | "end" | "center";
-    /** Thuộc tính cho CSS component root để đè. */
+    /** Custom CSS className for root component. */
     className?: string;
     /**
-     * Nếu `true`, khi menu đang hiện ra, click chuột ra phía sau (màn xám mờ backdrop) để đóng menu.
+     * When `true`, clicking backdrop overlay closes menu.
      * @default true
      */
     closeOnBackdropClick?: boolean;
     /**
-     * Nếu `true`, focus sẽ tự động chạy xuống item CUỐI (sát bên trên cái nút FAB) khi menu vừa loé mờ ra.
-     * Nếu `false`, focus sẽ bay lên item ĐẦU TIÊN của danh sách (cao nhất trên màn hình).
+     * When `true`, focus automatically moves to the LAST item (closest above FAB) when expanded.
+     * If `false`, focus moves to the FIRST item in list.
+
      * @default true
      */
     focusLast?: boolean;
-    /** Bắt buộc truyền `aria-label` cho ToggleFAB để đáp ứng Accessibility. */
+    /** Required `aria-label` for ToggleFAB for accessibility. */
     "aria-label"?: string;
 }
 /**
- * Props thuộc component `ToggleFAB` đứng độc lập.
+ * Props for standalone `ToggleFAB` component.
  */
 interface ToggleFABProps {
-    /** Nút có đang trong trạng thái được kích hoạt check (expanded). */
+    /** Whether the button is in expanded/active state. */
     expanded: boolean;
-    /** Gọi khi xảy ra sự kiện Toggle nút. */
+    /** Callback fired when button toggle state changes. */
     onToggle: (expanded: boolean) => void;
     /**
-     * Function sinh Icon - nhận về tiến độ `progress` trong khoảng `0` -> `1` (Từ Chưa Expanded -> Đã Expanded)
-     * Dùng cho các hiệu ứng morphing Icon khi animtion render (VD: Từ Cộng thành Đóng).
+     * Icon generator function receiving `progress` between `0` -> `1` (collapsed -> expanded).
+     * Useful for icon morphing effects during animation (e.g., plus to close icon).
      *
      * @example
      * ```tsx
@@ -524,47 +513,47 @@ interface ToggleFABProps {
      * ```
      */
     icon: (progress: number) => React$1.ReactNode;
-    /** Vai trò màu container chuẩn MD3. @default "primary" */
+    /** MD3 container color role. @default "primary" */
     colorVariant?: "primary" | "secondary" | "tertiary";
-    /** Kích thước của cục FAB ban đầu (Sau khi nhấn sẽ thu tròn). @default "baseline" */
+    /** Initial FAB size variant. @default "baseline" */
     fabSize?: "baseline" | "medium" | "large";
-    /** CSS Class linh tinh bổ sung thêm. */
+    /** Additional CSS class name. */
     className?: string;
-    /** Thuộc tính đọc thẻ accessibility. Bắt buộc có. */
+    /** Accessible label requirement. Required. */
     "aria-label"?: string;
-    /** Kiểm soát giá trị của ID để link với menu qua aria-controls. */
+    /** ID link for aria-controls attribute to reference menu. */
     "aria-controls"?: string;
-    /** Trỏ id component. */
+    /** Component ID. */
     id?: string;
 }
 /**
- * Props thuộc component một món item đơn lẻ `FABMenuItem`.
+ * Props for an individual `FABMenuItem`.
  */
 interface FABMenuItemProps {
-    /** Node của icon hiện. */
+    /** Icon node to display. */
     icon: React$1.ReactNode;
-    /** Tên nhãn mô tả kế bên icon cho item này. Hoặc ẩn nó đi nếu không mong đợi. */
+    /** Descriptive label text adjacent to icon. */
     label?: string;
-    /** Hàm bắn ra khi item được kích. */
+    /** Callback fired when item is clicked. */
     onClick: () => void;
-    /** Vô hiệu hóa hành vi tương tác item mà vẫn cho phép bàn phím tab bấm dính lấy focus. @default false */
+    /** Disables interaction while keeping element focusable in tab order. @default false */
     disabled?: boolean;
-    /** Container tông màu. @default "primary" */
+    /** Container color role. @default "primary" */
     colorVariant?: "primary" | "secondary" | "tertiary";
     /** Custom CSS className. */
     className?: string;
-    /** Số index liệt kê trong mảng dùng tính render delay (Dành cho animation cấu trúc `custom`). */
+    /** Item index used for staggered animation delay. */
     index?: number;
-    /** Tổng danh sách items có mảng. */
+    /** Total items count in menu array. */
     totalItems?: number;
-    /** Giá trị logic `tabIndex` dùng điều khiển thao tác phím Tab thủ công. */
+    /** Logic `tabIndex` value for manual keyboard navigation. */
     tabIndex?: number;
 }
 /**
- * Nút Toggle FAB (Biến hình) có thể được dùng độc lập đứng một mình (standalone) hoặc kết nối để kích hoạt mở cả nùi Menu ở dưới con `FABMenu`.
+ * Toggle FAB button (Morphing FAB) usable as standalone or trigger for `FABMenu`.
  *
- * Sức ép hiệu ứng kích thước khung nền sẽ chuyển từ vuôn/vát cạnh sang hình tròn hẵn (square → circle), chuyển biến cả màu sắc
- * khi mà cờ `expanded` chuyển tiếp từ false sang → true.
+ * Container shape transitions from squircle to circle (square → circle) and shifts colors
+ * when `expanded` state changes from false → true.
  *
  * @example
  * ```tsx
@@ -580,45 +569,45 @@ interface FABMenuItemProps {
  */
 declare const ToggleFAB: React$1.NamedExoticComponent<ToggleFABProps & React$1.RefAttributes<HTMLButtonElement>>;
 /**
- * Một item thực hiện một loại hành động duy nhất trong `FABMenu`.
+ * Single action item within a `FABMenu`.
  *
- * Render hình dạng viên thuốc bao quanh icon cùng với label diễn giải.
- * Khi `label` bỏ trống, nó sẽ render thành một cục thẻ gạch ốp màu vuông vức chứa chữ mỗi cái icon.
- * Component chứa gợn sóng MD3 Ripple cùng 48dp chuẩn vùng target đụng diện chuẩn WCAG 2.5.5 cho cảm ứng.
+ * Renders a pill shape enclosing icon and optional label text.
+ * When `label` is omitted, renders as a square item containing only icon.
+ * Includes MD3 Ripple and 48dp touch target area per WCAG 2.5.5 touch target guidelines.
  *
  * @remarks
- * Những thành phần khi bị tắt (vô hiệu tương tác) thì chỉ được dùng role `aria-disabled="true"` ở lớp div bề mặt thay vì lấy
- *  thuộc tính gốc `disabled` của HTML. Nhờ đó, item tuy xám mờ không bấm được phím chuột vẫn sẽ có khả năng focus qua vòng đời tab phím bàn phím
- * (quy chuẩn chặt chẽ của Material Design 3).
+ * Disabled items use `aria-disabled="true"` rather than native HTML `disabled`
+ * so they remain focusable in the tab sequence per MD3 specification.
  */
 declare function FABMenuItem({ icon, label, onClick, disabled, colorVariant, className, tabIndex, }: FABMenuItemProps): react_jsx_runtime.JSX.Element;
 /**
  * MD3 Expressive FAB Menu.
  *
- * Bộ mở rộng Floating Action Button. Khi tương tác bật vào toggle-button (FAB con lai), sẽ trút ra mớ tác vụ menu ở xếp dọc (hoặc lan ra) từ trên đè ngược xuống trên nó.
+ * Floating Action Button expansion menu. Toggling trigger button reveals vertically stacked action items.
  *
- * Accessibility thực thi chuẩn MD3 toàn phần:
- *  - thẻ `role="menu"` trang bị cho thẻ hộp div làm luống container
- *  - trang bị thẻ `role="menuitem"` trên mảng items thành phần con
- *  - Lifecycle Focus cho trải nghiệm hoàn mỹ: Mở phím bật -> Focus thẳng lên item cao/thấp đầu/cuối cùng menu; Đóng tắt menu -> Focus trả về ngược lại ToggleFAB
- *  - Tính năng Bàn Phím: Lách Escape nhấn tắt nhắm, Nhấn phím hướng lên-xuống(ArrowUp/Down) để di chuyển, Móc Tab(hoặc là Shift+Tab) nhảy lăng quăng qua các item.
+ * Full MD3 Accessibility implementation:
+ *  - `role="menu"` assigned to container
+ *  - `role="menuitem"` assigned to child action items
+ *  - Focus lifecycle management: Open -> Focus first/last menu item; Close -> Restore focus to ToggleFAB
+ *  - Keyboard navigation: Escape key closes menu, ArrowUp/Down navigates items, Tab moves focus.
  *
  * @example
  * ```tsx
  * const [open, setOpen] = React.useState(false);
  *
  * const items = [
- *   { id: 'share', icon: <Icon name="share" />, label: 'Chia sẻ', onClick: () => console.log('Share') },
- *   { id: 'edit', icon: <Icon name="edit" />, label: 'Chỉnh sửa', onClick: () => console.log('Edit') },
- *   { id: 'delete', icon: <Icon name="delete" />, label: 'Xóa bớt', disabled: true, onClick: () => {} }
+ *   { id: 'share', icon: <Icon name="share" />, label: 'Share', onClick: () => console.log('Share') },
+ *   { id: 'edit', icon: <Icon name="edit" />, label: 'Edit', onClick: () => console.log('Edit') },
+ *   { id: 'delete', icon: <Icon name="delete" />, label: 'Delete', disabled: true, onClick: () => {} }
  * ];
  *
  * <FABMenu
  *   expanded={open}
  *   onToggle={setOpen}
- *   aria-label="Các công cụ thao tác nhanh"
+ *   aria-label="Quick actions"
  *   alignment="center"
  *   colorVariant="tertiary"
+
  *   items={items}
  * />
  * ```

package/dist/typography.css

@@ -16,6 +16,11 @@
  * Usage: Add this class to any element or the root element to apply
  * the MD3 Expressive typography defaults.
  */
+@utility font-md3-expressive {
+	font-family: "Google Sans Flex", system-ui, sans-serif;
+	font-variation-settings: "ROND" 100;
+}
+
 .font-md3-expressive {
 	font-family: "Google Sans Flex", system-ui, sans-serif;
 	font-variation-settings: "ROND" 100;

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@bug-on/m3-expressive",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Material Design 3 Expressive React components",
-  "author": "Bug Ổn",
+  "author": "Bug On",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -179,8 +179,8 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "tailwind-merge": "^3.3.1",
-    "@bug-on/m3-tailwind": "1.0.0",
-    "@bug-on/m3-tokens": "1.0.0"
+    "@bug-on/m3-tailwind": "1.1.0",
+    "@bug-on/m3-tokens": "1.1.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",