@almadar/ui 6.51.2 → 6.52.0

package/dist/ssr/index.d.cts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { EventKey, EventPayload, EventEmit, Asset, AssetUrl } from '@almadar/core';
+import { A11yProps, EventKey, EventPayload, EventEmit, Asset, AssetUrl } from '@almadar/core';
 import { LucideIcon } from 'lucide-react';
 
 /**
@@ -14,13 +14,11 @@ type BoxMargin = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "auto";
 type BoxBg = "transparent" | "primary" | "secondary" | "muted" | "accent" | "surface" | "overlay";
 type BoxRounded = "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "full";
 type BoxShadow = "none" | "sm" | "md" | "lg" | "xl";
-interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
+interface BoxProps extends Omit<React.HTMLAttributes<HTMLDivElement>, keyof A11yProps>, A11yProps {
     /** Additional CSS classes applied to the root element. */
     className?: string;
     /** Data-theme attribute applied to the root element for CSS theme scoping (e.g. almadar-website-dark). */
     'data-theme'?: string;
-    /** Text direction for this subtree: "ltr", "rtl" (Arabic/Hebrew content) or "auto" */
-    dir?: string;
     /**
      * Padding on all sides
      * @example md
@@ -92,7 +90,7 @@ type StackDirection = "horizontal" | "vertical";
 type StackGap = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
 type StackAlign = "start" | "center" | "end" | "stretch" | "baseline";
 type StackJustify = "start" | "center" | "end" | "between" | "around" | "evenly";
-interface StackProps extends React.AriaAttributes {
+interface StackProps extends Omit<React.AriaAttributes, keyof A11yProps>, A11yProps {
     /** Stack direction */
     direction?: StackDirection;
     /** Gap between children */
@@ -119,12 +117,8 @@ interface StackProps extends React.AriaAttributes {
     onClick?: (e: React.MouseEvent) => void;
     /** Keyboard handler */
     onKeyDown?: (e: React.KeyboardEvent) => void;
-    /** Role for accessibility */
-    role?: string;
     /** Element id */
     id?: string;
-    /** Tab index for focus management */
-    tabIndex?: number;
     /** Declarative event name — emits UI:{action} via eventBus on click */
     action?: EventKey;
     /** Payload to include with the action event
@@ -156,7 +150,7 @@ declare const HStack: React.FC<HStackProps>;
 type TypographyVariant = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "heading" | "subheading" | "body1" | "body2" | "body" | "caption" | "overline" | "small" | "large" | "label";
 /** `none` = no size override — the variant's baked size applies. */
 type TypographySize = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
-interface TypographyProps extends React.AriaAttributes {
+interface TypographyProps extends Omit<React.AriaAttributes, keyof A11yProps>, A11yProps {
     /** Typography variant */
     variant?: TypographyVariant;
     /** Heading level (1-6) - alternative to variant for headings */
@@ -181,8 +175,6 @@ interface TypographyProps extends React.AriaAttributes {
     className?: string;
     /** Inline style */
     style?: React.CSSProperties;
-    /** Accessibility role */
-    role?: string;
     /**
      * Value formatting applied to string/number/Date content — `none` (the
      * default) renders content as-is. Covers the raw-ISO-date class: a bound
@@ -198,7 +190,7 @@ declare const Typography: React.FC<TypographyProps>;
 
 type BadgeVariant = "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "error" | "info" | "neutral";
 type BadgeSize = "sm" | "md" | "lg";
-interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+interface BadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, keyof A11yProps>, A11yProps {
     /** Additional CSS classes applied to the root element. */
     className?: string;
     variant?: BadgeVariant;
@@ -273,7 +265,7 @@ type IconAnimation = 'spin' | 'pulse' | 'none';
  * icon prop as `React.ReactNode` (it collapses to a non-editable `node`).
  */
 type IconInput = LucideIcon | string;
-interface IconProps {
+interface IconProps extends A11yProps {
     /**
      * Lucide icon component (preferred for type-safe usage), OR a canonical
      * kebab-case icon name string — a string is treated exactly like `name` so
@@ -299,7 +291,8 @@ declare const Icon: React.FC<IconProps>;
 
 type ButtonVariant = "primary" | "secondary" | "ghost" | "danger" | "success" | "warning" | "default" | "link";
 type ButtonSize = "sm" | "md" | "lg";
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+/** @accessibleName label */
+interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof A11yProps>, A11yProps {
     /** Additional CSS classes applied to the root element. */
     className?: string;
     variant?: ButtonVariant;
@@ -341,7 +334,7 @@ type CardShadow = "none" | "sm" | "md" | "lg";
  * `variant` (which conveys role / state).
  */
 type CardLook = "elevated" | "flat-bordered" | "borderless-divider" | "ticket" | "invoice" | "chip" | "tile-image-first";
-interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, keyof A11yProps>, A11yProps {
     /** Additional CSS classes applied to the root element. */
     className?: string;
     variant?: "default" | "bordered" | "elevated" | "interactive";
@@ -371,7 +364,7 @@ declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttribu
 
 type DividerOrientation = "horizontal" | "vertical";
 type DividerVariant = "solid" | "dashed" | "dotted";
-interface DividerProps {
+interface DividerProps extends A11yProps {
     /**
      * Orientation of the divider
      * @default 'horizontal'
@@ -393,13 +386,7 @@ interface DividerProps {
 }
 declare const Divider: React.FC<DividerProps>;
 
-/**
- * Center Component
- *
- * A layout utility that centers its children horizontally and/or vertically.
- */
-
-interface CenterProps {
+interface CenterProps extends A11yProps {
     /** Center inline (width fits content) vs block (full width) */
     inline?: boolean;
     /** Center only horizontally */
@@ -434,7 +421,7 @@ declare const Center: React.FC<CenterProps>;
  */
 
 type SpacerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'auto';
-interface SpacerProps {
+interface SpacerProps extends A11yProps {
     /** Fixed size (auto = flex grow) */
     size?: SpacerSize;
     /** Orientation (for fixed sizes) */
@@ -451,15 +438,10 @@ interface SpacerProps {
  */
 declare const Spacer: React.FC<SpacerProps>;
 
-/**
- * Avatar Atom Component
- *
- * A versatile avatar component supporting images, initials, icons, and status indicators.
- */
-
 type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
 type AvatarStatus = "online" | "offline" | "away" | "busy";
-interface AvatarProps {
+/** @accessibleName alt name */
+interface AvatarProps extends A11yProps {
     /**
      * Image source URL
      */
@@ -516,7 +498,8 @@ declare const Avatar: React.FC<AvatarProps>;
 type ImageFit = 'cover' | 'contain' | 'fill' | 'none';
 type ImageAspect = 'auto' | '1/1' | '4/3' | '3/2' | '16/9' | '21/9';
 type ImageRounded = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
-interface ImageProps {
+/** @accessibleName alt */
+interface ImageProps extends A11yProps {
     /** Image source URL */
     src: AssetUrl;
     /** Alternative text; empty string marks the image decorative */
@@ -536,7 +519,7 @@ interface ImageProps {
 }
 declare const Image: React.FC<ImageProps>;
 
-interface SectionHeaderProps {
+interface SectionHeaderProps extends A11yProps {
     /** Section title text */
     title: string;
     /** Optional subtitle text */
@@ -563,7 +546,7 @@ declare const SectionHeader: React.FC<SectionHeaderProps>;
  *
  * @capabilities feature highlight, benefit callout, product capability card, feature-grid tile
  */
-interface FeatureCardProps {
+interface FeatureCardProps extends A11yProps {
     icon?: IconInput;
     /** Feature title */
     title: string;
@@ -589,7 +572,7 @@ declare const FeatureCard: React.FC<FeatureCardProps>;
  * Composes SimpleGrid and FeatureCard molecules.
  */
 
-interface FeatureGridProps {
+interface FeatureGridProps extends A11yProps {
     /** Array of feature card configurations */
     items: FeatureCardProps[];
     /** Number of grid columns */
@@ -609,7 +592,7 @@ declare const FeatureGrid: React.FC<FeatureGridProps>;
  */
 
 type SimpleGridGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-interface SimpleGridProps {
+interface SimpleGridProps extends A11yProps {
     /** Minimum width of each child (e.g., 200, "200px", "15rem") */
     minChildWidth?: number | string;
     /** Maximum number of columns */
@@ -622,6 +605,10 @@ interface SimpleGridProps {
     className?: string;
     /** Children elements */
     children: React.ReactNode;
+    /** Element id forwarded to the grid element. */
+    id?: string;
+    /** DOM attributes forwarded to the grid element (aria-*, data-*, role, id). */
+    [attr: `aria-${string}` | `data-${string}`]: string | number | boolean | undefined;
 }
 /**
  * SimpleGrid - Auto-responsive grid layout
@@ -637,7 +624,7 @@ declare const SimpleGrid: React.FC<SimpleGridProps>;
 
 type ContainerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
 type ContainerPadding = 'none' | 'sm' | 'md' | 'lg' | 'xl';
-interface ContainerProps {
+interface ContainerProps extends A11yProps {
     /** Maximum width */
     size?: ContainerSize;
     /** Alias for size (pattern compatibility) */
@@ -682,7 +669,7 @@ declare const Container: React.FC<ContainerProps>;
  */
 
 type PatternVariant = 'star8' | 'star6' | 'khatam' | 'star10' | 'star12' | 'rosette-double' | 'rosette-filled' | 'seigaiha' | 'greek-key' | 'celtic-knot' | 'kolam' | 'arch' | 'arabesque-vine' | 'arabesque-net';
-interface PatternTileProps {
+interface PatternTileProps extends A11yProps {
     /** Which geometric pattern to render */
     variant?: PatternVariant;
     /** Tile unit size in SVG units */
@@ -702,7 +689,7 @@ declare function getTileDimensions(variant: PatternVariant, size: number): {
 
 type RevealTrigger = 'scroll' | 'hover' | 'manual';
 type RevealAnimation = 'fade-up' | 'fade-down' | 'fade-in' | 'fade-left' | 'fade-right' | 'scale' | 'scale-up' | 'none';
-interface AnimatedRevealProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+interface AnimatedRevealProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | keyof A11yProps>, A11yProps {
     /** Additional CSS classes applied to the root element. */
     className?: string;
     /** What triggers the animation */
@@ -727,7 +714,8 @@ interface AnimatedRevealProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
 declare const AnimatedReveal: React.ForwardRefExoticComponent<AnimatedRevealProps & React.RefAttributes<HTMLDivElement>>;
 
 type GraphicAnimation = 'draw' | 'fill' | 'pulse' | 'morph';
-interface AnimatedGraphicProps extends React.HTMLAttributes<HTMLDivElement> {
+/** @accessibleName alt */
+interface AnimatedGraphicProps extends Omit<React.HTMLAttributes<HTMLDivElement>, keyof A11yProps>, A11yProps {
     /** Additional CSS classes applied to the root element. */
     className?: string;
     /** URL to an SVG file. Fetched and inlined to enable stroke/fill animations. */
@@ -766,7 +754,7 @@ declare const AnimatedGraphic: React.ForwardRefExoticComponent<AnimatedGraphicPr
  */
 
 type StatDisplayLook = 'elevated' | 'flat' | 'progress-backed' | 'gauge' | 'sparkline';
-interface StatDisplayProps {
+interface StatDisplayProps extends A11yProps {
     /** Display label (e.g., "Total", "Remaining") */
     label: string;
     /** Primary value (number or formatted string) */
@@ -821,7 +809,7 @@ declare const StatDisplay: React.FC<StatDisplayProps>;
  * Used between major sections for visual separation without hard background-color breaks.
  */
 
-interface GradientDividerProps {
+interface GradientDividerProps extends A11yProps {
     /** Semantic palette token or a raw CSS color value. Defaults to 'primary'. */
     color?: ColorToken | string;
     /** Additional class names */
@@ -836,7 +824,7 @@ declare const GradientDivider: React.FC<GradientDividerProps>;
  * later value changes. Optional label below the number.
  */
 
-interface AnimatedCounterProps {
+interface AnimatedCounterProps extends A11yProps {
     /** Target value. Strings may carry display affixes (e.g. "500+", "99.9%", "$1.2M"). */
     value: string | number;
     /** Label displayed below the number */

package/dist/ssr/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { EventKey, EventPayload, EventEmit, Asset, AssetUrl } from '@almadar/core';
+import { A11yProps, EventKey, EventPayload, EventEmit, Asset, AssetUrl } from '@almadar/core';
 import { LucideIcon } from 'lucide-react';
 
 /**
@@ -14,13 +14,11 @@ type BoxMargin = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "auto";
 type BoxBg = "transparent" | "primary" | "secondary" | "muted" | "accent" | "surface" | "overlay";
 type BoxRounded = "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "full";
 type BoxShadow = "none" | "sm" | "md" | "lg" | "xl";
-interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
+interface BoxProps extends Omit<React.HTMLAttributes<HTMLDivElement>, keyof A11yProps>, A11yProps {
     /** Additional CSS classes applied to the root element. */
     className?: string;
     /** Data-theme attribute applied to the root element for CSS theme scoping (e.g. almadar-website-dark). */
     'data-theme'?: string;
-    /** Text direction for this subtree: "ltr", "rtl" (Arabic/Hebrew content) or "auto" */
-    dir?: string;
     /**
      * Padding on all sides
      * @example md
@@ -92,7 +90,7 @@ type StackDirection = "horizontal" | "vertical";
 type StackGap = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
 type StackAlign = "start" | "center" | "end" | "stretch" | "baseline";
 type StackJustify = "start" | "center" | "end" | "between" | "around" | "evenly";
-interface StackProps extends React.AriaAttributes {
+interface StackProps extends Omit<React.AriaAttributes, keyof A11yProps>, A11yProps {
     /** Stack direction */
     direction?: StackDirection;
     /** Gap between children */
@@ -119,12 +117,8 @@ interface StackProps extends React.AriaAttributes {
     onClick?: (e: React.MouseEvent) => void;
     /** Keyboard handler */
     onKeyDown?: (e: React.KeyboardEvent) => void;
-    /** Role for accessibility */
-    role?: string;
     /** Element id */
     id?: string;
-    /** Tab index for focus management */
-    tabIndex?: number;
     /** Declarative event name — emits UI:{action} via eventBus on click */
     action?: EventKey;
     /** Payload to include with the action event
@@ -156,7 +150,7 @@ declare const HStack: React.FC<HStackProps>;
 type TypographyVariant = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "heading" | "subheading" | "body1" | "body2" | "body" | "caption" | "overline" | "small" | "large" | "label";
 /** `none` = no size override — the variant's baked size applies. */
 type TypographySize = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
-interface TypographyProps extends React.AriaAttributes {
+interface TypographyProps extends Omit<React.AriaAttributes, keyof A11yProps>, A11yProps {
     /** Typography variant */
     variant?: TypographyVariant;
     /** Heading level (1-6) - alternative to variant for headings */
@@ -181,8 +175,6 @@ interface TypographyProps extends React.AriaAttributes {
     className?: string;
     /** Inline style */
     style?: React.CSSProperties;
-    /** Accessibility role */
-    role?: string;
     /**
      * Value formatting applied to string/number/Date content — `none` (the
      * default) renders content as-is. Covers the raw-ISO-date class: a bound
@@ -198,7 +190,7 @@ declare const Typography: React.FC<TypographyProps>;
 
 type BadgeVariant = "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "error" | "info" | "neutral";
 type BadgeSize = "sm" | "md" | "lg";
-interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+interface BadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, keyof A11yProps>, A11yProps {
     /** Additional CSS classes applied to the root element. */
     className?: string;
     variant?: BadgeVariant;
@@ -273,7 +265,7 @@ type IconAnimation = 'spin' | 'pulse' | 'none';
  * icon prop as `React.ReactNode` (it collapses to a non-editable `node`).
  */
 type IconInput = LucideIcon | string;
-interface IconProps {
+interface IconProps extends A11yProps {
     /**
      * Lucide icon component (preferred for type-safe usage), OR a canonical
      * kebab-case icon name string — a string is treated exactly like `name` so
@@ -299,7 +291,8 @@ declare const Icon: React.FC<IconProps>;
 
 type ButtonVariant = "primary" | "secondary" | "ghost" | "danger" | "success" | "warning" | "default" | "link";
 type ButtonSize = "sm" | "md" | "lg";
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+/** @accessibleName label */
+interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof A11yProps>, A11yProps {
     /** Additional CSS classes applied to the root element. */
     className?: string;
     variant?: ButtonVariant;
@@ -341,7 +334,7 @@ type CardShadow = "none" | "sm" | "md" | "lg";
  * `variant` (which conveys role / state).
  */
 type CardLook = "elevated" | "flat-bordered" | "borderless-divider" | "ticket" | "invoice" | "chip" | "tile-image-first";
-interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, keyof A11yProps>, A11yProps {
     /** Additional CSS classes applied to the root element. */
     className?: string;
     variant?: "default" | "bordered" | "elevated" | "interactive";
@@ -371,7 +364,7 @@ declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttribu
 
 type DividerOrientation = "horizontal" | "vertical";
 type DividerVariant = "solid" | "dashed" | "dotted";
-interface DividerProps {
+interface DividerProps extends A11yProps {
     /**
      * Orientation of the divider
      * @default 'horizontal'
@@ -393,13 +386,7 @@ interface DividerProps {
 }
 declare const Divider: React.FC<DividerProps>;
 
-/**
- * Center Component
- *
- * A layout utility that centers its children horizontally and/or vertically.
- */
-
-interface CenterProps {
+interface CenterProps extends A11yProps {
     /** Center inline (width fits content) vs block (full width) */
     inline?: boolean;
     /** Center only horizontally */
@@ -434,7 +421,7 @@ declare const Center: React.FC<CenterProps>;
  */
 
 type SpacerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'auto';
-interface SpacerProps {
+interface SpacerProps extends A11yProps {
     /** Fixed size (auto = flex grow) */
     size?: SpacerSize;
     /** Orientation (for fixed sizes) */
@@ -451,15 +438,10 @@ interface SpacerProps {
  */
 declare const Spacer: React.FC<SpacerProps>;
 
-/**
- * Avatar Atom Component
- *
- * A versatile avatar component supporting images, initials, icons, and status indicators.
- */
-
 type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
 type AvatarStatus = "online" | "offline" | "away" | "busy";
-interface AvatarProps {
+/** @accessibleName alt name */
+interface AvatarProps extends A11yProps {
     /**
      * Image source URL
      */
@@ -516,7 +498,8 @@ declare const Avatar: React.FC<AvatarProps>;
 type ImageFit = 'cover' | 'contain' | 'fill' | 'none';
 type ImageAspect = 'auto' | '1/1' | '4/3' | '3/2' | '16/9' | '21/9';
 type ImageRounded = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
-interface ImageProps {
+/** @accessibleName alt */
+interface ImageProps extends A11yProps {
     /** Image source URL */
     src: AssetUrl;
     /** Alternative text; empty string marks the image decorative */
@@ -536,7 +519,7 @@ interface ImageProps {
 }
 declare const Image: React.FC<ImageProps>;
 
-interface SectionHeaderProps {
+interface SectionHeaderProps extends A11yProps {
     /** Section title text */
     title: string;
     /** Optional subtitle text */
@@ -563,7 +546,7 @@ declare const SectionHeader: React.FC<SectionHeaderProps>;
  *
  * @capabilities feature highlight, benefit callout, product capability card, feature-grid tile
  */
-interface FeatureCardProps {
+interface FeatureCardProps extends A11yProps {
     icon?: IconInput;
     /** Feature title */
     title: string;
@@ -589,7 +572,7 @@ declare const FeatureCard: React.FC<FeatureCardProps>;
  * Composes SimpleGrid and FeatureCard molecules.
  */
 
-interface FeatureGridProps {
+interface FeatureGridProps extends A11yProps {
     /** Array of feature card configurations */
     items: FeatureCardProps[];
     /** Number of grid columns */
@@ -609,7 +592,7 @@ declare const FeatureGrid: React.FC<FeatureGridProps>;
  */
 
 type SimpleGridGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-interface SimpleGridProps {
+interface SimpleGridProps extends A11yProps {
     /** Minimum width of each child (e.g., 200, "200px", "15rem") */
     minChildWidth?: number | string;
     /** Maximum number of columns */
@@ -622,6 +605,10 @@ interface SimpleGridProps {
     className?: string;
     /** Children elements */
     children: React.ReactNode;
+    /** Element id forwarded to the grid element. */
+    id?: string;
+    /** DOM attributes forwarded to the grid element (aria-*, data-*, role, id). */
+    [attr: `aria-${string}` | `data-${string}`]: string | number | boolean | undefined;
 }
 /**
  * SimpleGrid - Auto-responsive grid layout
@@ -637,7 +624,7 @@ declare const SimpleGrid: React.FC<SimpleGridProps>;
 
 type ContainerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
 type ContainerPadding = 'none' | 'sm' | 'md' | 'lg' | 'xl';
-interface ContainerProps {
+interface ContainerProps extends A11yProps {
     /** Maximum width */
     size?: ContainerSize;
     /** Alias for size (pattern compatibility) */
@@ -682,7 +669,7 @@ declare const Container: React.FC<ContainerProps>;
  */
 
 type PatternVariant = 'star8' | 'star6' | 'khatam' | 'star10' | 'star12' | 'rosette-double' | 'rosette-filled' | 'seigaiha' | 'greek-key' | 'celtic-knot' | 'kolam' | 'arch' | 'arabesque-vine' | 'arabesque-net';
-interface PatternTileProps {
+interface PatternTileProps extends A11yProps {
     /** Which geometric pattern to render */
     variant?: PatternVariant;
     /** Tile unit size in SVG units */
@@ -702,7 +689,7 @@ declare function getTileDimensions(variant: PatternVariant, size: number): {
 
 type RevealTrigger = 'scroll' | 'hover' | 'manual';
 type RevealAnimation = 'fade-up' | 'fade-down' | 'fade-in' | 'fade-left' | 'fade-right' | 'scale' | 'scale-up' | 'none';
-interface AnimatedRevealProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+interface AnimatedRevealProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | keyof A11yProps>, A11yProps {
     /** Additional CSS classes applied to the root element. */
     className?: string;
     /** What triggers the animation */
@@ -727,7 +714,8 @@ interface AnimatedRevealProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
 declare const AnimatedReveal: React.ForwardRefExoticComponent<AnimatedRevealProps & React.RefAttributes<HTMLDivElement>>;
 
 type GraphicAnimation = 'draw' | 'fill' | 'pulse' | 'morph';
-interface AnimatedGraphicProps extends React.HTMLAttributes<HTMLDivElement> {
+/** @accessibleName alt */
+interface AnimatedGraphicProps extends Omit<React.HTMLAttributes<HTMLDivElement>, keyof A11yProps>, A11yProps {
     /** Additional CSS classes applied to the root element. */
     className?: string;
     /** URL to an SVG file. Fetched and inlined to enable stroke/fill animations. */
@@ -766,7 +754,7 @@ declare const AnimatedGraphic: React.ForwardRefExoticComponent<AnimatedGraphicPr
  */
 
 type StatDisplayLook = 'elevated' | 'flat' | 'progress-backed' | 'gauge' | 'sparkline';
-interface StatDisplayProps {
+interface StatDisplayProps extends A11yProps {
     /** Display label (e.g., "Total", "Remaining") */
     label: string;
     /** Primary value (number or formatted string) */
@@ -821,7 +809,7 @@ declare const StatDisplay: React.FC<StatDisplayProps>;
  * Used between major sections for visual separation without hard background-color breaks.
  */
 
-interface GradientDividerProps {
+interface GradientDividerProps extends A11yProps {
     /** Semantic palette token or a raw CSS color value. Defaults to 'primary'. */
     color?: ColorToken | string;
     /** Additional class names */
@@ -836,7 +824,7 @@ declare const GradientDivider: React.FC<GradientDividerProps>;
  * later value changes. Optional label below the number.
  */
 
-interface AnimatedCounterProps {
+interface AnimatedCounterProps extends A11yProps {
     /** Target value. Strings may carry display affixes (e.g. "500+", "99.9%", "$1.2M"). */
     value: string | number;
     /** Label displayed below the number */