@fpkit/acss 6.3.0 → 6.4.0

package/libs/index.d.ts

@@ -2,8 +2,8 @@ import { ButtonProps } from './components/button.js';
 export { Button } from './components/button.js';
 import React$1, { ReactNode } from 'react';
 export { Card, Content as CardContent, Footer as CardFooter, CardProps, Title as CardTitle } from './components/card.js';
-import { I as IconProps } from './icons-2c09535c.js';
-export { a as Icon, b as IconProps } from './icons-2c09535c.js';
+import { I as IconProps } from './icons-48788561.js';
+export { a as Icon, b as IconProps } from './icons-48788561.js';
 export { default as Field, FieldProps } from './components/form/fields.js';
 export { default as Input } from './components/form/inputs.js';
 import { I as InputProps } from './form.types-d25ebfac.js';
@@ -41,11 +41,13 @@ type IconButtonProps = Omit<ButtonProps, "children"> & (WithAriaLabel | WithAria
     icon: React$1.ReactNode;
     /**
      * Optional text shown alongside the icon at desktop widths.
-     * Hidden visually below the `$icon-label-bp` SCSS breakpoint (default 48rem / 768px),
-     * but remains in the accessibility tree — screen readers always announce it.
+     * Visually hidden below the `$icon-label-bp` SCSS breakpoint (default 48rem / 768px)
+     * via a media query on `[data-icon-label]`, but always present in the accessibility
+     * tree — screen readers announce it at every viewport size.
      *
-     * NOTE: When `label` is used, the default `variant="icon"` removes padding.
-     * Override with a different variant (e.g. `variant="outline"`) for a padded layout.
+     * NOTE: When `label` is provided, the default `variant="icon"` removes padding.
+     * Use `variant="outline"` (or another padded variant) to restore layout padding
+     * alongside the label.
      */
     label?: string;
     /** Button type: button, submit, or reset. Required. */
@@ -54,15 +56,16 @@ type IconButtonProps = Omit<ButtonProps, "children"> & (WithAriaLabel | WithAria
 /**
  * Accessible icon button component. Wraps `Button` with:
  * - Required accessible label via `aria-label` or `aria-labelledby` (XOR enforced)
- * - Optional visible `label` text that hides on mobile (visual only — always in a11y tree)
+ * - Optional `label` text hidden on mobile (< 48rem), visible on desktop — always in a11y tree
  * - `variant="icon"` default (square, no padding)
+ * - Fixed `3rem × 3rem` tap target (48px at default root font size — WCAG 2.5.5 AAA)
  *
  * @example
  * // Icon only
  * <IconButton type="button" aria-label="Close menu" icon={<CloseIcon />} />
  *
  * @example
- * // Icon + label (label hides on mobile)
+ * // Icon + label (label hides on mobile, visible at >= 48rem / 768px)
  * <IconButton
  *   type="button"
  *   aria-label="Settings"