diff --git a/bulma-ui/src/elements/Block.tsx b/bulma-ui/src/elements/Block.tsx
index eef617df3..705e5d2a1 100644
--- a/bulma-ui/src/elements/Block.tsx
+++ b/bulma-ui/src/elements/Block.tsx
@@ -8,29 +8,25 @@ import {
 
 /**
  * Props for the Block component.
- *
- * @property {string} [className] - Additional CSS classes to apply.
- * @property {(typeof validColors)[number] | 'inherit' | 'current'} [textColor] - Text color (Bulma color, 'inherit', or 'current').
- * @property {'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'} [color] - Bulma color modifier for the block.
- * @property {(typeof validColors)[number] | 'inherit' | 'current'} [bgColor] - Background color (Bulma color, 'inherit', or 'current').
- * @property {React.ReactNode} [children] - Content to be rendered inside the block.
  */
 export interface BlockProps
   extends
     React.HTMLAttributes<HTMLDivElement>,
     Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+  /** Additional CSS classes to apply. */
   className?: string;
+  /** Text color helper. */
   textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+  /** Bulma color modifier for the block. */
   color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
+  /** Background color helper. */
   bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+  /** Content to render inside the block. */
   children?: React.ReactNode;
 }
 
 /**
- * Block component for rendering a styled Bulma block element.
- *
- * A block is a simple utility element that adds spacing (margin-bottom) between elements.
- * Supports Bulma helper classes for additional styling like text color, background color, and layout.
+ * The `Block` component renders a simple container with Bulma's `.block` class, adding vertical margin between sections of content.
  *
  * @function
  * @param {BlockProps} props - Props for the Block component.
diff --git a/bulma-ui/src/elements/Box.tsx b/bulma-ui/src/elements/Box.tsx
index 085c697ec..9974dd9ad 100644
--- a/bulma-ui/src/elements/Box.tsx
+++ b/bulma-ui/src/elements/Box.tsx
@@ -8,31 +8,28 @@ import {
 
 /**
  * Props for the Box component.
- *
- * @property {string} [className] - Additional CSS classes to apply.
- * @property {(typeof validColors)[number] | 'inherit' | 'current'} [textColor] - Text color (Bulma color, 'inherit', or 'current').
- * @property {'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'} [color] - Bulma color modifier for the box.
- * @property {(typeof validColors)[number] | 'inherit' | 'current'} [bgColor] - Background color (Bulma color, 'inherit', or 'current').
- * @property {boolean} [hasShadow=true] - Whether the box has a shadow (default: true).
- * @property {React.ReactNode} [children] - Content to be rendered inside the box.
  */
 export interface BoxProps
   /** @ignore */
   extends
     React.HTMLAttributes<HTMLDivElement>,
     Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+  /** Additional CSS classes to apply. */
   className?: string;
+  /** Text color helper. */
   textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+  /** Bulma color modifier for the box. */
   color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
+  /** Background color helper. */
   bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+  /** Whether the box has a shadow (default: true). */
   hasShadow?: boolean;
+  /** Content to render inside the box. */
   children?: React.ReactNode;
 }
 
 /**
- * Box component for rendering a styled Bulma box element.
- *
- * Supports Bulma helper classes for styling and layout, with optional shadow control.
+ * The `Box` component renders a bordered, padded container with an optional shadow using Bulma's `.box` class.
  *
  * @function
  * @param {BoxProps} props - Props for the Box component.
diff --git a/bulma-ui/src/elements/Button.tsx b/bulma-ui/src/elements/Button.tsx
index 53f356ee4..0a376908d 100644
--- a/bulma-ui/src/elements/Button.tsx
+++ b/bulma-ui/src/elements/Button.tsx
@@ -8,34 +8,12 @@ import {
 
 /**
  * Props for the Button component.
- *
- * @property {'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger' | 'white' | 'light' | 'dark' | 'black' | 'text' | 'ghost'} [color] - Bulma color modifier for the button.
- * @property {'small' | 'normal' | 'medium' | 'large'} [size] - Button size.
- * @property {boolean} [isLight] - Use the light version of the color.
- * @property {boolean} [isRounded] - Button is fully rounded.
- * @property {boolean} [isLoading] - Button shows a loading spinner.
- * @property {boolean} [isStatic] - Button is static and non-interactive.
- * @property {boolean} [isFullWidth] - Button takes the full width of parent.
- * @property {boolean} [isOutlined] - Use outlined button style.
- * @property {boolean} [isInverted] - Use inverted color style.
- * @property {boolean} [isFocused] - Button is styled as focused.
- * @property {boolean} [isActive] - Button is styled as active.
- * @property {boolean} [isHovered] - Button is styled as hovered.
- * @property {boolean} [isDisabled] - Button is disabled.
- * @property {string} [className] - Additional CSS classes to apply.
- * @property {(typeof validColors)[number] | 'inherit' | 'current'} [textColor] - Text color (Bulma color, 'inherit', or 'current').
- * @property {(typeof validColors)[number] | 'inherit' | 'current'} [bgColor] - Background color (Bulma color, 'inherit', or 'current').
- * @property {React.ElementType} [as] - Render as a `<button>`, `<a>`, or a custom component (e.g. a router `Link`). Defaults to `'button'`; anything else (including `'a'`) uses anchor-style prop handling.
- * @property {string} [href] - Specifies the URL for anchor buttons.
- * @property {React.MouseEventHandler<HTMLButtonElement> | React.MouseEventHandler<HTMLAnchorElement>} [onClick] - Click handler for the button or anchor.
- * @property {string} [target] - Target for anchor element.
- * @property {string} [rel] - Rel attribute for anchor element.
- * @property {React.ReactNode} [children] - Content to be rendered inside the button.
  */
 export interface ButtonProps
   extends
     Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'onClick'>,
     Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'> {
+  /** Bulma color variant for the button. `ghost` renders a link-like button; `text` renders a minimal text-only button. */
   color?:
     | 'primary'
     | 'link'
@@ -49,42 +27,62 @@ export interface ButtonProps
     | 'black'
     | 'text'
     | 'ghost';
+  /** Size of the button. */
   size?: 'small' | 'normal' | 'medium' | 'large';
+  /** Applies a lighter color variant. */
   isLight?: boolean;
+  /** Makes the button rounded. */
   isRounded?: boolean;
+  /** Displays a loading spinner. */
   isLoading?: boolean;
+  /** Makes the button non-interactive. */
   isStatic?: boolean;
+  /** Makes the button full-width. */
   isFullWidth?: boolean;
+  /** Applies outlined styling (requires color). */
   isOutlined?: boolean;
+  /** Applies inverted styling (requires color). */
   isInverted?: boolean;
+  /** Applies focused styling (visual only). */
   isFocused?: boolean;
+  /** Applies active styling (visual only). */
   isActive?: boolean;
+  /** Applies hovered styling (visual only). */
   isHovered?: boolean;
+  /** Applies disabled styling. */
   isDisabled?: boolean;
+  /** Custom class name. */
   className?: string;
+  /** Text color helper. */
   textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+  /** Background color helper. */
   bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+  /** Render as a `<button>`, `<a>`, or a custom component (e.g. a router `Link`). Defaults to `'button'`; anything else (including `'a'`) uses anchor-style prop handling. */
   as?: React.ElementType;
+  /** Href value (if rendering as `<a>`). */
   href?: string;
+  /** Click event handler. */
   onClick?:
     | React.MouseEventHandler<HTMLButtonElement>
     | React.MouseEventHandler<HTMLAnchorElement>;
+  /** Anchor tag target. */
   target?: string;
+  /** Anchor tag rel. */
   rel?: string;
+  /** Button content. */
   children?: React.ReactNode;
 }
 
+const validButtonColors = [...validColors, 'text', 'ghost'] as const;
+
 /**
- * Button component for rendering a Bulma-styled button or anchor.
- *
- * Supports Bulma helper classes for colors, sizes, and various button states and modifiers.
+ * The `Button` component provides a flexible and highly customizable button for your Bulma React UI.
  *
  * @function
  * @param {ButtonProps} props - Props for the Button component.
  * @returns {JSX.Element} The rendered button or anchor element.
  * @see {@link https://bulma.io/documentation/elements/button/ | Bulma Button documentation}
  */
-const validButtonColors = [...validColors, 'text', 'ghost'] as const;
 
 export const Button: React.FC<ButtonProps> = ({
   color,
diff --git a/bulma-ui/src/elements/Buttons.tsx b/bulma-ui/src/elements/Buttons.tsx
index 0b1b796f1..2229be9ed 100644
--- a/bulma-ui/src/elements/Buttons.tsx
+++ b/bulma-ui/src/elements/Buttons.tsx
@@ -11,32 +11,29 @@ import {
 
 /**
  * Props for the Buttons component.
- *
- * @property {string} [className] - Additional CSS classes to apply.
- * @property {(typeof validColors)[number] | 'inherit' | 'current'} [textColor] - Text color (Bulma color, 'inherit', or 'current').
- * @property {'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'} [color] - Bulma color modifier for the buttons group.
- * @property {(typeof validColors)[number] | 'inherit' | 'current'} [bgColor] - Background color (Bulma color, 'inherit', or 'current').
- * @property {boolean} [isCentered] - Center the group of buttons.
- * @property {boolean} [isRight] - Align the group of buttons to the right.
- * @property {boolean} [hasAddons] - Group buttons together as addons.
- * @property {React.ReactNode} children - The button elements to render inside the group.
  */
 interface ButtonsProps
   extends React.HTMLAttributes<HTMLDivElement>, BulmaClassesProps {
+  /** Additional CSS classes to apply. */
   className?: string;
+  /** Text color helper for the button group. */
   textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+  /** Bulma color modifier for the button group. */
   color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
+  /** Background color helper for the button group. */
   bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+  /** Center the group of buttons. */
   isCentered?: boolean;
+  /** Align the group of buttons to the right. */
   isRight?: boolean;
+  /** Group buttons together as addons (removes spacing between them). */
   hasAddons?: boolean;
+  /** The button elements to render inside the group. */
   children: React.ReactNode;
 }
 
 /**
- * Buttons component for rendering a group of Bulma-styled buttons.
- *
- * Supports Bulma helper classes for styling, color, and layout, including centering, right alignment, and grouping as addons.
+ * The `Buttons` component lets you group multiple `Button` elements together with Bulma's spacing, alignment, and add-on features.
  *
  * @function
  * @param {ButtonsProps} props - Props for the Buttons component.
diff --git a/bulma-ui/src/elements/Code.tsx b/bulma-ui/src/elements/Code.tsx
index eaa547f07..32cdc3d38 100644
--- a/bulma-ui/src/elements/Code.tsx
+++ b/bulma-ui/src/elements/Code.tsx
@@ -8,28 +8,23 @@ import {
 
 /**
  * Props for the Code component.
- *
- * @property {string} [className] - Additional CSS classes to apply.
- * @property {(typeof validColors)[number] | 'inherit' | 'current'} [textColor] - Text color (Bulma color, 'inherit', or 'current').
- * @property {(typeof validColors)[number] | 'inherit' | 'current'} [bgColor] - Background color (Bulma color, 'inherit', or 'current').
- * @property {React.ReactNode} [children] - Code content to be rendered inside the element.
  */
 export interface CodeProps
   extends
     React.HTMLAttributes<HTMLElement>,
     Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+  /** Additional CSS classes to apply. */
   className?: string;
+  /** Text color helper. */
   textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+  /** Background color helper. */
   bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+  /** Code content to render inside the element. */
   children?: React.ReactNode;
 }
 
 /**
- * Code component for rendering inline code snippets.
- *
- * A Code wraps the HTML `<code>` element with Bulma helper class integration.
- * Use it for short inline code snippets, variable names, or technical terms.
- * For multi-line code blocks, use the Pre component.
+ * The `Code` component renders a styled `<code>` element with Bulma helper class integration.
  *
  * @function
  * @param {CodeProps} props - Props for the Code component.
diff --git a/bulma-ui/src/elements/Content.tsx b/bulma-ui/src/elements/Content.tsx
index 23c3292b5..785f609c3 100644
--- a/bulma-ui/src/elements/Content.tsx
+++ b/bulma-ui/src/elements/Content.tsx
@@ -8,23 +8,22 @@ import {
 
 /**
  * Props for the Content component.
- *
- * @property {string} [className] - Additional CSS classes to apply.
- * @property {(typeof validColors)[number] | 'inherit' | 'current'} [textColor] - Text color (Bulma color, 'inherit', or 'current').
- * @property {'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'} [color] - Bulma color modifier for the content.
- * @property {(typeof validColors)[number] | 'inherit' | 'current'} [bgColor] - Background color (Bulma color, 'inherit', or 'current').
- * @property {'small' | 'normal' | 'medium' | 'large'} [size] - Size modifier for the content.
- * @property {React.ReactNode} [children] - Content to be rendered inside the block.
  */
 interface ContentProps
   extends
     React.HTMLAttributes<HTMLDivElement>,
     Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+  /** Additional CSS classes to apply. */
   className?: string;
+  /** Text color helper (e.g., `'danger'` for `has-text-danger`). */
   textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+  /** Bulma color modifier for the content. */
   color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
+  /** Background color helper (e.g., `'info'` for `has-background-info`). */
   bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+  /** Size modifier for the content. */
   size?: 'small' | 'normal' | 'medium' | 'large';
+  /** Content to be rendered inside the block. */
   children?: React.ReactNode;
 }
 
@@ -32,10 +31,7 @@ interface ContentProps
 const validSizes = ['small', 'medium', 'large'] as const;
 
 /**
- * Content component for rendering a styled Bulma content block.
- *
- * Applies typographic styles to HTML content (e.g., paragraphs, headings, lists) with Bulma's content class.
- * Supports size modifiers and Bulma helper classes for additional styling.
+ * The `Content` component applies Bulma’s typographic styles to its children, enhancing the appearance of HTML elements like paragraphs, headings, lists, and tables.
  *
  * @function
  * @param {ContentProps} props - Props for the Content component.
diff --git a/bulma-ui/src/elements/Delete.tsx b/bulma-ui/src/elements/Delete.tsx
index a19dc791e..cba4c5d83 100644
--- a/bulma-ui/src/elements/Delete.tsx
+++ b/bulma-ui/src/elements/Delete.tsx
@@ -8,32 +8,29 @@ import {
 
 /**
  * Props for the Delete component.
- *
- * @property {string} [className] - Additional CSS classes to apply.
- * @property {(typeof validColors)[number] | 'inherit' | 'current'} [textColor] - Text color (Bulma color, 'inherit', or 'current').
- * @property {'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'} [color] - Bulma color modifier for the delete button.
- * @property {(typeof validColors)[number] | 'inherit' | 'current'} [bgColor] - Background color (Bulma color, 'inherit', or 'current').
- * @property {(event: React.MouseEvent<HTMLButtonElement>) => void} [onClick] - Click handler for the button.
- * @property {'small' | 'medium' | 'large'} [size] - Size modifier for the delete button.
- * @property {string} [ariaLabel='Close'] - ARIA label for accessibility (default: 'Close').
- * @property {boolean} [disabled=false] - Whether the button is disabled (default: false).
  */
 interface DeleteProps
   extends React.HTMLAttributes<HTMLButtonElement>, BulmaClassesProps {
+  /** Additional CSS classes to apply. */
   className?: string;
+  /** Text color helper. */
   textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+  /** Bulma color modifier for the button. */
   color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
+  /** Background color helper. */
   bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+  /** Click handler for the button. */
   onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  /** Size modifier for the delete button. */
   size?: 'small' | 'medium' | 'large';
+  /** ARIA label for accessibility (default: 'Close'). */
   ariaLabel?: string;
+  /** Whether the button is disabled (default: false). */
   disabled?: boolean;
 }
 
 /**
- * Delete component for rendering a Bulma-styled delete/close button.
- *
- * Supports Bulma helper classes for styling, color, and size, and includes accessibility and disabled state.
+ * The `Delete` component provides a Bulma-styled close/delete button for dismissing modals, notifications, tags, messages, and more.
  *
  * @function
  * @param {DeleteProps} props - Props for the Delete component.
diff --git a/bulma-ui/src/elements/Divider.tsx b/bulma-ui/src/elements/Divider.tsx
index 0206b09e6..f668457cb 100644
--- a/bulma-ui/src/elements/Divider.tsx
+++ b/bulma-ui/src/elements/Divider.tsx
@@ -8,23 +8,19 @@ import {
 
 /**
  * Props for the Divider component.
- *
- * @property {string} [className] - Additional CSS classes to apply.
- * @property {(typeof validColors)[number] | 'inherit' | 'current'} [bgColor] - Background color (Bulma color, 'inherit', or 'current').
  */
 export interface DividerProps
   extends
     React.HTMLAttributes<HTMLHRElement>,
     Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+  /** Additional CSS classes to apply. */
   className?: string;
+  /** Background color helper. */
   bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
 }
 
 /**
- * Divider component for rendering a styled horizontal rule element.
- *
- * A Divider wraps the HTML `<hr>` element with Bulma helper class integration.
- * Use it to visually separate content sections with a horizontal line.
+ * The `Divider` component renders a styled horizontal rule (`<hr>`) element with Bulma helper class integration.
  *
  * @function
  * @param {DividerProps} props - Props for the Divider component.
diff --git a/bulma-ui/src/elements/Emphasis.tsx b/bulma-ui/src/elements/Emphasis.tsx
index e7f0b15df..011975010 100644
--- a/bulma-ui/src/elements/Emphasis.tsx
+++ b/bulma-ui/src/elements/Emphasis.tsx
@@ -8,28 +8,23 @@ import {
 
 /**
  * Props for the Emphasis component.
- *
- * @property {string} [className] - Additional CSS classes to apply.
- * @property {(typeof validColors)[number] | 'inherit' | 'current'} [textColor] - Text color (Bulma color, 'inherit', or 'current').
- * @property {(typeof validColors)[number] | 'inherit' | 'current'} [bgColor] - Background color (Bulma color, 'inherit', or 'current').
- * @property {React.ReactNode} [children] - Content to be rendered inside the em element.
  */
 export interface EmphasisProps
   extends
     React.HTMLAttributes<HTMLElement>,
     Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+  /** Additional CSS classes to apply. */
   className?: string;
+  /** Text color helper. */
   textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+  /** Background color helper. */
   bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+  /** Content to render inside the em element. */
   children?: React.ReactNode;
 }
 
 /**
- * Emphasis component for rendering semantically emphasized italic text.
- *
- * An Emphasis wraps the HTML `<em>` element with Bulma helper class integration.
- * Use it for text that has stress emphasis, affecting the meaning of the sentence.
- * For visual-only italic styling without semantic meaning, use CSS font-style: italic.
+ * The `Emphasis` component renders a styled `<em>` element with Bulma helper class integration.
  *
  * @function
  * @param {EmphasisProps} props - Props for the Emphasis component.
diff --git a/bulma-ui/src/elements/Figure.tsx b/bulma-ui/src/elements/Figure.tsx
index 8005d33b3..5e0c4e8c0 100644
--- a/bulma-ui/src/elements/Figure.tsx
+++ b/bulma-ui/src/elements/Figure.tsx
@@ -9,19 +9,18 @@ import {
 
 /**
  * Props for the FigureCaption component.
- *
- * @property {string} [className] - Additional CSS classes to apply.
- * @property {(typeof validColors)[number] | 'inherit' | 'current'} [textColor] - Text color (Bulma color, 'inherit', or 'current').
- * @property {(typeof validColors)[number] | 'inherit' | 'current'} [bgColor] - Background color (Bulma color, 'inherit', or 'current').
- * @property {React.ReactNode} [children] - Content to be rendered inside the figcaption.
  */
 export interface FigureCaptionProps
   extends
     React.HTMLAttributes<HTMLElement>,
     Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+  /** Additional CSS classes to apply. */
   className?: string;
+  /** Text color (Bulma color, 'inherit', or 'current'). */
   textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+  /** Background color (Bulma color, 'inherit', or 'current'). */
   bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+  /** Content to be rendered inside the figcaption. */
   children?: React.ReactNode;
 }
 
@@ -64,28 +63,23 @@ const FigureCaption: React.FC<FigureCaptionProps> = ({
 
 /**
  * Props for the Figure component.
- *
- * @property {string} [className] - Additional CSS classes to apply.
- * @property {(typeof validColors)[number] | 'inherit' | 'current'} [textColor] - Text color (Bulma color, 'inherit', or 'current').
- * @property {(typeof validColors)[number] | 'inherit' | 'current'} [bgColor] - Background color (Bulma color, 'inherit', or 'current').
- * @property {React.ReactNode} [children] - Content to be rendered inside the figure.
  */
 export interface FigureProps
   extends
     React.HTMLAttributes<HTMLElement>,
     Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+  /** Additional CSS classes to apply. */
   className?: string;
+  /** Text color helper. */
   textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+  /** Background color helper. */
   bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+  /** Content to render inside the figure. */
   children?: React.ReactNode;
 }
 
 /**
- * Figure component for rendering a styled figure element.
- *
- * A Figure wraps the HTML `<figure>` element with Bulma helper class integration.
- * Use it to group self-contained content like images, illustrations, diagrams, or code snippets
- * with an optional caption via Figure.Caption.
+ * The `Figure` component renders a styled `<figure>` element with Bulma helper class integration.
  *
  * @function
  * @param {FigureProps} props - Props for the Figure component.
diff --git a/bulma-ui/src/elements/Icon.tsx b/bulma-ui/src/elements/Icon.tsx
index c1c907f47..0e4ce30ce 100644
--- a/bulma-ui/src/elements/Icon.tsx
+++ b/bulma-ui/src/elements/Icon.tsx
@@ -36,37 +36,39 @@ type IconLibrary = 'fa' | 'mdi' | 'ion' | 'material-icons' | 'material-symbols';
 
 /**
  * Props for the Icon component.
- *
- * @property {string} [className] - Additional CSS classes to apply.
- * @property {(typeof validColors)[number] | 'inherit' | 'current'} [textColor] - Text color (Bulma color, 'inherit', or 'current').
- * @property {'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'} [color] - Bulma color modifier for the icon.
- * @property {(typeof validColors)[number] | 'inherit' | 'current'} [bgColor] - Background color (Bulma color, 'inherit', or 'current').
- * @property {string} name - The icon name (without library prefix).
- * @property {IconLibrary} [library] - The icon library to use ('fa' = Font Awesome, 'mdi' = Material Design Icons, 'ion' = Ionicons Web Components, 'material-icons' = Google Material Icons, 'material-symbols' = Google Material Symbols). Defaults to the value set in ConfigProvider or 'fa' if not configured.
- * @property {string} [variant] - Icon style variant. For Font Awesome: 'solid', 'regular', 'brands', etc. For Material Icons: 'filled', 'outlined', 'round', 'sharp'. For Material Symbols: 'outlined', 'rounded', 'sharp'. For Ionicons: 'outline', 'sharp'.
- * @property {string | string[]} [features] - Additional library-specific modifiers. For Font Awesome: 'fa-lg', 'fa-spin', etc. For others: size classes like 'is-size-1', etc.
- * @property {string | string[]} [libraryFeatures] - DEPRECATED: Use 'variant' and 'features' instead. Additional library-specific classes.
- * @property {'small' | 'medium' | 'large'} [size] - Size modifier for the icon.
- * @property {string} [ariaLabel='icon'] - ARIA label for accessibility (default: 'icon').
- * @property {object} [style] - Inline style object.
- * @property {string} [icon] - DEPRECATED: Legacy prop, use `name` instead.
- * @property {string} [containerClassName] - Override the default 'icon' container class (e.g., 'panel-icon').
  */
 export interface IconProps
   extends React.HTMLAttributes<HTMLSpanElement>, BulmaClassesProps {
+  /** Additional CSS classes to apply. */
   className?: string;
+  /** Text color helper. */
   textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+  /** Bulma color modifier for the icon. */
   color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
+  /** Background color helper. */
   bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+  /** The icon name, with or without its library prefix (e.g. `'star'` or `'fa-star'`). */
   name: string; // e.g., 'star', 'account', 'home-outline'
+  /** DEPRECATED: Legacy prop, use `name` instead. */
   icon?: string; // DEPRECATED: legacy prop that should not be used
+  /**
+   * The icon library to use ('fa' = Font Awesome, 'mdi' = Material Design Icons, 'ion' = Ionicons Web Components, 'material-icons' = Google Material Icons, 'material-symbols' = Google Material Symbols). Defaults to the value set in ConfigProvider or 'fa' if not configured.
+   * @defaultValue 'fa'
+   */
   library?: IconLibrary; // defaults to ConfigProvider iconLibrary or 'fa'
+  /** Icon style variant (e.g. `'solid'`, `'outlined'`, `'rounded'`). */
   variant?: string; // e.g., 'solid', 'outlined', 'rounded', 'sharp'
+  /** Additional modifiers (e.g. `'fa-lg'`, `'fa-spin'`, `'is-size-1'`). */
   features?: string | string[]; // e.g., 'fa-lg', 'fa-spin', 'is-size-1'
+  /** **DEPRECATED:** Use `variant` and `features` instead. */
   libraryFeatures?: string | string[]; // DEPRECATED: backward compatibility
+  /** Size modifier for the icon container. */
   size?: 'small' | 'medium' | 'large';
+  /** ARIA label for accessibility (default: 'icon'). */
   ariaLabel?: string;
+  /** Inline style object. */
   style?: React.CSSProperties;
+  /** Override the default `'icon'` container class (e.g., `'panel-icon'`). */
   containerClassName?: string; // Override the default 'icon' container class (e.g., 'panel-icon')
 }
 
@@ -173,9 +175,7 @@ function getIconClasses(
 }
 
 /**
- * Icon component for rendering a Bulma-styled icon container.
- *
- * Supports Bulma helper classes for styling, color, and size, and renders an <i></i> element for the icon itself.
+ * The `Icon` component is a Bulma-styled wrapper for displaying icons from various libraries (Font Awesome, Material Design Icons, Ionicons, Google Material Icons, Material Symbols, etc.).
  *
  * @function
  * @param {IconProps} props - Props for the Icon component.
diff --git a/bulma-ui/src/elements/IconText.tsx b/bulma-ui/src/elements/IconText.tsx
index b67b57f40..7038dfbeb 100644
--- a/bulma-ui/src/elements/IconText.tsx
+++ b/bulma-ui/src/elements/IconText.tsx
@@ -10,41 +10,37 @@ import { Icon, IconProps } from './Icon';
 
 /**
  * Represents an item for the IconText component, containing icon props and optional text.
- *
- * @property {IconProps} iconProps - Props for the Icon component.
- * @property {string} [text] - Optional text to display next to the icon.
  */
 interface IconTextItem {
+  /** Props for the Icon component. */
   iconProps: IconProps;
+  /** Optional text to display next to the icon. */
   text?: string;
 }
 
 /**
  * Props for the IconText component.
- *
- * @property {string} [className] - Additional CSS classes to apply.
- * @property {(typeof validColors)[number] | 'inherit' | 'current'} [textColor] - Text color (Bulma color, 'inherit', or 'current').
- * @property {'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'} [color] - Bulma color modifier for the icon text.
- * @property {(typeof validColors)[number] | 'inherit' | 'current'} [bgColor] - Background color (Bulma color, 'inherit', or 'current').
- * @property {IconProps} [iconProps] - Props for a single Icon component.
- * @property {React.ReactNode} [children] - Text for a single icon.
- * @property {IconTextItem[]} [items] - Array of icon/text pairs for multiple icons.
  */
 interface IconTextProps
   extends React.HTMLAttributes<HTMLSpanElement>, BulmaClassesProps {
+  /** Additional CSS classes to apply. */
   className?: string;
+  /** Text color helper. */
   textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+  /** Bulma color modifier for the icon text group. */
   color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
+  /** Background color helper. */
   bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+  /** Props for a single Icon component (for single icon mode). */
   iconProps?: IconProps; // For single icon
+  /** Text for a single icon (for single icon mode). */
   children?: React.ReactNode; // Text for single icon
+  /** Array of icon/text pairs (for multiple icons mode). */
   items?: IconTextItem[]; // For multiple icons
 }
 
 /**
- * IconText component for rendering one or more icons with optional text, styled with Bulma.
- *
- * Supports Bulma helper classes for styling, color, and layout. Can render a single icon with text or multiple icon/text pairs.
+ * The `IconText` component provides a Bulma-styled horizontal arrangement of one or more `Icon` components and optional text.
  *
  * @function
  * @param {IconTextProps} props - Props for the IconText component.
diff --git a/bulma-ui/src/elements/Image.tsx b/bulma-ui/src/elements/Image.tsx
index b89d0ed5b..b600eee2e 100644
--- a/bulma-ui/src/elements/Image.tsx
+++ b/bulma-ui/src/elements/Image.tsx
@@ -8,27 +8,20 @@ import {
 
 /**
  * Props for the Image component.
- *
- * @property {string} [className] - Additional CSS classes to apply.
- * @property {(typeof validColors)[number] | 'inherit' | 'current'} [textColor] - Text color (Bulma color, 'inherit', or 'current').
- * @property {'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'} [color] - Bulma color modifier for the image container.
- * @property {(typeof validColors)[number] | 'inherit' | 'current'} [bgColor] - Background color (Bulma color, 'inherit', or 'current').
- * @property {string} [size] - Size or aspect ratio modifier (e.g., '128x128', '16by9', etc.).
- * @property {boolean} [isRounded] - Whether the image should have rounded corners.
- * @property {boolean} [isRetina] - Whether to use retina (2x) image source.
- * @property {string} [src] - Image source URL.
- * @property {string} [alt] - Alternate text for the image.
- * @property {React.ReactNode} [children] - Arbitrary children (e.g., iframe or custom content).
- * @property {'figure' | 'div' | 'p'} [as] - The tag to render. Defaults to 'figure', but can be 'p', 'div', etc.
  */
 export interface ImageProps
   extends
     React.HTMLAttributes<HTMLElement>,
     Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+  /** Additional CSS classes to apply. */
   className?: string;
+  /** Text color helper for the container. */
   textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+  /** Bulma color modifier for the image container. */
   color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
+  /** Background color helper for the container. */
   bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+  /** Fixed size or aspect ratio modifier for the image container. */
   size?:
     | '16x16'
     | '24x24'
@@ -53,20 +46,22 @@ export interface ImageProps
     | '9by16'
     | '1by2'
     | '1by3';
+  /** Renders the image with rounded corners. */
   isRounded?: boolean;
+  /** Uses retina (2x) image source. */
   isRetina?: boolean;
+  /** Image source URL. */
   src?: string;
+  /** Alternate text for the image. */
   alt?: string;
+  /** Arbitrary content (e.g., iframe, custom HTML) inside the image container. */
   children?: React.ReactNode;
+  /** Container element tag. Defaults to `'figure'` when using aspect-ratio sizes, `'div'` otherwise. */
   as?: 'figure' | 'div' | 'p';
 }
 
 /**
- * Image component for rendering a styled Bulma image element.
- *
- * Supports fixed-size containers, aspect ratios, rounded images, retina images, and arbitrary children (e.g., iframe).
- *
- * The "as" prop allows rendering as "figure", "p", or "div" tags etc.
+ * The `Image` component wraps images, iframes, or custom content in a Bulma-styled container, supporting fixed sizes, aspect ratios, rounded corners, retina images, and all Bulma helper props for color and spacing.
  *
  * @function
  * @param {ImageProps} props - Props for the Image component.
diff --git a/bulma-ui/src/elements/Link.tsx b/bulma-ui/src/elements/Link.tsx
index fa9aa1bf3..018e471cf 100644
--- a/bulma-ui/src/elements/Link.tsx
+++ b/bulma-ui/src/elements/Link.tsx
@@ -8,34 +8,30 @@ import {
 
 /**
  * Props for the Link component.
- *
- * @property {string} [className] - Additional CSS classes to apply.
- * @property {(typeof validColors)[number] | 'inherit' | 'current'} [textColor] - Text color (Bulma color, 'inherit', or 'current').
- * @property {(typeof validColors)[number] | 'inherit' | 'current'} [bgColor] - Background color (Bulma color, 'inherit', or 'current').
- * @property {string} [href] - The URL the link points to.
- * @property {string} [target] - Where to open the linked document.
- * @property {string} [rel] - Relationship between the current and linked document.
- * @property {boolean} [isActive] - Whether the link appears active.
- * @property {React.ElementType} [as] - Render as a custom component (e.g. a router `Link`) instead of `<a>`. Defaults to `'a'`.
- * @property {React.ReactNode} [children] - Content to be rendered inside the link.
+ * @extraProp {string} [href] - The URL the link points to.
+ * @extraProp {'_self' | '_blank' | '_parent' | '_top'} [target] - Where to open the linked document.
+ * @extraProp {string} [rel] - Relationship between current and linked document.
  */
 export interface LinkProps
   extends
     React.AnchorHTMLAttributes<HTMLAnchorElement>,
     Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+  /** Additional CSS classes to apply. */
   className?: string;
+  /** Text color helper. */
   textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+  /** Background color helper. */
   bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+  /** Whether the link appears active. */
   isActive?: boolean;
+  /** Render as a custom component (e.g. a router `Link`) instead of `<a>`. Defaults to `'a'`. */
   as?: React.ElementType;
+  /** Content to render inside the link. */
   children?: React.ReactNode;
 }
 
 /**
- * Link component for rendering a styled Bulma anchor element.
- *
- * A Link wraps the HTML `<a>` element with Bulma styling support and helper class integration.
- * Supports Bulma helper classes for additional styling like text color, background color, and layout.
+ * The `Link` component renders a styled anchor (`<a>`) element with Bulma helper class integration.
  *
  * @function
  * @param {LinkProps} props - Props for the Link component.
diff --git a/bulma-ui/src/elements/LinkButton.tsx b/bulma-ui/src/elements/LinkButton.tsx
index 213b7993e..fbf1322f6 100644
--- a/bulma-ui/src/elements/LinkButton.tsx
+++ b/bulma-ui/src/elements/LinkButton.tsx
@@ -4,15 +4,14 @@ import { classNames, usePrefixedClassNames } from '../helpers/classNames';
 
 /**
  * Props for the LinkButton component.
- *
- * @property {'text' | 'ghost' | 'underline'} [variant] - Display mode. 'text' renders a minimal button without underline; 'ghost' renders a link-like button with default text color; 'underline' renders a text button that underlines on hover/focus. Defaults to 'text'.
- * @property {'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger' | 'white' | 'light' | 'dark' | 'black'} [color] - Text color override.
  */
 export interface LinkButtonProps extends Omit<
   ButtonProps,
   'color' | 'isOutlined' | 'isInverted' | 'isLight'
 > {
+  /** Display mode. `text` has no underline; `ghost` uses default text color. */
   variant?: 'text' | 'ghost' | 'underline';
+  /** Text color override for the button. */
   color?:
     | 'primary'
     | 'link'
@@ -27,12 +26,7 @@ export interface LinkButtonProps extends Omit<
 }
 
 /**
- * A button that visually looks like text or a link, for a11y-friendly replacements
- * of `<div onClick>` anti-patterns.
- *
- * Wraps the Button component with `is-text` or `is-ghost` styling, plus CSS overrides
- * to remove the underline (text variant) or link color (ghost variant).
- * The 'underline' variant uses `is-text` styling with an underline that appears on hover/focus.
+ * The `LinkButton` component renders a `<button>` that visually looks like text or a link.
  *
  * @function
  * @param {LinkButtonProps} props - Props for the LinkButton component.
diff --git a/bulma-ui/src/elements/ListItem.tsx b/bulma-ui/src/elements/ListItem.tsx
index cfe1f6d75..f4723ede7 100644
--- a/bulma-ui/src/elements/ListItem.tsx
+++ b/bulma-ui/src/elements/ListItem.tsx
@@ -8,29 +8,24 @@ import {
 
 /**
  * Props for the ListItem component.
- *
- * @property {string} [className] - Additional CSS classes to apply.
- * @property {(typeof validColors)[number] | 'inherit' | 'current'} [textColor] - Text color (Bulma color, 'inherit', or 'current').
- * @property {(typeof validColors)[number] | 'inherit' | 'current'} [bgColor] - Background color (Bulma color, 'inherit', or 'current').
- * @property {React.ReactNode} [children] - Content to be rendered inside the list item.
+ * @extraProp {number} [value] - Custom value for ordered list items.
  */
 export interface ListItemProps
   extends
     React.LiHTMLAttributes<HTMLLIElement>,
     Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+  /** Additional CSS classes to apply. */
   className?: string;
+  /** Text color helper. */
   textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+  /** Background color helper. */
   bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+  /** Content to render inside the list item. */
   children?: React.ReactNode;
 }
 
 /**
- * ListItem component for rendering a styled list item element.
- *
- * A ListItem wraps the HTML `<li>` element with Bulma helper class integration.
- * Use it inside UnorderedList or OrderedList components.
- * Supports Bulma helper classes for additional styling like text color, background color,
- * and spacing utilities.
+ * The `ListItem` component renders a styled list item (`<li>`) element with Bulma helper class integration.
  *
  * @function
  * @param {ListItemProps} props - Props for the ListItem component.
diff --git a/bulma-ui/src/elements/Notification.tsx b/bulma-ui/src/elements/Notification.tsx
index 22c373899..eae50b0b7 100644
--- a/bulma-ui/src/elements/Notification.tsx
+++ b/bulma-ui/src/elements/Notification.tsx
@@ -9,32 +9,29 @@ import {
 
 /**
  * Props for the Notification component.
- *
- * @property {string} [className] - Additional CSS classes to apply.
- * @property {(typeof validColors)[number]} [color] - Bulma color modifier for the notification.
- * @property {(typeof validColors)[number] | 'inherit' | 'current'} [textColor] - Text color (Bulma color, 'inherit', or 'current').
- * @property {boolean} [isLight] - Use the light color variant.
- * @property {boolean} [hasDelete] - Show a delete (close) button.
- * @property {() => void} [onDelete] - Callback fired when the delete button is clicked.
- * @property {React.ReactNode} [children] - Content to be rendered inside the notification.
  */
 export interface NotificationProps
   extends
     React.HTMLAttributes<HTMLDivElement>,
     Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+  /** Additional CSS classes to apply. */
   className?: string;
+  /** Bulma color modifier for the notification. */
   color?: (typeof validColors)[number];
+  /** Text color helper. */
   textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+  /** Use the light color variant. */
   isLight?: boolean;
+  /** Shows a close (delete) button in the notification. */
   hasDelete?: boolean;
+  /** Callback fired when the delete button is clicked. */
   onDelete?: () => void;
+  /** Content inside the notification. */
   children?: React.ReactNode;
 }
 
 /**
- * Notification component for rendering a styled Bulma notification.
- *
- * Supports colors, light variants, a delete button, and arbitrary content.
+ * The `Notification` component is a Bulma-styled alert/message area for providing feedback, warnings, or information to users.
  *
  * @function
  * @param {NotificationProps} props - Props for the Notification component.
@@ -94,20 +91,13 @@ export type NotificationPosition =
 
 /**
  * Options for showing a programmatic notification.
- *
- * @property {string|React.ReactNode} message - The message to display.
- * @property {(typeof validColors)[number]} [color] - Bulma color modifier.
- * @property {boolean} [isLight] - Use the light color variant.
- * @property {number} [duration] - Duration in ms before auto-close. Default: 3000.
- * @property {NotificationPosition} [position] - Position on the screen. Default: 'top-right'.
- * @property {boolean} [queue] - Display notifications one at a time in FIFO order.
- * @property {boolean} [hasDelete] - Show a delete (close) button. Default: true.
- * @property {boolean} [indefinite] - Stay open until dismissed.
- * @property {boolean} [pauseOnHover] - Pause auto-close timer on hover. Default: true.
  */
 export interface NotificationOptions {
+  /** The message to display. */
   message: string | React.ReactNode;
+  /** Bulma color modifier. */
   color?: (typeof validColors)[number];
+  /** Use the light color variant. */
   isLight?: boolean;
   /** Duration in ms before auto-close. Default 3000. */
   duration?: number;
@@ -125,12 +115,11 @@ export interface NotificationOptions {
 
 /**
  * Internal representation of a notification instance.
- *
- * @property {string} id - Unique identifier for this notification.
- * @property {NotificationOptions} options - Configuration options for the notification.
  */
 interface NotificationInstance {
+  /** Unique identifier for this notification. */
   id: string;
+  /** Configuration options for the notification. */
   options: NotificationOptions;
 }
 
diff --git a/bulma-ui/src/elements/OrderedList.tsx b/bulma-ui/src/elements/OrderedList.tsx
index 17bea60f6..c3ea9ed87 100644
--- a/bulma-ui/src/elements/OrderedList.tsx
+++ b/bulma-ui/src/elements/OrderedList.tsx
@@ -10,31 +10,26 @@ import {
 
 /**
  * Props for the OrderedList component.
- *
- * @property {string} [className] - Additional CSS classes to apply.
- * @property {(typeof validColors)[number] | 'inherit' | 'current'} [textColor] - Text color (Bulma color, 'inherit', or 'current').
- * @property {(typeof validColors)[number] | 'inherit' | 'current'} [bgColor] - Background color (Bulma color, 'inherit', or 'current').
- * @property {'1' | 'a' | 'A' | 'i' | 'I'} [type] - The numbering type for the list.
- * @property {number} [start] - The starting number for the list.
- * @property {boolean} [reversed] - Whether to reverse the list numbering.
- * @property {React.ReactNode} [children] - List items to be rendered inside the list.
+ * @extraProp {'1' | 'a' | 'A' | 'i' | 'I'} [type='1'] - The numbering type for the list.
+ * @extraProp {number} [start] - The starting number for the list.
+ * @extraProp {boolean} [reversed] - Whether to reverse the list numbering.
  */
 export interface OrderedListProps
   extends
     React.OlHTMLAttributes<HTMLOListElement>,
     Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+  /** Additional CSS classes to apply. */
   className?: string;
+  /** Text color helper. */
   textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+  /** Background color helper. */
   bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+  /** List items to render inside the list. */
   children?: React.ReactNode;
 }
 
 /**
- * OrderedList component for rendering a styled ordered list element.
- *
- * An OrderedList wraps the HTML `<ol>` element with Bulma helper class integration.
- * Supports Bulma helper classes for additional styling like text color, background color,
- * and spacing utilities. Also supports standard `<ol>` attributes like `type`, `start`, and `reversed`.
+ * The `OrderedList` component renders a styled ordered list (`<ol>`) element with Bulma helper class integration.
  *
  * @function
  * @param {OrderedListProps} props - Props for the OrderedList component.
diff --git a/bulma-ui/src/elements/Paragraph.tsx b/bulma-ui/src/elements/Paragraph.tsx
index c0d1e8919..dc8d3e532 100644
--- a/bulma-ui/src/elements/Paragraph.tsx
+++ b/bulma-ui/src/elements/Paragraph.tsx
@@ -8,28 +8,23 @@ import {
 
 /**
  * Props for the Paragraph component.
- *
- * @property {string} [className] - Additional CSS classes to apply.
- * @property {(typeof validColors)[number] | 'inherit' | 'current'} [textColor] - Text color (Bulma color, 'inherit', or 'current').
- * @property {(typeof validColors)[number] | 'inherit' | 'current'} [bgColor] - Background color (Bulma color, 'inherit', or 'current').
- * @property {React.ReactNode} [children] - Content to be rendered inside the paragraph.
  */
 export interface ParagraphProps
   extends
     React.HTMLAttributes<HTMLParagraphElement>,
     Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+  /** Additional CSS classes to apply. */
   className?: string;
+  /** Text color helper. */
   textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+  /** Background color helper. */
   bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+  /** Content to render inside the paragraph. */
   children?: React.ReactNode;
 }
 
 /**
- * Paragraph component for rendering a styled paragraph element.
- *
- * A Paragraph wraps the HTML `<p>` element with Bulma helper class integration.
- * Supports Bulma helper classes for additional styling like text color, background color,
- * typography, and spacing utilities.
+ * The `Paragraph` component renders a styled `<p>` element with Bulma helper class integration.
  *
  * @function
  * @param {ParagraphProps} props - Props for the Paragraph component.
diff --git a/bulma-ui/src/elements/Pre.tsx b/bulma-ui/src/elements/Pre.tsx
index 5955b9ab3..e66d1e8cf 100644
--- a/bulma-ui/src/elements/Pre.tsx
+++ b/bulma-ui/src/elements/Pre.tsx
@@ -8,28 +8,23 @@ import {
 
 /**
  * Props for the Pre component.
- *
- * @property {string} [className] - Additional CSS classes to apply.
- * @property {(typeof validColors)[number] | 'inherit' | 'current'} [textColor] - Text color (Bulma color, 'inherit', or 'current').
- * @property {(typeof validColors)[number] | 'inherit' | 'current'} [bgColor] - Background color (Bulma color, 'inherit', or 'current').
- * @property {React.ReactNode} [children] - Preformatted content to be rendered inside the element.
  */
 export interface PreProps
   extends
     React.HTMLAttributes<HTMLPreElement>,
     Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+  /** Additional CSS classes to apply. */
   className?: string;
+  /** Text color helper. */
   textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+  /** Background color helper. */
   bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+  /** Preformatted content to render. */
   children?: React.ReactNode;
 }
 
 /**
- * Pre component for rendering preformatted text blocks.
- *
- * A Pre wraps the HTML `<pre>` element with Bulma helper class integration.
- * Use it for multi-line code blocks, ASCII art, or any content where whitespace
- * formatting must be preserved. Often used together with the Code component.
+ * The `Pre` component renders a styled `<pre>` element with Bulma helper class integration.
  *
  * @function
  * @param {PreProps} props - Props for the Pre component.
diff --git a/bulma-ui/src/elements/Progress.tsx b/bulma-ui/src/elements/Progress.tsx
index 8b41670db..bfcfec1f1 100644
--- a/bulma-ui/src/elements/Progress.tsx
+++ b/bulma-ui/src/elements/Progress.tsx
@@ -8,30 +8,27 @@ import {
 
 /**
  * Props for the Progress component.
- *
- * @property {string} [className] - Additional CSS classes to apply.
- * @property {(typeof validColors)[number]} [color] - Bulma color modifier for the progress bar.
- * @property {'small' | 'medium' | 'large'} [size] - Size modifier for the progress bar.
- * @property {number} [value] - Current value of the progress bar.
- * @property {number} [max] - Maximum value of the progress bar.
- * @property {React.ReactNode} [children] - Optional custom content inside the progress element.
  */
 export interface ProgressProps
   extends
     React.ProgressHTMLAttributes<HTMLProgressElement>,
     Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+  /** Additional CSS classes to apply. */
   className?: string;
+  /** Bulma color modifier for the progress bar. */
   color?: (typeof validColors)[number];
+  /** Size modifier for the progress bar. */
   size?: 'small' | 'medium' | 'large';
+  /** Current value of the progress bar. */
   value?: number;
+  /** Maximum value of the progress bar. */
   max?: number;
+  /** Optional custom content inside the progress bar. */
   children?: React.ReactNode;
 }
 
 /**
- * Progress component for rendering a styled Bulma progress bar.
- *
- * Supports Bulma color and size modifiers, value/max attributes, and optional custom content.
+ * The `Progress` component displays a Bulma-styled progress bar.
  *
  * @function
  * @param {ProgressProps} props - Props for the Progress component.
diff --git a/bulma-ui/src/elements/Skeleton.tsx b/bulma-ui/src/elements/Skeleton.tsx
index f49d9ca02..fc9a804fc 100644
--- a/bulma-ui/src/elements/Skeleton.tsx
+++ b/bulma-ui/src/elements/Skeleton.tsx
@@ -3,29 +3,20 @@ import { classNames, usePrefixedClassNames } from '../helpers/classNames';
 
 /**
  * Props for the Skeleton component.
- *
- * @property {string} [className] - Additional CSS classes to apply.
- * @property {'block' | 'lines'} [variant] - Variant of skeleton: 'block' (default) or 'lines'.
- * @property {number} [lines] - Number of lines (only used if variant="lines").
- * @property {React.ReactNode} [children] - Render content inside the skeleton (block variant only).
- * @see {@link https://bulma.io/documentation/features/skeletons/ | Bulma Skeletons documentation}
  */
 export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
   /** Additional CSS classes to apply */
   className?: string;
-  /** Variant of skeleton: 'block' (default) or 'lines' */
+  /** Skeleton variant: block (single block) or lines. */
   variant?: 'block' | 'lines';
-  /** Number of lines (only used if variant="lines") */
+  /** Number of lines (only for `lines` variant). */
   lines?: number;
-  /** Render content inside the skeleton (block variant only) */
+  /** Content inside the block (only for block variant). */
   children?: React.ReactNode;
 }
 
 /**
- * Skeleton component for rendering a styled Bulma skeleton element.
- *
- * Renders an animated placeholder that indicates content is loading.
- * Supports block and multi-line variants.
+ * The `Skeleton` component provides a Bulma-styled skeleton loader for React applications, useful for indicating that content is loading.
  *
  * @function
  * @param {SkeletonProps} props - Props for the Skeleton component.
diff --git a/bulma-ui/src/elements/Span.tsx b/bulma-ui/src/elements/Span.tsx
index 8ea5cf42f..4c6945340 100644
--- a/bulma-ui/src/elements/Span.tsx
+++ b/bulma-ui/src/elements/Span.tsx
@@ -8,27 +8,23 @@ import {
 
 /**
  * Props for the Span component.
- *
- * @property {string} [className] - Additional CSS classes to apply.
- * @property {(typeof validColors)[number] | 'inherit' | 'current'} [textColor] - Text color (Bulma color, 'inherit', or 'current').
- * @property {(typeof validColors)[number] | 'inherit' | 'current'} [bgColor] - Background color (Bulma color, 'inherit', or 'current').
- * @property {React.ReactNode} [children] - Content to be rendered inside the span.
  */
 export interface SpanProps
   extends
     React.HTMLAttributes<HTMLSpanElement>,
     Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+  /** Additional CSS classes to apply. */
   className?: string;
+  /** Text color helper. */
   textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+  /** Background color helper. */
   bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+  /** Content to render inside the span. */
   children?: React.ReactNode;
 }
 
 /**
- * Span component for rendering a styled inline element.
- *
- * A Span wraps the HTML `<span>` element with Bulma helper class integration.
- * Useful for styling inline text with Bulma's color, typography, and spacing utilities.
+ * The `Span` component renders a styled inline `<span>` element with Bulma helper class integration.
  *
  * @function
  * @param {SpanProps} props - Props for the Span component.
diff --git a/bulma-ui/src/elements/Strong.tsx b/bulma-ui/src/elements/Strong.tsx
index dbf9213d8..24dedbc6d 100644
--- a/bulma-ui/src/elements/Strong.tsx
+++ b/bulma-ui/src/elements/Strong.tsx
@@ -8,28 +8,23 @@ import {
 
 /**
  * Props for the Strong component.
- *
- * @property {string} [className] - Additional CSS classes to apply.
- * @property {(typeof validColors)[number] | 'inherit' | 'current'} [textColor] - Text color (Bulma color, 'inherit', or 'current').
- * @property {(typeof validColors)[number] | 'inherit' | 'current'} [bgColor] - Background color (Bulma color, 'inherit', or 'current').
- * @property {React.ReactNode} [children] - Content to be rendered inside the strong element.
  */
 export interface StrongProps
   extends
     React.HTMLAttributes<HTMLElement>,
     Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+  /** Additional CSS classes to apply. */
   className?: string;
+  /** Text color helper. */
   textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+  /** Background color helper. */
   bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+  /** Content to render inside the strong element. */
   children?: React.ReactNode;
 }
 
 /**
- * Strong component for rendering semantically important bold text.
- *
- * A Strong wraps the HTML `<strong>` element with Bulma helper class integration.
- * Use it for text that has strong importance, seriousness, or urgency.
- * For visual-only bold styling without semantic meaning, use Span with textWeight="bold".
+ * The `Strong` component renders a styled `<strong>` element with Bulma helper class integration.
  *
  * @function
  * @param {StrongProps} props - Props for the Strong component.
diff --git a/bulma-ui/src/elements/SubTitle.tsx b/bulma-ui/src/elements/SubTitle.tsx
index 4076f8ae5..cd9ca6096 100644
--- a/bulma-ui/src/elements/SubTitle.tsx
+++ b/bulma-ui/src/elements/SubTitle.tsx
@@ -28,14 +28,7 @@ export type SubTitleElement = (typeof validSubTitleElements)[number];
 
 /**
  * Props for the SubTitle component.
- *
- * @property {string} [className] - Additional CSS classes to apply.
- * @property {SubTitleSize} [size] - Size of the subtitle (1-6).
- * @property {SubTitleElement} [as='h1'] - HTML element to render as (h1-h6 or p).
- * @property {boolean} [hasSkeleton] - Adds the has-skeleton CSS class.
- * @property {React.ReactNode} [children] - Subtitle content.
- * @property {string} [textColor] - Text color class (maps to Bulma's color helper).
- * @property {string} [bgColor] - Background color class (maps to Bulma's backgroundColor helper).
+ * @extraProp {boolean} [skeleton] - Applies the `is-skeleton` class to the entire component.
  */
 export interface SubTitleProps
   extends
@@ -44,19 +37,24 @@ export interface SubTitleProps
       'color'
     >,
     Omit<BulmaClassesProps, 'backgroundColor' | 'color'> {
+  /** Additional CSS classes to apply. */
   className?: string;
+  /** Size of the subtitle (Bulma sizes). */
   size?: SubTitleSize;
+  /** HTML element to render as (h1-h6 or p). */
   as?: SubTitleElement;
+  /** Applies the `has-skeleton` class to part of the content. */
   hasSkeleton?: boolean;
+  /** Subtitle content. */
   children?: React.ReactNode;
+  /** Text color helper. */
   textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+  /** Background color helper. */
   bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
 }
 
 /**
- * SubTitle component for rendering a styled Bulma subtitle.
- *
- * Supports Bulma subtitle sizes and rendering as different HTML elements (h1-h6, p).
+ * The `SubTitle` component renders a Bulma-styled subtitle (secondary heading), supporting sizes `1-6` and rendering as any heading or paragraph element (`h1-h6`, `p`).
  *
  * @function
  * @param {SubTitleProps} props - Props for the SubTitle component.
diff --git a/bulma-ui/src/elements/Table.tsx b/bulma-ui/src/elements/Table.tsx
index 8bfe0963e..0475c5145 100644
--- a/bulma-ui/src/elements/Table.tsx
+++ b/bulma-ui/src/elements/Table.tsx
@@ -14,34 +14,31 @@ import { Td } from './Td';
 
 /**
  * Props for the Table component.
- *
- * @property {string} [className] - Additional CSS classes to apply.
- * @property {boolean} [isBordered] - Adds borders to all the cells.
- * @property {boolean} [isStriped] - Adds zebra-striping to rows.
- * @property {boolean} [isNarrow] - Makes the table more compact by cutting cell padding in half.
- * @property {boolean} [isHoverable] - Adds a hover effect on rows.
- * @property {boolean} [isFullwidth] - Makes the table span the full width of its parent.
- * @property {boolean} [isResponsive] - Makes the table horizontally scrollable on small screens.
- * @property {React.ReactNode} [children] - Table content.
  */
 export interface TableProps
   extends
     Omit<React.TableHTMLAttributes<HTMLTableElement>, 'color'>,
     Omit<BulmaClassesProps, 'backgroundColor'> {
+  /** Additional CSS classes to apply. */
   className?: string;
+  /** Adds borders to all cells. */
   isBordered?: boolean;
+  /** Adds zebra-striping to rows. */
   isStriped?: boolean;
+  /** Makes the table more compact by cutting cell padding in half. */
   isNarrow?: boolean;
+  /** Adds a hover effect on rows. */
   isHoverable?: boolean;
+  /** Makes the table span the full width of its parent. */
   isFullwidth?: boolean;
+  /** Makes the table horizontally scrollable on small screens. */
   isResponsive?: boolean;
+  /** Table content (should use subcomponents). */
   children?: React.ReactNode;
 }
 
 /**
- * Table component for rendering a styled Bulma table.
- *
- * Supports responsive, bordered, striped, narrow, hoverable, and fullwidth variants.
+ * The `Table` component and its subcomponents provide a highly composable, Bulma-styled table system for React.
  *
  * @function
  * @param {TableProps} props - Props for the Table component.
diff --git a/bulma-ui/src/elements/Tag.tsx b/bulma-ui/src/elements/Tag.tsx
index 4f3aa2e9b..3b1b76655 100644
--- a/bulma-ui/src/elements/Tag.tsx
+++ b/bulma-ui/src/elements/Tag.tsx
@@ -28,34 +28,31 @@ export type TagSize = (typeof validTagSizes)[number];
 
 /**
  * Props for the Tag component.
- *
- * @property {string} [className] - Additional CSS classes to apply.
- * @property {TagColor} [color] - Bulma color modifier for the tag.
- * @property {TagSize} [size] - Size modifier for the tag.
- * @property {boolean} [isRounded] - Whether the tag should have rounded corners.
- * @property {boolean} [isDelete] - Whether the tag is a delete button.
- * @property {boolean} [isHoverable] - Whether the tag is hoverable.
- * @property {() => void} [onDelete] - Callback fired when the delete button is clicked.
- * @property {React.ReactNode} [children] - Tag content.
  */
 export interface TagProps
   extends
     Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'>,
     Omit<BulmaClassesProps, 'color'> {
+  /** Additional CSS classes to apply. */
   className?: string;
+  /** Bulma color modifier for the tag. */
   color?: TagColor;
+  /** Tag size. */
   size?: TagSize;
+  /** Renders a rounded tag. */
   isRounded?: boolean;
+  /** Renders a delete-style tag (delete button). */
   isDelete?: boolean;
+  /** Adds hover effect to the tag. */
   isHoverable?: boolean;
+  /** Callback for delete tag/button. */
   onDelete?: () => void;
+  /** Tag content. */
   children?: React.ReactNode;
 }
 
 /**
- * Tag component for rendering a styled Bulma tag.
- *
- * Supports colors, sizes, rounded, delete, and hoverable variants.
+ * The `Tag` component renders a Bulma-styled label or badge.
  *
  * @function
  * @param {TagProps} props - Props for the Tag component.
diff --git a/bulma-ui/src/elements/Tags.tsx b/bulma-ui/src/elements/Tags.tsx
index 4365b5840..f46930b95 100644
--- a/bulma-ui/src/elements/Tags.tsx
+++ b/bulma-ui/src/elements/Tags.tsx
@@ -6,26 +6,23 @@ import { Tag } from './Tag';
 
 /**
  * Props for the Tags component.
- *
- * @property {string} [className] - Additional CSS classes to apply.
- * @property {boolean} [hasAddons] - Group tags together as addons.
- * @property {boolean} [isMultiline] - Allow tags to wrap onto multiple lines.
- * @property {React.ReactNode} [children] - Tag elements to render inside the container.
  */
 export interface TagsProps
   extends
     Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>,
     Omit<BulmaClassesProps, 'backgroundColor' | 'color'> {
+  /** Additional CSS classes to apply. */
   className?: string;
+  /** Group tags together as add-ons (no spacing). */
   hasAddons?: boolean;
+  /** Allow tags to wrap onto multiple lines. */
   isMultiline?: boolean;
+  /** Tag elements to render inside the container. */
   children?: React.ReactNode;
 }
 
 /**
- * Tags component for rendering a styled Bulma tags container.
- *
- * Supports addons and multiline variants.
+ * The `Tags` component groups multiple `Tag` components together in a horizontal (or multiline) Bulma-styled container.
  *
  * @function
  * @param {TagsProps} props - Props for the Tags component.
diff --git a/bulma-ui/src/elements/Tbody.tsx b/bulma-ui/src/elements/Tbody.tsx
index e947dcc3d..1c5a66e73 100644
--- a/bulma-ui/src/elements/Tbody.tsx
+++ b/bulma-ui/src/elements/Tbody.tsx
@@ -7,15 +7,14 @@ import { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';
 
 /**
  * Props for the Tbody component.
- *
- * @property {string} [className] - Additional CSS classes to apply.
- * @property {React.ReactNode} [children] - Table body content (rows).
  */
 export interface TbodyProps
   extends
     Omit<React.HTMLAttributes<HTMLTableSectionElement>, 'color'>,
     Omit<BulmaClassesProps, 'backgroundColor'> {
+  /** Additional CSS classes to apply. */
   className?: string;
+  /** Table body content (rows). */
   children?: React.ReactNode;
 }
 
diff --git a/bulma-ui/src/elements/Td.tsx b/bulma-ui/src/elements/Td.tsx
index ce78c51de..a87e39939 100644
--- a/bulma-ui/src/elements/Td.tsx
+++ b/bulma-ui/src/elements/Td.tsx
@@ -26,17 +26,16 @@ export type TableColor = (typeof validTableColors)[number];
 
 /**
  * Props for the Td component.
- *
- * @property {string} [className] - Additional CSS classes to apply.
- * @property {TableColor} [color] - Bulma color modifier for the table cell.
- * @property {React.ReactNode} [children] - Table cell content.
  */
 export interface TdProps
   extends
     Omit<React.TdHTMLAttributes<HTMLTableCellElement>, 'color'>,
     Omit<BulmaClassesProps, 'backgroundColor' | 'color'> {
+  /** Additional CSS classes to apply. */
   className?: string;
+  /** Bulma color modifier for the table cell. */
   color?: TableColor;
+  /** Table cell content. */
   children?: React.ReactNode;
 }
 
diff --git a/bulma-ui/src/elements/Tfoot.tsx b/bulma-ui/src/elements/Tfoot.tsx
index 0eeb282ae..2ccd47113 100644
--- a/bulma-ui/src/elements/Tfoot.tsx
+++ b/bulma-ui/src/elements/Tfoot.tsx
@@ -7,15 +7,14 @@ import { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';
 
 /**
  * Props for the Tfoot component.
- *
- * @property {string} [className] - Additional CSS classes to apply.
- * @property {React.ReactNode} [children] - Table footer content (rows).
  */
 export interface TfootProps
   extends
     Omit<React.HTMLAttributes<HTMLTableSectionElement>, 'color'>,
     Omit<BulmaClassesProps, 'backgroundColor'> {
+  /** Additional CSS classes to apply. */
   className?: string;
+  /** Table footer content (rows). */
   children?: React.ReactNode;
 }
 
diff --git a/bulma-ui/src/elements/Th.tsx b/bulma-ui/src/elements/Th.tsx
index 299d5cf71..be3d63dd1 100644
--- a/bulma-ui/src/elements/Th.tsx
+++ b/bulma-ui/src/elements/Th.tsx
@@ -14,21 +14,20 @@ type TableAlignment = (typeof validAlignments)[number];
 
 /**
  * Props for the Th component.
- *
- * @property {string} [className] - Additional CSS classes to apply.
- * @property {TableAlignment} [isAligned] - Text alignment for the header cell ('left', 'right', 'centered').
- * @property {string|number} [width] - Width of the header cell (e.g., '100px' or 100).
- * @property {TableColor} [color] - Bulma color modifier for the header cell.
- * @property {React.ReactNode} [children] - Table header cell content.
  */
 export interface ThProps
   extends
     Omit<React.ThHTMLAttributes<HTMLTableCellElement>, 'color'>,
     Omit<BulmaClassesProps, 'backgroundColor' | 'color'> {
+  /** Additional CSS classes to apply. */
   className?: string;
+  /** Text alignment for the header cell ('left', 'right', 'centered'). */
   isAligned?: TableAlignment;
+  /** Width of the header cell (e.g., '100px' or 100). */
   width?: string | number;
+  /** Bulma color modifier for the header cell. */
   color?: TableColor;
+  /** Table header cell content. */
   children?: React.ReactNode;
 }
 
diff --git a/bulma-ui/src/elements/Thead.tsx b/bulma-ui/src/elements/Thead.tsx
index b8b616522..a3c897b33 100644
--- a/bulma-ui/src/elements/Thead.tsx
+++ b/bulma-ui/src/elements/Thead.tsx
@@ -7,15 +7,14 @@ import { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';
 
 /**
  * Props for the Thead component.
- *
- * @property {string} [className] - Additional CSS classes to apply.
- * @property {React.ReactNode} [children] - Table header content (rows).
  */
 export interface TheadProps
   extends
     Omit<React.HTMLAttributes<HTMLTableSectionElement>, 'color'>,
     Omit<BulmaClassesProps, 'backgroundColor'> {
+  /** Additional CSS classes to apply. */
   className?: string;
+  /** Table header content (rows). */
   children?: React.ReactNode;
 }
 
diff --git a/bulma-ui/src/elements/Title.tsx b/bulma-ui/src/elements/Title.tsx
index a91104b2e..06d33439f 100644
--- a/bulma-ui/src/elements/Title.tsx
+++ b/bulma-ui/src/elements/Title.tsx
@@ -20,15 +20,7 @@ export type TitleElement = (typeof validTitleElements)[number];
 
 /**
  * Props for the Title component.
- *
- * @property {string} [className] - Additional CSS classes to apply.
- * @property {TitleSize} [size] - Size of the title (1-6).
- * @property {boolean} [isSpaced] - Adds margin below the title.
- * @property {TitleElement} [as='h1'] - HTML element to render as (h1-h6 or p).
- * @property {boolean} [hasSkeleton] - Adds the has-skeleton CSS class.
- * @property {React.ReactNode} [children] - Title content.
- * @property {string} [textColor] - Text color class (maps to Bulma's color helper).
- * @property {string} [bgColor] - Background color class (maps to Bulma's backgroundColor helper).
+ * @extraProp {boolean} [skeleton] - Applies the `is-skeleton` class to the entire component.
  */
 export interface TitleProps
   extends
@@ -37,20 +29,26 @@ export interface TitleProps
       'color'
     >,
     Omit<BulmaClassesProps, 'backgroundColor' | 'color'> {
+  /** Additional CSS classes to apply. */
   className?: string;
+  /** Size of the title (Bulma sizes). */
   size?: TitleSize;
+  /** Adds margin below the title. */
   isSpaced?: boolean;
+  /** HTML element to render as (h1-h6 or p). */
   as?: TitleElement;
+  /** Applies the `has-skeleton` class to part of the content. */
   hasSkeleton?: boolean;
+  /** Title content. */
   children?: React.ReactNode;
+  /** Text color helper. */
   textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+  /** Background color helper. */
   bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
 }
 
 /**
- * Title component for rendering a styled Bulma title.
- *
- * Supports sizes, spacing, and rendering as different HTML elements.
+ * The `Title` component renders a Bulma-styled title (heading), supporting sizes `1`-`6`, spacing, and rendering as any heading or paragraph element (`h1`-`h6`, `p`).
  *
  * @function
  * @param {TitleProps} props - Props for the Title component.
diff --git a/bulma-ui/src/elements/Tr.tsx b/bulma-ui/src/elements/Tr.tsx
index c6e331645..9ca6674bb 100644
--- a/bulma-ui/src/elements/Tr.tsx
+++ b/bulma-ui/src/elements/Tr.tsx
@@ -8,19 +8,18 @@ import { TableColor, validTableColors } from './Td'; // Import TableColor from T
 
 /**
  * Props for the Tr component.
- *
- * @property {string} [className] - Additional CSS classes to apply.
- * @property {boolean} [isSelected] - Whether the row is selected (adds Bulma's is-selected class).
- * @property {TableColor} [color] - Bulma color modifier for the table row.
- * @property {React.ReactNode} [children] - Table row content (cells).
  */
 export interface TrProps
   extends
     Omit<React.HTMLAttributes<HTMLTableRowElement>, 'color'>,
     Omit<BulmaClassesProps, 'backgroundColor' | 'color'> {
+  /** Additional CSS classes to apply. */
   className?: string;
+  /** Whether the row is selected (adds Bulma's is-selected class). */
   isSelected?: boolean;
+  /** Bulma color modifier for the table row. */
   color?: TableColor;
+  /** Table row content (cells). */
   children?: React.ReactNode;
 }
 
diff --git a/bulma-ui/src/elements/UnorderedList.tsx b/bulma-ui/src/elements/UnorderedList.tsx
index c5df327c5..1eef373e8 100644
--- a/bulma-ui/src/elements/UnorderedList.tsx
+++ b/bulma-ui/src/elements/UnorderedList.tsx
@@ -10,28 +10,23 @@ import {
 
 /**
  * Props for the UnorderedList component.
- *
- * @property {string} [className] - Additional CSS classes to apply.
- * @property {(typeof validColors)[number] | 'inherit' | 'current'} [textColor] - Text color (Bulma color, 'inherit', or 'current').
- * @property {(typeof validColors)[number] | 'inherit' | 'current'} [bgColor] - Background color (Bulma color, 'inherit', or 'current').
- * @property {React.ReactNode} [children] - List items to be rendered inside the list.
  */
 export interface UnorderedListProps
   extends
     React.HTMLAttributes<HTMLUListElement>,
     Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+  /** Additional CSS classes to apply. */
   className?: string;
+  /** Text color helper. */
   textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+  /** Background color helper. */
   bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+  /** List items to render inside the list. */
   children?: React.ReactNode;
 }
 
 /**
- * UnorderedList component for rendering a styled unordered list element.
- *
- * An UnorderedList wraps the HTML `<ul>` element with Bulma helper class integration.
- * Supports Bulma helper classes for additional styling like text color, background color,
- * and spacing utilities.
+ * The `UnorderedList` component renders a styled unordered list (`<ul>`) element with Bulma helper class integration.
  *
  * @function
  * @param {UnorderedListProps} props - Props for the UnorderedList component.
diff --git a/docs/docs/api/elements/block.md b/docs/docs/api/elements/block.md
index 9e0e13460..dfa7c24c1 100644
--- a/docs/docs/api/elements/block.md
+++ b/docs/docs/api/elements/block.md
@@ -1,13 +1,20 @@
 ---
 title: Block
 sidebar_label: Block
+description: The `Block` component renders a simple container with Bulma's `.block` class, adding vertical margin between sections of content.
 ---
 
 # Block
 
 ## Overview
 
-The `Block` component renders a simple container with Bulma's `.block` class, adding vertical margin between sections of content. Use it for grouping or spacing elements, especially in forms or stacked layouts. It supports all Bulma helper props for color, spacing, and more.
+<!-- bestax:generated overview -->
+
+The `Block` component renders a simple container with Bulma's `.block` class, adding vertical margin between sections of content.
+
+<!-- /bestax:generated overview -->
+
+Use it for grouping or spacing elements, especially in forms or stacked layouts. It supports all Bulma helper props for color, spacing, and more.
 
 :::info
 Bulma’s `.block` adds margin-bottom. For visual separation, combine with color or background helpers.
@@ -17,22 +24,13 @@ Bulma’s `.block` adds margin-bottom. For visual separation, combine with color
 
 ## Import
 
+<!-- bestax:generated import -->
+
 ```tsx
 import { Block } from '@allxsmith/bestax-bulma';
 ```
 
----
-
-## Props
-
-| Prop        | Type                                                                                                                                                                                                                                                                                     | Default | Description                                      |
-| ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------ |
-| `className` | `string`                                                                                                                                                                                                                                                                                 | —       | Additional CSS classes.                          |
-| `textColor` | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` \| `'black'` \| `'black-bis'` \| `'black-ter'` \| `'grey-darker'` \| `'grey-dark'` \| `'grey'` \| `'grey-light'` \| `'grey-lighter'` \| `'white'` \| `'light'` \| `'dark'` \| `'inherit'` \| `'current'` | —       | Text color helper.                               |
-| `color`     | `'primary' \| 'link' \| 'info' \| 'success' \| 'warning' \| 'danger'`                                                                                                                                                                                                                    | —       | Bulma color modifier for the block.              |
-| `bgColor`   | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` \| `'black'` \| `'black-bis'` \| `'black-ter'` \| `'grey-darker'` \| `'grey-dark'` \| `'grey'` \| `'grey-light'` \| `'grey-lighter'` \| `'white'` \| `'light'` \| `'dark'` \| `'inherit'` \| `'current'` | —       | Background color helper.                         |
-| `children`  | `React.ReactNode`                                                                                                                                                                                                                                                                        | —       | Content to render inside the block.              |
-| ...         | All standard `<div>` and Bulma helper props                                                                                                                                                                                                                                              |         | (See [Helper Props](../helpers/usebulmaclasses)) |
+<!-- /bestax:generated import -->
 
 ---
 
@@ -159,3 +157,20 @@ Use `Block` for logical, visually separated sections of content.
 
 - [Bulma Block Documentation](https://bulma.io/documentation/elements/block/)
 - [Storybook: Block Stories](https://bestax.io/storybook/?path=/story/elements-block--default)
+
+---
+
+## Props
+
+<!-- bestax:generated props -->
+
+| Prop        | Type                                                                            | Default | Description                                       |
+| ----------- | ------------------------------------------------------------------------------- | ------- | ------------------------------------------------- |
+| `className` | `string`                                                                        | —       | Additional CSS classes to apply.                  |
+| `textColor` | [Bulma color](../helpers/valid-values.md) \| `'inherit'` \| `'current'`         | —       | Text color helper.                                |
+| `color`     | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` | —       | Bulma color modifier for the block.               |
+| `bgColor`   | [Bulma color](../helpers/valid-values.md) \| `'inherit'` \| `'current'`         | —       | Background color helper.                          |
+| `children`  | `React.ReactNode`                                                               | —       | Content to render inside the block.               |
+| `...`       | All standard `<div>` attributes and Bulma helper props                          | —       | See [Helper Props](../helpers/usebulmaclasses.md) |
+
+<!-- /bestax:generated props -->
diff --git a/docs/docs/api/elements/box.md b/docs/docs/api/elements/box.md
index 432a14444..636d0d168 100644
--- a/docs/docs/api/elements/box.md
+++ b/docs/docs/api/elements/box.md
@@ -1,13 +1,20 @@
 ---
 title: Box
 sidebar_label: Box
+description: The `Box` component renders a bordered, padded container with an optional shadow using Bulma's `.box` class.
 ---
 
 # Box
 
 ## Overview
 
-The `Box` component renders a bordered, padded container with an optional shadow using Bulma's `.box` class. It's useful for visually separating content, callouts, or emphasizing important UI elements. Supports all Bulma helper props for color, spacing, and more.
+<!-- bestax:generated overview -->
+
+The `Box` component renders a bordered, padded container with an optional shadow using Bulma's `.box` class.
+
+<!-- /bestax:generated overview -->
+
+It's useful for visually separating content, callouts, or emphasizing important UI elements. Supports all Bulma helper props for color, spacing, and more.
 
 :::info
 By default, `Box` includes a subtle shadow. You can disable the shadow with `hasShadow={false}`.
@@ -17,23 +24,13 @@ By default, `Box` includes a subtle shadow. You can disable the shadow with `has
 
 ## Import
 
+<!-- bestax:generated import -->
+
 ```tsx
 import { Box } from '@allxsmith/bestax-bulma';
 ```
 
----
-
-## Props
-
-| Prop        | Type                                                                                                                                                                                                                                                                                     | Default | Description                                      |
-| ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------ |
-| `className` | `string`                                                                                                                                                                                                                                                                                 | —       | Additional CSS classes.                          |
-| `textColor` | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` \| `'black'` \| `'black-bis'` \| `'black-ter'` \| `'grey-darker'` \| `'grey-dark'` \| `'grey'` \| `'grey-light'` \| `'grey-lighter'` \| `'white'` \| `'light'` \| `'dark'` \| `'inherit'` \| `'current'` | —       | Text color helper.                               |
-| `color`     | `'primary' \| 'link' \| 'info' \| 'success' \| 'warning' \| 'danger'`                                                                                                                                                                                                                    | —       | Bulma color modifier for the box.                |
-| `bgColor`   | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` \| `'black'` \| `'black-bis'` \| `'black-ter'` \| `'grey-darker'` \| `'grey-dark'` \| `'grey'` \| `'grey-light'` \| `'grey-lighter'` \| `'white'` \| `'light'` \| `'dark'` \| `'inherit'` \| `'current'` | —       | Background color helper.                         |
-| `hasShadow` | `boolean`                                                                                                                                                                                                                                                                                | `true`  | Whether the box has a shadow.                    |
-| `children`  | `React.ReactNode`                                                                                                                                                                                                                                                                        | —       | Content to render inside the box.                |
-| ...         | All standard `<div>` and Bulma helper props                                                                                                                                                                                                                                              |         | (See [Helper Props](../helpers/usebulmaclasses)) |
+<!-- /bestax:generated import -->
 
 ---
 
@@ -135,3 +132,41 @@ Combine multiple props such as `textColor`, `bgColor`, `m`, `p`, and `textAlign`
 
 - [Bulma Box Documentation](https://bulma.io/documentation/elements/box/)
 - [Storybook: Box Stories](https://bestax.io/storybook/?path=/story/elements-box--default)
+
+---
+
+## Props
+
+<!-- bestax:generated props -->
+
+| Prop        | Type                                                                            | Default | Description                                       |
+| ----------- | ------------------------------------------------------------------------------- | ------- | ------------------------------------------------- |
+| `className` | `string`                                                                        | —       | Additional CSS classes to apply.                  |
+| `textColor` | [Bulma color](../helpers/valid-values.md) \| `'inherit'` \| `'current'`         | —       | Text color helper.                                |
+| `color`     | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` | —       | Bulma color modifier for the box.                 |
+| `bgColor`   | [Bulma color](../helpers/valid-values.md) \| `'inherit'` \| `'current'`         | —       | Background color helper.                          |
+| `hasShadow` | `boolean`                                                                       | `true`  | Whether the box has a shadow (default: true).     |
+| `children`  | `React.ReactNode`                                                               | —       | Content to render inside the box.                 |
+| `...`       | All standard `<div>` attributes and Bulma helper props                          | —       | See [Helper Props](../helpers/usebulmaclasses.md) |
+
+<!-- /bestax:generated props -->
+
+---
+
+## CSS & Sass Variables
+
+<!-- bestax:generated cssvars -->
+
+`Box` registers these variables on its own `.box` element. Override them there (or via `className`) — a value set on an ancestor is only inherited, and loses to the component-level declaration. See [Theme](../helpers/theme.md).
+
+| CSS Variable                     | Sass Variable             | Default                                                                                                                                   |
+| -------------------------------- | ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
+| `--bulma-box-background-color`   | `$box-background-color`   | `var(--bulma-scheme-main)`                                                                                                                |
+| `--bulma-box-color`              | `$box-color`              | `var(--bulma-text)`                                                                                                                       |
+| `--bulma-box-radius`             | `$box-radius`             | `var(--bulma-radius-large)`                                                                                                               |
+| `--bulma-box-shadow`             | `$box-shadow`             | `var(--bulma-shadow)`                                                                                                                     |
+| `--bulma-box-padding`            | `$box-padding`            | `1.25rem`                                                                                                                                 |
+| `--bulma-box-link-hover-shadow`  | `$box-link-hover-shadow`  | `0 0.5em 1em -0.125em hsla(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-invert-l), 0.1), 0 0 0 1px var(--bulma-link)` |
+| `--bulma-box-link-active-shadow` | `$box-link-active-shadow` | `inset 0 1px 2px hsla(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-invert-l), 0.2), 0 0 0 1px var(--bulma-link)`      |
+
+<!-- /bestax:generated cssvars -->
diff --git a/docs/docs/api/elements/button.md b/docs/docs/api/elements/button.md
index c7a30692f..dd094f2be 100644
--- a/docs/docs/api/elements/button.md
+++ b/docs/docs/api/elements/button.md
@@ -1,13 +1,20 @@
 ---
 title: Button
 sidebar_label: Button
+description: The `Button` component provides a flexible and highly customizable button for your Bulma React UI.
 ---
 
 # Button
 
 ## Overview
 
-The `Button` component provides a flexible and highly customizable button for your Bulma React UI. It supports all Bulma color, size, and state modifiers, as well as additional helper classes for text, spacing, and more.
+<!-- bestax:generated overview -->
+
+The `Button` component provides a flexible and highly customizable button for your Bulma React UI.
+
+<!-- /bestax:generated overview -->
+
+It supports all Bulma color, size, and state modifiers, as well as additional helper classes for text, spacing, and more.
 
 :::caution Accessibility
 Use `Button` for real button actions (submit, toggle, open a dialog). For a link-styled click target or client-side navigation, prefer [`LinkButton`](./linkbutton.md) — using `Button` as a fake link/`<div onClick>` loses proper anchor and a11y semantics.
@@ -21,39 +28,13 @@ Make sure to provide meaningful text or accessible content for screen readers.
 
 ## Import
 
+<!-- bestax:generated import -->
+
 ```tsx
 import { Button } from '@allxsmith/bestax-bulma';
 ```
 
----
-
-## Props
-
-| Prop          | Type                                                                                                                                  | Description                                                                                                        |
-| ------------- | ------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
-| `color`       | `'primary' \| 'link' \| 'info' \| 'success' \| 'warning' \| 'danger' \| 'white' \| 'light' \| 'dark' \| 'black' \| 'text' \| 'ghost'` | Bulma color variant for the button. `ghost` renders a link-like button; `text` renders a minimal text-only button. |
-| `size`        | `'small' \| 'normal' \| 'medium' \| 'large'`                                                                                          | Size of the button.                                                                                                |
-| `isLight`     | `boolean`                                                                                                                             | Applies a lighter color variant.                                                                                   |
-| `isRounded`   | `boolean`                                                                                                                             | Makes the button rounded.                                                                                          |
-| `isLoading`   | `boolean`                                                                                                                             | Displays a loading spinner.                                                                                        |
-| `isStatic`    | `boolean`                                                                                                                             | Makes the button non-interactive.                                                                                  |
-| `isFullWidth` | `boolean`                                                                                                                             | Makes the button full-width.                                                                                       |
-| `isOutlined`  | `boolean`                                                                                                                             | Applies outlined styling (requires color).                                                                         |
-| `isInverted`  | `boolean`                                                                                                                             | Applies inverted styling (requires color).                                                                         |
-| `isFocused`   | `boolean`                                                                                                                             | Applies focused styling (visual only).                                                                             |
-| `isActive`    | `boolean`                                                                                                                             | Applies active styling (visual only).                                                                              |
-| `isHovered`   | `boolean`                                                                                                                             | Applies hovered styling (visual only).                                                                             |
-| `isDisabled`  | `boolean`                                                                                                                             | Applies disabled styling.                                                                                          |
-| `as`          | `React.ElementType`                                                                                                                   | Render as a `<button>`, `<a>`, or a custom component (e.g. a router `Link`). Defaults to `'button'`.               |
-| `href`        | `string`                                                                                                                              | Href value (if rendering as `<a>`).                                                                                |
-| `onClick`     | `function`                                                                                                                            | Click event handler.                                                                                               |
-| `target`      | `string`                                                                                                                              | Anchor tag target.                                                                                                 |
-| `rel`         | `string`                                                                                                                              | Anchor tag rel.                                                                                                    |
-| `textColor`   | `'primary'` \| ... (see docs)                                                                                                         | Text color helper.                                                                                                 |
-| `bgColor`     | `'primary'` \| ... (see docs)                                                                                                         | Background color helper.                                                                                           |
-| `className`   | `string`                                                                                                                              | Custom class name.                                                                                                 |
-| `children`    | `React.ReactNode`                                                                                                                     | Button content.                                                                                                    |
-| ...           | All standard `<button>` and Bulma helper props                                                                                        | See [Helper Props](../helpers/usebulmaclasses.md)                                                                  |
+<!-- /bestax:generated import -->
 
 ---
 
@@ -336,3 +317,97 @@ If your button has only an icon, use `aria-label` to provide accessible text.
 :::tip Pro Tip
 You can use all [Bulma helper props](../helpers/usebulmaclasses.md) with `<Button />` for powerful utility-based styling.
 :::
+
+---
+
+## Props
+
+<!-- bestax:generated props -->
+
+| Prop          | Type                                                                                                                                                        | Default    | Description                                                                                                                                                           |
+| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `color`       | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` \| `'white'` \| `'light'` \| `'dark'` \| `'black'` \| `'text'` \| `'ghost'` | —          | Bulma color variant for the button. `ghost` renders a link-like button; `text` renders a minimal text-only button.                                                    |
+| `size`        | `'small'` \| `'normal'` \| `'medium'` \| `'large'`                                                                                                          | —          | Size of the button.                                                                                                                                                   |
+| `isLight`     | `boolean`                                                                                                                                                   | `false`    | Applies a lighter color variant.                                                                                                                                      |
+| `isRounded`   | `boolean`                                                                                                                                                   | `false`    | Makes the button rounded.                                                                                                                                             |
+| `isLoading`   | `boolean`                                                                                                                                                   | `false`    | Displays a loading spinner.                                                                                                                                           |
+| `isStatic`    | `boolean`                                                                                                                                                   | `false`    | Makes the button non-interactive.                                                                                                                                     |
+| `isFullWidth` | `boolean`                                                                                                                                                   | `false`    | Makes the button full-width.                                                                                                                                          |
+| `isOutlined`  | `boolean`                                                                                                                                                   | `false`    | Applies outlined styling (requires color).                                                                                                                            |
+| `isInverted`  | `boolean`                                                                                                                                                   | `false`    | Applies inverted styling (requires color).                                                                                                                            |
+| `isFocused`   | `boolean`                                                                                                                                                   | `false`    | Applies focused styling (visual only).                                                                                                                                |
+| `isActive`    | `boolean`                                                                                                                                                   | `false`    | Applies active styling (visual only).                                                                                                                                 |
+| `isHovered`   | `boolean`                                                                                                                                                   | `false`    | Applies hovered styling (visual only).                                                                                                                                |
+| `isDisabled`  | `boolean`                                                                                                                                                   | `false`    | Applies disabled styling.                                                                                                                                             |
+| `className`   | `string`                                                                                                                                                    | —          | Custom class name.                                                                                                                                                    |
+| `textColor`   | [Bulma color](../helpers/valid-values.md) \| `'inherit'` \| `'current'`                                                                                     | —          | Text color helper.                                                                                                                                                    |
+| `bgColor`     | [Bulma color](../helpers/valid-values.md) \| `'inherit'` \| `'current'`                                                                                     | —          | Background color helper.                                                                                                                                              |
+| `as`          | `React.ElementType`                                                                                                                                         | `'button'` | Render as a `<button>`, `<a>`, or a custom component (e.g. a router `Link`). Defaults to `'button'`; anything else (including `'a'`) uses anchor-style prop handling. |
+| `href`        | `string`                                                                                                                                                    | —          | Href value (if rendering as `<a>`).                                                                                                                                   |
+| `onClick`     | `React.MouseEventHandler<HTMLButtonElement>` \| `React.MouseEventHandler<HTMLAnchorElement>`                                                                | —          | Click event handler.                                                                                                                                                  |
+| `target`      | `string`                                                                                                                                                    | —          | Anchor tag target.                                                                                                                                                    |
+| `rel`         | `string`                                                                                                                                                    | —          | Anchor tag rel.                                                                                                                                                       |
+| `children`    | `React.ReactNode`                                                                                                                                           | —          | Button content.                                                                                                                                                       |
+| `...`         | All standard `<button>` attributes and Bulma helper props                                                                                                   | —          | See [Helper Props](../helpers/usebulmaclasses.md)                                                                                                                     |
+
+<!-- /bestax:generated props -->
+
+---
+
+## CSS & Sass Variables
+
+<!-- bestax:generated cssvars -->
+
+`Button` registers these variables on its own `.button` element. Override them there (or via `className`) — a value set on an ancestor is only inherited, and loses to the component-level declaration. See [Theme](../helpers/theme.md).
+
+| CSS Variable                                 | Sass Variable                         | Default                                                                               |
+| -------------------------------------------- | ------------------------------------- | ------------------------------------------------------------------------------------- |
+| `--bulma-button-family`                      | `$button-family`                      | `false`                                                                               |
+| `--bulma-button-weight`                      | `$button-weight`                      | `var(--bulma-weight-medium)`                                                          |
+| `--bulma-button-border-color`                | `$button-border-color`                | `var(--bulma-border)`                                                                 |
+| `--bulma-button-border-style`                | `$button-border-style`                | `solid`                                                                               |
+| `--bulma-button-border-width`                | `$button-border-width`                | `var(--bulma-control-border-width)`                                                   |
+| `--bulma-button-padding-vertical`            | `$button-padding-vertical`            | `0.5em`                                                                               |
+| `--bulma-button-padding-horizontal`          | `$button-padding-horizontal`          | `1em`                                                                                 |
+| `--bulma-button-focus-border-color`          | `$button-focus-border-color`          | `var(--bulma-link-focus-border)`                                                      |
+| `--bulma-button-focus-box-shadow-size`       | `$button-focus-box-shadow-size`       | `0 0 0 0.125em`                                                                       |
+| `--bulma-button-focus-box-shadow-color`      | `$button-focus-box-shadow-color`      | `hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-on-scheme-l), 0.25)` |
+| `--bulma-button-active-color`                | `$button-active-color`                | `var(--bulma-link-active)`                                                            |
+| `--bulma-button-active-border-color`         | `$button-active-border-color`         | `var(--bulma-link-active-border)`                                                     |
+| `--bulma-button-text-color`                  | `$button-text-color`                  | `var(--bulma-text)`                                                                   |
+| `--bulma-button-text-decoration`             | `$button-text-decoration`             | `underline`                                                                           |
+| `--bulma-button-text-hover-background-color` | `$button-text-hover-background-color` | `var(--bulma-background)`                                                             |
+| `--bulma-button-text-hover-color`            | `$button-text-hover-color`            | `var(--bulma-text-strong)`                                                            |
+| `--bulma-button-ghost-background`            | `$button-ghost-background`            | `none`                                                                                |
+| `--bulma-button-ghost-border-color`          | `$button-ghost-border-color`          | `transparent`                                                                         |
+| `--bulma-button-ghost-color`                 | `$button-ghost-color`                 | `var(--bulma-link-text)`                                                              |
+| `--bulma-button-ghost-decoration`            | `$button-ghost-decoration`            | `none`                                                                                |
+| `--bulma-button-ghost-hover-color`           | `$button-ghost-hover-color`           | `var(--bulma-link)`                                                                   |
+| `--bulma-button-ghost-hover-decoration`      | `$button-ghost-hover-decoration`      | `underline`                                                                           |
+| `--bulma-button-disabled-background-color`   | `$button-disabled-background-color`   | `var(--bulma-scheme-main)`                                                            |
+| `--bulma-button-disabled-border-color`       | `$button-disabled-border-color`       | `var(--bulma-border)`                                                                 |
+| `--bulma-button-disabled-shadow`             | `$button-disabled-shadow`             | `none`                                                                                |
+| `--bulma-button-disabled-opacity`            | `$button-disabled-opacity`            | `0.5`                                                                                 |
+| `--bulma-button-static-color`                | `$button-static-color`                | `var(--bulma-text-weak)`                                                              |
+| `--bulma-button-static-background-color`     | `$button-static-background-color`     | `var(--bulma-scheme-main-ter)`                                                        |
+| `--bulma-button-static-border-color`         | `$button-static-border-color`         | `var(--bulma-border)`                                                                 |
+| `--bulma-button-h`                           | `$button-h`                           | `var(--bulma-scheme-h)`                                                               |
+| `--bulma-button-s`                           | `$button-s`                           | `var(--bulma-scheme-s)`                                                               |
+| `--bulma-button-l`                           | `$button-l`                           | `var(--bulma-scheme-main-l)`                                                          |
+| `--bulma-button-background-l`                | `$button-background-l`                | `var(--bulma-scheme-main-l)`                                                          |
+| `--bulma-button-background-l-delta`          | `$button-background-l-delta`          | `0%`                                                                                  |
+| `--bulma-button-hover-background-l-delta`    | `$button-hover-background-l-delta`    | `var(--bulma-hover-background-l-delta)`                                               |
+| `--bulma-button-active-background-l-delta`   | `$button-active-background-l-delta`   | `var(--bulma-active-background-l-delta)`                                              |
+| `--bulma-button-color-l`                     | `$button-color-l`                     | `var(--bulma-text-strong-l)`                                                          |
+| `--bulma-button-border-l`                    | `$button-border-l`                    | `var(--bulma-border-l)`                                                               |
+| `--bulma-button-border-l-delta`              | `$button-border-l-delta`              | `0%`                                                                                  |
+| `--bulma-button-hover-border-l-delta`        | `$button-hover-border-l-delta`        | `var(--bulma-hover-border-l-delta)`                                                   |
+| `--bulma-button-active-border-l-delta`       | `$button-active-border-l-delta`       | `var(--bulma-active-border-l-delta)`                                                  |
+| `--bulma-button-focus-border-l-delta`        | `$button-focus-border-l-delta`        | `var(--bulma-focus-border-l-delta)`                                                   |
+| `--bulma-button-outer-shadow-h`              | `$button-outer-shadow-h`              | `0`                                                                                   |
+| `--bulma-button-outer-shadow-s`              | `$button-outer-shadow-s`              | `0%`                                                                                  |
+| `--bulma-button-outer-shadow-l`              | `$button-outer-shadow-l`              | `20%`                                                                                 |
+| `--bulma-button-outer-shadow-a`              | `$button-outer-shadow-a`              | `0.05`                                                                                |
+| `--bulma-loading-color`                      | —                                     | `hsl(var(--bulma-button-h), var(--bulma-button-s), var(--bulma-button-color-l))`      |
+
+<!-- /bestax:generated cssvars -->
diff --git a/docs/docs/api/elements/buttons.md b/docs/docs/api/elements/buttons.md
index 55322729f..3e97e01da 100644
--- a/docs/docs/api/elements/buttons.md
+++ b/docs/docs/api/elements/buttons.md
@@ -1,13 +1,20 @@
 ---
 title: Buttons
 sidebar_label: Buttons
+description: The `Buttons` component lets you group multiple `Button` elements together with Bulma's spacing, alignment, and add-on features.
 ---
 
 # Buttons
 
 ## Overview
 
-The `Buttons` component lets you group multiple `Button` elements together with Bulma's spacing, alignment, and add-on features. It's ideal for toolbars, button clusters, or any UI where you want a consistent group of buttons, including add-on styling, centering, or right alignment.
+<!-- bestax:generated overview -->
+
+The `Buttons` component lets you group multiple `Button` elements together with Bulma's spacing, alignment, and add-on features.
+
+<!-- /bestax:generated overview -->
+
+It's ideal for toolbars, button clusters, or any UI where you want a consistent group of buttons, including add-on styling, centering, or right alignment.
 
 :::tip
 Use the `Buttons` component to maintain Bulma's consistent button group layout and spacing in your UI.
@@ -17,25 +24,13 @@ Use the `Buttons` component to maintain Bulma's consistent button group layout a
 
 ## Import
 
+<!-- bestax:generated import -->
+
 ```tsx
 import { Buttons } from '@allxsmith/bestax-bulma';
 ```
 
----
-
-## Props
-
-| Prop         | Type                                                                                                                                                                                                                                                                                     | Default | Description                                                      |
-| ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------- |
-| `className`  | `string`                                                                                                                                                                                                                                                                                 | —       | Additional CSS classes.                                          |
-| `textColor`  | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` \| `'black'` \| `'black-bis'` \| `'black-ter'` \| `'grey-darker'` \| `'grey-dark'` \| `'grey'` \| `'grey-light'` \| `'grey-lighter'` \| `'white'` \| `'light'` \| `'dark'` \| `'inherit'` \| `'current'` | —       | Text color helper for the button group.                          |
-| `color`      | `'primary' \| 'link' \| 'info' \| 'success' \| 'warning' \| 'danger'`                                                                                                                                                                                                                    | —       | Bulma color modifier for the button group.                       |
-| `bgColor`    | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` \| `'black'` \| `'black-bis'` \| `'black-ter'` \| `'grey-darker'` \| `'grey-dark'` \| `'grey'` \| `'grey-light'` \| `'grey-lighter'` \| `'white'` \| `'light'` \| `'dark'` \| `'inherit'` \| `'current'` | —       | Background color helper for the button group.                    |
-| `isCentered` | `boolean`                                                                                                                                                                                                                                                                                | `false` | Center the group of buttons.                                     |
-| `isRight`    | `boolean`                                                                                                                                                                                                                                                                                | `false` | Align the group of buttons to the right.                         |
-| `hasAddons`  | `boolean`                                                                                                                                                                                                                                                                                | `false` | Group buttons together as addons (removes spacing between them). |
-| `children`   | `React.ReactNode`                                                                                                                                                                                                                                                                        | —       | The button elements to render inside the group.                  |
-| ...          | All standard `<div>` and Bulma helper props                                                                                                                                                                                                                                              |         | (See [Helper Props](../helpers/usebulmaclasses))                 |
+<!-- /bestax:generated import -->
 
 ---
 
@@ -154,3 +149,28 @@ You can use all Bulma helper props (spacing, color, alignment) with `Buttons` fo
 
 - [Bulma Button Group Documentation](https://bulma.io/documentation/elements/button/#group)
 - [Storybook: Button Stories](https://bestax.io/storybook/?path=/story/elements-button--default)
+
+---
+
+## Props
+
+<!-- bestax:generated props -->
+
+| Prop         | Type                                                                            | Default | Description                                                      |
+| ------------ | ------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------- |
+| `className`  | `string`                                                                        | —       | Additional CSS classes to apply.                                 |
+| `textColor`  | [Bulma color](../helpers/valid-values.md) \| `'inherit'` \| `'current'`         | —       | Text color helper for the button group.                          |
+| `color`      | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` | —       | Bulma color modifier for the button group.                       |
+| `bgColor`    | [Bulma color](../helpers/valid-values.md) \| `'inherit'` \| `'current'`         | —       | Background color helper for the button group.                    |
+| `isCentered` | `boolean`                                                                       | `false` | Center the group of buttons.                                     |
+| `isRight`    | `boolean`                                                                       | `false` | Align the group of buttons to the right.                         |
+| `hasAddons`  | `boolean`                                                                       | `false` | Group buttons together as addons (removes spacing between them). |
+| `children`   | `React.ReactNode`                                                               | —       | The button elements to render inside the group.                  |
+| `...`        | All standard `<div>` attributes and Bulma helper props                          | —       | See [Helper Props](../helpers/usebulmaclasses.md)                |
+
+**Subcomponents:**
+
+- [`Buttons.Button`](button.md): The `Button` component provides a flexible and highly customizable button for your Bulma React UI.
+- [`Buttons.LinkButton`](linkbutton.md): The `LinkButton` component renders a `<button>` that visually looks like text or a link.
+
+<!-- /bestax:generated props -->
diff --git a/docs/docs/api/elements/code.md b/docs/docs/api/elements/code.md
index e12271ebb..24d4a4ee0 100644
--- a/docs/docs/api/elements/code.md
+++ b/docs/docs/api/elements/code.md
@@ -1,13 +1,20 @@
 ---
 title: Code
 sidebar_label: Code
+description: The `Code` component renders a styled `<code>` element with Bulma helper class integration.
 ---
 
 # Code
 
 ## Overview
 
-The `Code` component renders a styled `<code>` element with Bulma helper class integration. Use it for inline code snippets, variable names, function names, file paths, or any short technical content that should be displayed in a monospace font.
+<!-- bestax:generated overview -->
+
+The `Code` component renders a styled `<code>` element with Bulma helper class integration.
+
+<!-- /bestax:generated overview -->
+
+Use it for inline code snippets, variable names, function names, file paths, or any short technical content that should be displayed in a monospace font.
 
 :::info
 For multi-line code blocks, use the `Pre` component instead, optionally with a `Code` component inside it.
@@ -17,21 +24,13 @@ For multi-line code blocks, use the `Pre` component instead, optionally with a `
 
 ## Import
 
+<!-- bestax:generated import -->
+
 ```tsx
 import { Code } from '@allxsmith/bestax-bulma';
 ```
 
----
-
-## Props
-
-| Prop        | Type                                                                                                                                                                                                                                                                                     | Default | Description                                      |
-| ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------ |
-| `className` | `string`                                                                                                                                                                                                                                                                                 | —       | Additional CSS classes.                          |
-| `textColor` | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` \| `'black'` \| `'black-bis'` \| `'black-ter'` \| `'grey-darker'` \| `'grey-dark'` \| `'grey'` \| `'grey-light'` \| `'grey-lighter'` \| `'white'` \| `'light'` \| `'dark'` \| `'inherit'` \| `'current'` | —       | Text color helper.                               |
-| `bgColor`   | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` \| `'black'` \| `'black-bis'` \| `'black-ter'` \| `'grey-darker'` \| `'grey-dark'` \| `'grey'` \| `'grey-light'` \| `'grey-lighter'` \| `'white'` \| `'light'` \| `'dark'` \| `'inherit'` \| `'current'` | —       | Background color helper.                         |
-| `children`  | `React.ReactNode`                                                                                                                                                                                                                                                                        | —       | Code content to render inside the element.       |
-| ...         | All standard `<code>` and Bulma helper props                                                                                                                                                                                                                                             |         | (See [Helper Props](../helpers/usebulmaclasses)) |
+<!-- /bestax:generated import -->
 
 ---
 
@@ -156,3 +155,36 @@ Use `Code` for short inline snippets. For multi-line code blocks that need to pr
 
 - [MDN: code element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code)
 - [Storybook: Code Stories](https://bestax.io/storybook/?path=/story/elements-code--default)
+
+---
+
+## Props
+
+<!-- bestax:generated props -->
+
+| Prop        | Type                                                                    | Default | Description                                       |
+| ----------- | ----------------------------------------------------------------------- | ------- | ------------------------------------------------- |
+| `className` | `string`                                                                | —       | Additional CSS classes to apply.                  |
+| `textColor` | [Bulma color](../helpers/valid-values.md) \| `'inherit'` \| `'current'` | —       | Text color helper.                                |
+| `bgColor`   | [Bulma color](../helpers/valid-values.md) \| `'inherit'` \| `'current'` | —       | Background color helper.                          |
+| `children`  | `React.ReactNode`                                                       | —       | Code content to render inside the element.        |
+| `...`       | All standard HTML attributes and Bulma helper props                     | —       | See [Helper Props](../helpers/usebulmaclasses.md) |
+
+<!-- /bestax:generated props -->
+
+---
+
+## CSS & Sass Variables
+
+<!-- bestax:generated cssvars -->
+
+Bulma declares these variables globally rather than on `Code`'s own element, so the defaults come from the theme. Override them anywhere above the component — on the element itself (via `className`/`style`) for a one-off, or on `:root` to retheme every instance. See [Theme](../helpers/theme.md).
+
+| CSS Variable           | Sass Variable   | Default                    |
+| ---------------------- | --------------- | -------------------------- |
+| `--bulma-code-family`  | `$code-family`  | `var(--bulma-family-code)` |
+| `--bulma-code-padding` | `$code-padding` | `0.25em 0.5em 0.25em`      |
+| `--bulma-code-weight`  | `$code-weight`  | `normal`                   |
+| `--bulma-code-size`    | `$code-size`    | `0.875em`                  |
+
+<!-- /bestax:generated cssvars -->
diff --git a/docs/docs/api/elements/content.md b/docs/docs/api/elements/content.md
index eb29df525..59e887b43 100644
--- a/docs/docs/api/elements/content.md
+++ b/docs/docs/api/elements/content.md
@@ -1,13 +1,20 @@
 ---
 title: Content
 sidebar_label: Content
+description: The `Content` component applies Bulma’s typographic styles to its children, enhancing the appearance of HTML elements like paragraphs, headings, lists, and tables.
 ---
 
 # Content
 
 ## Overview
 
-The `Content` component applies Bulma’s typographic styles to its children, enhancing the appearance of HTML elements like paragraphs, headings, lists, and tables. It supports Bulma size modifiers and helper classes for color, alignment, spacing, and more, making it ideal for rendering rich or markdown-like HTML content.
+<!-- bestax:generated overview -->
+
+The `Content` component applies Bulma’s typographic styles to its children, enhancing the appearance of HTML elements like paragraphs, headings, lists, and tables.
+
+<!-- /bestax:generated overview -->
+
+It supports Bulma size modifiers and helper classes for color, alignment, spacing, and more, making it ideal for rendering rich or markdown-like HTML content.
 
 :::info
 The `Content` component is perfect for displaying user-generated content, documentation, or any HTML you want styled consistently.
@@ -17,23 +24,13 @@ The `Content` component is perfect for displaying user-generated content, docume
 
 ## Import
 
+<!-- bestax:generated import -->
+
 ```tsx
 import { Content } from '@allxsmith/bestax-bulma';
 ```
 
----
-
-## Props
-
-| Prop        | Type                                                                                                                                                                                                                                                                                     | Default | Description                                                         |
-| ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------- |
-| `className` | `string`                                                                                                                                                                                                                                                                                 | —       | Additional CSS classes.                                             |
-| `textColor` | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` \| `'black'` \| `'black-bis'` \| `'black-ter'` \| `'grey-darker'` \| `'grey-dark'` \| `'grey'` \| `'grey-light'` \| `'grey-lighter'` \| `'white'` \| `'light'` \| `'dark'` \| `'inherit'` \| `'current'` | —       | Text color helper (e.g., `'danger'` for `has-text-danger`).         |
-| `color`     | `'primary' \| 'link' \| 'info' \| 'success' \| 'warning' \| 'danger'`                                                                                                                                                                                                                    | —       | Bulma color modifier for the content.                               |
-| `bgColor`   | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` \| `'black'` \| `'black-bis'` \| `'black-ter'` \| `'grey-darker'` \| `'grey-dark'` \| `'grey'` \| `'grey-light'` \| `'grey-lighter'` \| `'white'` \| `'light'` \| `'dark'` \| `'inherit'` \| `'current'` | —       | Background color helper (e.g., `'info'` for `has-background-info`). |
-| `size`      | `'small' \| 'normal' \| 'medium' \| 'large'`                                                                                                                                                                                                                                             | —       | Size modifier for the content.                                      |
-| `children`  | `React.ReactNode`                                                                                                                                                                                                                                                                        | —       | Content to be rendered inside the block.                            |
-| ...         | All standard `<div>` and Bulma helper props                                                                                                                                                                                                                                              |         | (See [Helper Props](../helpers/usebulmaclasses))                    |
+<!-- /bestax:generated import -->
 
 ---
 
@@ -204,3 +201,51 @@ The `Content` component does not add ARIA roles. You are responsible for semanti
 :::info
 Use `Content` for any rich HTML or markdown output to ensure consistent Bulma styling.
 :::
+
+---
+
+## Props
+
+<!-- bestax:generated props -->
+
+| Prop        | Type                                                                            | Default | Description                                                         |
+| ----------- | ------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------- |
+| `className` | `string`                                                                        | —       | Additional CSS classes to apply.                                    |
+| `textColor` | [Bulma color](../helpers/valid-values.md) \| `'inherit'` \| `'current'`         | —       | Text color helper (e.g., `'danger'` for `has-text-danger`).         |
+| `color`     | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` | —       | Bulma color modifier for the content.                               |
+| `bgColor`   | [Bulma color](../helpers/valid-values.md) \| `'inherit'` \| `'current'`         | —       | Background color helper (e.g., `'info'` for `has-background-info`). |
+| `size`      | `'small'` \| `'normal'` \| `'medium'` \| `'large'`                              | —       | Size modifier for the content.                                      |
+| `children`  | `React.ReactNode`                                                               | —       | Content to be rendered inside the block.                            |
+| `...`       | All standard `<div>` attributes and Bulma helper props                          | —       | See [Helper Props](../helpers/usebulmaclasses.md)                   |
+
+<!-- /bestax:generated props -->
+
+---
+
+## CSS & Sass Variables
+
+<!-- bestax:generated cssvars -->
+
+`Content` registers these variables on its own `.content` element. Override them there (or via `className`) — a value set on an ancestor is only inherited, and loses to the component-level declaration. See [Theme](../helpers/theme.md).
+
+| CSS Variable                                                   | Sass Variable                                           | Default                         |
+| -------------------------------------------------------------- | ------------------------------------------------------- | ------------------------------- |
+| `--bulma-content-heading-color`                                | `$content-heading-color`                                | `var(--bulma-text-strong)`      |
+| `--bulma-content-heading-weight`                               | `$content-heading-weight`                               | `var(--bulma-weight-extrabold)` |
+| `--bulma-content-heading-line-height`                          | `$content-heading-line-height`                          | `1.125`                         |
+| `--bulma-content-block-margin-bottom`                          | `$content-block-margin-bottom`                          | `1em`                           |
+| `--bulma-content-blockquote-background-color`                  | `$content-blockquote-background-color`                  | `var(--bulma-background)`       |
+| `--bulma-content-blockquote-border-left`                       | `$content-blockquote-border-left`                       | `5px solid var(--bulma-border)` |
+| `--bulma-content-blockquote-padding`                           | `$content-blockquote-padding`                           | `1.25em 1.5em`                  |
+| `--bulma-content-pre-padding`                                  | `$content-pre-padding`                                  | `1.25em 1.5em`                  |
+| `--bulma-content-table-cell-border`                            | `$content-table-cell-border`                            | `1px solid var(--bulma-border)` |
+| `--bulma-content-table-cell-border-width`                      | `$content-table-cell-border-width`                      | `0 0 1px`                       |
+| `--bulma-content-table-cell-padding`                           | `$content-table-cell-padding`                           | `0.5em 0.75em`                  |
+| `--bulma-content-table-cell-heading-color`                     | `$content-table-cell-heading-color`                     | `var(--bulma-text-strong)`      |
+| `--bulma-content-table-head-cell-border-width`                 | `$content-table-head-cell-border-width`                 | `0 0 2px`                       |
+| `--bulma-content-table-head-cell-color`                        | `$content-table-head-cell-color`                        | `var(--bulma-text-strong)`      |
+| `--bulma-content-table-body-last-row-cell-border-bottom-width` | `$content-table-body-last-row-cell-border-bottom-width` | `0`                             |
+| `--bulma-content-table-foot-cell-border-width`                 | `$content-table-foot-cell-border-width`                 | `2px 0 0`                       |
+| `--bulma-content-table-foot-cell-color`                        | `$content-table-foot-cell-color`                        | `var(--bulma-text-strong)`      |
+
+<!-- /bestax:generated cssvars -->
diff --git a/docs/docs/api/elements/delete.md b/docs/docs/api/elements/delete.md
index 797c2cb53..20087649b 100644
--- a/docs/docs/api/elements/delete.md
+++ b/docs/docs/api/elements/delete.md
@@ -1,13 +1,20 @@
 ---
 title: Delete
 sidebar_label: Delete
+description: The `Delete` component provides a Bulma-styled close/delete button for dismissing modals, notifications, tags, messages, and more.
 ---
 
 # Delete
 
 ## Overview
 
-The `Delete` component provides a Bulma-styled close/delete button for dismissing modals, notifications, tags, messages, and more. It supports all Bulma size and color helpers, and includes accessibility best practices.
+<!-- bestax:generated overview -->
+
+The `Delete` component provides a Bulma-styled close/delete button for dismissing modals, notifications, tags, messages, and more.
+
+<!-- /bestax:generated overview -->
+
+It supports all Bulma size and color helpers, and includes accessibility best practices.
 
 :::info
 This component is ideal for adding a visually consistent, accessible close button to any Bulma-styled element.
@@ -17,25 +24,13 @@ This component is ideal for adding a visually consistent, accessible close butto
 
 ## Import
 
+<!-- bestax:generated import -->
+
 ```tsx
 import { Delete } from '@allxsmith/bestax-bulma';
 ```
 
----
-
-## Props
-
-| Prop        | Type                                                                                                                                                                                                                                                                                     | Default   | Description                                      |
-| ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------------------------------------------------ |
-| `className` | `string`                                                                                                                                                                                                                                                                                 | —         | Additional CSS classes.                          |
-| `textColor` | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` \| `'black'` \| `'black-bis'` \| `'black-ter'` \| `'grey-darker'` \| `'grey-dark'` \| `'grey'` \| `'grey-light'` \| `'grey-lighter'` \| `'white'` \| `'light'` \| `'dark'` \| `'inherit'` \| `'current'` | —         | Text color helper.                               |
-| `color`     | `'primary' \| 'link' \| 'info' \| 'success' \| 'warning' \| 'danger'`                                                                                                                                                                                                                    | —         | Bulma color modifier for the button.             |
-| `bgColor`   | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` \| `'black'` \| `'black-bis'` \| `'black-ter'` \| `'grey-darker'` \| `'grey-dark'` \| `'grey'` \| `'grey-light'` \| `'grey-lighter'` \| `'white'` \| `'light'` \| `'dark'` \| `'inherit'` \| `'current'` | —         | Background color helper.                         |
-| `size`      | `'small' \| 'medium' \| 'large'`                                                                                                                                                                                                                                                         | —         | Size modifier for the delete button.             |
-| `onClick`   | `(event: React.MouseEvent<HTMLButtonElement>) => void`                                                                                                                                                                                                                                   | —         | Click handler for the button.                    |
-| `ariaLabel` | `string`                                                                                                                                                                                                                                                                                 | `'Close'` | ARIA label for accessibility.                    |
-| `disabled`  | `boolean`                                                                                                                                                                                                                                                                                | `false`   | Whether the button is disabled.                  |
-| ...         | All standard `<button>` and Bulma helper props                                                                                                                                                                                                                                           |           | (See [Helper Props](../helpers/usebulmaclasses)) |
+<!-- /bestax:generated import -->
 
 ---
 
@@ -160,3 +155,40 @@ For custom close actions, use the `onClick` prop.
 
 - [Bulma Delete Documentation](https://bulma.io/documentation/elements/delete/)
 - [Storybook: Delete Stories](https://bestax.io/storybook/?path=/story/elements-delete--default)
+
+---
+
+## Props
+
+<!-- bestax:generated props -->
+
+| Prop        | Type                                                                            | Default   | Description                                       |
+| ----------- | ------------------------------------------------------------------------------- | --------- | ------------------------------------------------- |
+| `className` | `string`                                                                        | —         | Additional CSS classes to apply.                  |
+| `textColor` | [Bulma color](../helpers/valid-values.md) \| `'inherit'` \| `'current'`         | —         | Text color helper.                                |
+| `color`     | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` | —         | Bulma color modifier for the button.              |
+| `bgColor`   | [Bulma color](../helpers/valid-values.md) \| `'inherit'` \| `'current'`         | —         | Background color helper.                          |
+| `onClick`   | `(event: React.MouseEvent<HTMLButtonElement>) => void`                          | —         | Click handler for the button.                     |
+| `size`      | `'small'` \| `'medium'` \| `'large'`                                            | —         | Size modifier for the delete button.              |
+| `ariaLabel` | `string`                                                                        | `'Close'` | ARIA label for accessibility (default: 'Close').  |
+| `disabled`  | `boolean`                                                                       | `false`   | Whether the button is disabled (default: false).  |
+| `...`       | All standard `<button>` attributes and Bulma helper props                       | —         | See [Helper Props](../helpers/usebulmaclasses.md) |
+
+<!-- /bestax:generated props -->
+
+---
+
+## CSS & Sass Variables
+
+<!-- bestax:generated cssvars -->
+
+Bulma declares these variables globally rather than on `Delete`'s own element, so the defaults come from the theme. Override them anywhere above the component — on the element itself (via `className`/`style`) for a one-off, or on `:root` to retheme every instance. See [Theme](../helpers/theme.md).
+
+| CSS Variable                      | Sass Variable | Default              |
+| --------------------------------- | ------------- | -------------------- |
+| `--bulma-delete-dimensions`       | —             | `1.25rem`            |
+| `--bulma-delete-background-l`     | —             | `0%`                 |
+| `--bulma-delete-background-alpha` | —             | `0.5`                |
+| `--bulma-delete-color`            | —             | `var(--bulma-white)` |
+
+<!-- /bestax:generated cssvars -->
diff --git a/docs/docs/api/elements/divider.md b/docs/docs/api/elements/divider.md
index 0b558a553..cc824b1b5 100644
--- a/docs/docs/api/elements/divider.md
+++ b/docs/docs/api/elements/divider.md
@@ -1,13 +1,20 @@
 ---
 title: Divider
 sidebar_label: Divider
+description: The `Divider` component renders a styled horizontal rule (`<hr>`) element with Bulma helper class integration.
 ---
 
 # Divider
 
 ## Overview
 
-The `Divider` component renders a styled horizontal rule (`<hr>`) element with Bulma helper class integration. Use it to visually separate content sections with a clean horizontal line.
+<!-- bestax:generated overview -->
+
+The `Divider` component renders a styled horizontal rule (`<hr>`) element with Bulma helper class integration.
+
+<!-- /bestax:generated overview -->
+
+Use it to visually separate content sections with a clean horizontal line.
 
 :::info
 The Divider component is a thin wrapper around the HTML `<hr>` element, providing consistent Bulma styling and helper class support.
@@ -17,19 +24,13 @@ The Divider component is a thin wrapper around the HTML `<hr>` element, providin
 
 ## Import
 
+<!-- bestax:generated import -->
+
 ```tsx
 import { Divider } from '@allxsmith/bestax-bulma';
 ```
 
----
-
-## Props
-
-| Prop        | Type                                                                                                                                                                                                                                                                                     | Default | Description                                      |
-| ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------ |
-| `className` | `string`                                                                                                                                                                                                                                                                                 | —       | Additional CSS classes.                          |
-| `bgColor`   | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` \| `'black'` \| `'black-bis'` \| `'black-ter'` \| `'grey-darker'` \| `'grey-dark'` \| `'grey'` \| `'grey-light'` \| `'grey-lighter'` \| `'white'` \| `'light'` \| `'dark'` \| `'inherit'` \| `'current'` | —       | Background color helper.                         |
-| ...         | All standard `<hr>` and Bulma helper props                                                                                                                                                                                                                                               |         | (See [Helper Props](../helpers/usebulmaclasses)) |
+<!-- /bestax:generated import -->
 
 ---
 
@@ -136,3 +137,17 @@ Use dividers for thematic breaks between content sections, not just for visual s
 
 - [MDN: hr element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr)
 - [Storybook: Divider Stories](https://bestax.io/storybook/?path=/story/elements-divider--default)
+
+---
+
+## Props
+
+<!-- bestax:generated props -->
+
+| Prop        | Type                                                                    | Default | Description                                       |
+| ----------- | ----------------------------------------------------------------------- | ------- | ------------------------------------------------- |
+| `className` | `string`                                                                | —       | Additional CSS classes to apply.                  |
+| `bgColor`   | [Bulma color](../helpers/valid-values.md) \| `'inherit'` \| `'current'` | —       | Background color helper.                          |
+| `...`       | All standard `<hr>` attributes and Bulma helper props                   | —       | See [Helper Props](../helpers/usebulmaclasses.md) |
+
+<!-- /bestax:generated props -->
diff --git a/docs/docs/api/elements/emphasis.md b/docs/docs/api/elements/emphasis.md
index 7ff1751b8..52f1e90a7 100644
--- a/docs/docs/api/elements/emphasis.md
+++ b/docs/docs/api/elements/emphasis.md
@@ -1,13 +1,20 @@
 ---
 title: Emphasis
 sidebar_label: Emphasis
+description: The `Emphasis` component renders a styled `<em>` element with Bulma helper class integration.
 ---
 
 # Emphasis
 
 ## Overview
 
-The `Emphasis` component renders a styled `<em>` element with Bulma helper class integration. Use it for text that has stress emphasis, which subtly changes the meaning of a sentence. The `<em>` element carries semantic meaning for screen readers.
+<!-- bestax:generated overview -->
+
+The `Emphasis` component renders a styled `<em>` element with Bulma helper class integration.
+
+<!-- /bestax:generated overview -->
+
+Use it for text that has stress emphasis, which subtly changes the meaning of a sentence. The `<em>` element carries semantic meaning for screen readers.
 
 :::info
 For visual-only italic styling without semantic meaning, use CSS `font-style: italic` instead.
@@ -17,21 +24,13 @@ For visual-only italic styling without semantic meaning, use CSS `font-style: it
 
 ## Import
 
+<!-- bestax:generated import -->
+
 ```tsx
 import { Emphasis } from '@allxsmith/bestax-bulma';
 ```
 
----
-
-## Props
-
-| Prop        | Type                                                                                                                                                                                                                                                                                     | Default | Description                                      |
-| ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------ |
-| `className` | `string`                                                                                                                                                                                                                                                                                 | —       | Additional CSS classes.                          |
-| `textColor` | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` \| `'black'` \| `'black-bis'` \| `'black-ter'` \| `'grey-darker'` \| `'grey-dark'` \| `'grey'` \| `'grey-light'` \| `'grey-lighter'` \| `'white'` \| `'light'` \| `'dark'` \| `'inherit'` \| `'current'` | —       | Text color helper.                               |
-| `bgColor`   | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` \| `'black'` \| `'black-bis'` \| `'black-ter'` \| `'grey-darker'` \| `'grey-dark'` \| `'grey'` \| `'grey-light'` \| `'grey-lighter'` \| `'white'` \| `'light'` \| `'dark'` \| `'inherit'` \| `'current'` | —       | Background color helper.                         |
-| `children`  | `React.ReactNode`                                                                                                                                                                                                                                                                        | —       | Content to render inside the em element.         |
-| ...         | All standard `<em>` and Bulma helper props                                                                                                                                                                                                                                               |         | (See [Helper Props](../helpers/usebulmaclasses)) |
+<!-- /bestax:generated import -->
 
 ---
 
@@ -145,3 +144,19 @@ The `<em>` element indicates stress emphasis that subtly changes the meaning of
 
 - [MDN: em element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em)
 - [Storybook: Emphasis Stories](https://bestax.io/storybook/?path=/story/elements-emphasis--default)
+
+---
+
+## Props
+
+<!-- bestax:generated props -->
+
+| Prop        | Type                                                                    | Default | Description                                       |
+| ----------- | ----------------------------------------------------------------------- | ------- | ------------------------------------------------- |
+| `className` | `string`                                                                | —       | Additional CSS classes to apply.                  |
+| `textColor` | [Bulma color](../helpers/valid-values.md) \| `'inherit'` \| `'current'` | —       | Text color helper.                                |
+| `bgColor`   | [Bulma color](../helpers/valid-values.md) \| `'inherit'` \| `'current'` | —       | Background color helper.                          |
+| `children`  | `React.ReactNode`                                                       | —       | Content to render inside the em element.          |
+| `...`       | All standard HTML attributes and Bulma helper props                     | —       | See [Helper Props](../helpers/usebulmaclasses.md) |
+
+<!-- /bestax:generated props -->
diff --git a/docs/docs/api/elements/figure.md b/docs/docs/api/elements/figure.md
index 9cdb00147..c1bde7862 100644
--- a/docs/docs/api/elements/figure.md
+++ b/docs/docs/api/elements/figure.md
@@ -1,13 +1,20 @@
 ---
 title: Figure
 sidebar_label: Figure
+description: The `Figure` component renders a styled `<figure>` element with Bulma helper class integration.
 ---
 
 # Figure
 
 ## Overview
 
-The `Figure` component renders a styled `<figure>` element with Bulma helper class integration. Use it to group self-contained content like images, illustrations, diagrams, or code snippets with an optional caption via `Figure.Caption`.
+<!-- bestax:generated overview -->
+
+The `Figure` component renders a styled `<figure>` element with Bulma helper class integration.
+
+<!-- /bestax:generated overview -->
+
+Use it to group self-contained content like images, illustrations, diagrams, or code snippets with an optional caption via `Figure.Caption`.
 
 :::info
 The Figure component is a thin wrapper around the HTML `<figure>` element with a `Figure.Caption` subcomponent for `<figcaption>`.
@@ -17,33 +24,13 @@ The Figure component is a thin wrapper around the HTML `<figure>` element with a
 
 ## Import
 
+<!-- bestax:generated import -->
+
 ```tsx
 import { Figure } from '@allxsmith/bestax-bulma';
 ```
 
----
-
-## Props
-
-### Figure Props
-
-| Prop        | Type                                                                                                                                                                                                                                                                                     | Default | Description                                      |
-| ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------ |
-| `className` | `string`                                                                                                                                                                                                                                                                                 | —       | Additional CSS classes.                          |
-| `textColor` | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` \| `'black'` \| `'black-bis'` \| `'black-ter'` \| `'grey-darker'` \| `'grey-dark'` \| `'grey'` \| `'grey-light'` \| `'grey-lighter'` \| `'white'` \| `'light'` \| `'dark'` \| `'inherit'` \| `'current'` | —       | Text color helper.                               |
-| `bgColor`   | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` \| `'black'` \| `'black-bis'` \| `'black-ter'` \| `'grey-darker'` \| `'grey-dark'` \| `'grey'` \| `'grey-light'` \| `'grey-lighter'` \| `'white'` \| `'light'` \| `'dark'` \| `'inherit'` \| `'current'` | —       | Background color helper.                         |
-| `children`  | `React.ReactNode`                                                                                                                                                                                                                                                                        | —       | Content to render inside the figure.             |
-| ...         | All standard `<figure>` and Bulma helper props                                                                                                                                                                                                                                           |         | (See [Helper Props](../helpers/usebulmaclasses)) |
-
-### Figure.Caption Props
-
-| Prop        | Type                                                                                                                                                                                                                                                                                     | Default | Description                                      |
-| ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------ |
-| `className` | `string`                                                                                                                                                                                                                                                                                 | —       | Additional CSS classes.                          |
-| `textColor` | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` \| `'black'` \| `'black-bis'` \| `'black-ter'` \| `'grey-darker'` \| `'grey-dark'` \| `'grey'` \| `'grey-light'` \| `'grey-lighter'` \| `'white'` \| `'light'` \| `'dark'` \| `'inherit'` \| `'current'` | —       | Text color helper.                               |
-| `bgColor`   | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` \| `'black'` \| `'black-bis'` \| `'black-ter'` \| `'grey-darker'` \| `'grey-dark'` \| `'grey'` \| `'grey-light'` \| `'grey-lighter'` \| `'white'` \| `'light'` \| `'dark'` \| `'inherit'` \| `'current'` | —       | Background color helper.                         |
-| `children`  | `React.ReactNode`                                                                                                                                                                                                                                                                        | —       | Caption text to render.                          |
-| ...         | All standard `<figcaption>` and Bulma helper props                                                                                                                                                                                                                                       |         | (See [Helper Props](../helpers/usebulmaclasses)) |
+<!-- /bestax:generated import -->
 
 ---
 
@@ -163,3 +150,35 @@ The `<figure>` element is ideal for images, illustrations, diagrams, code listin
 - [MDN: figure element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure)
 - [MDN: figcaption element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption)
 - [Storybook: Figure Stories](https://bestax.io/storybook/?path=/story/elements-figure--default)
+
+---
+
+## Props
+
+### Figure Props
+
+<!-- bestax:generated props -->
+
+| Prop        | Type                                                                    | Default | Description                                       |
+| ----------- | ----------------------------------------------------------------------- | ------- | ------------------------------------------------- |
+| `className` | `string`                                                                | —       | Additional CSS classes to apply.                  |
+| `textColor` | [Bulma color](../helpers/valid-values.md) \| `'inherit'` \| `'current'` | —       | Text color helper.                                |
+| `bgColor`   | [Bulma color](../helpers/valid-values.md) \| `'inherit'` \| `'current'` | —       | Background color helper.                          |
+| `children`  | `React.ReactNode`                                                       | —       | Content to render inside the figure.              |
+| `...`       | All standard HTML attributes and Bulma helper props                     | —       | See [Helper Props](../helpers/usebulmaclasses.md) |
+
+**Subcomponents:**
+
+- `Figure.Caption`: FigureCaption component for rendering a styled figcaption element. A FigureCaption wraps the HTML `<figcaption>` element with Bulma helper class integration. Use it inside Figure components to provide captions for images or other media.
+
+### Figure.Caption
+
+| Prop        | Type                                                                    | Default | Description                                              |
+| ----------- | ----------------------------------------------------------------------- | ------- | -------------------------------------------------------- |
+| `className` | `string`                                                                | —       | Additional CSS classes to apply.                         |
+| `textColor` | [Bulma color](../helpers/valid-values.md) \| `'inherit'` \| `'current'` | —       | Text color (Bulma color, 'inherit', or 'current').       |
+| `bgColor`   | [Bulma color](../helpers/valid-values.md) \| `'inherit'` \| `'current'` | —       | Background color (Bulma color, 'inherit', or 'current'). |
+| `children`  | `React.ReactNode`                                                       | —       | Content to be rendered inside the figcaption.            |
+| `...`       | All standard HTML attributes and Bulma helper props                     | —       | See [Helper Props](../helpers/usebulmaclasses.md)        |
+
+<!-- /bestax:generated props -->
diff --git a/docs/docs/api/elements/icon.md b/docs/docs/api/elements/icon.md
index 6904a40f8..5a62ac1d4 100644
--- a/docs/docs/api/elements/icon.md
+++ b/docs/docs/api/elements/icon.md
@@ -1,13 +1,20 @@
 ---
 title: Icon
 sidebar_label: Icon
+description: The `Icon` component is a Bulma-styled wrapper for displaying icons from various libraries (Font Awesome, Material Design Icons, Ionicons, Google Material Icons, Material Symbols, etc.).
 ---
 
 # Icon
 
 ## Overview
 
-The `Icon` component is a Bulma-styled wrapper for displaying icons from various libraries (Font Awesome, Material Design Icons, Ionicons, Google Material Icons, Material Symbols, etc.). It handles Bulma sizing, colors, helper props, and accessibility. You can use it standalone or inside other components (like `Button`, `Tag`, or `IconText`).
+<!-- bestax:generated overview -->
+
+The `Icon` component is a Bulma-styled wrapper for displaying icons from various libraries (Font Awesome, Material Design Icons, Ionicons, Google Material Icons, Material Symbols, etc.).
+
+<!-- /bestax:generated overview -->
+
+It handles Bulma sizing, colors, helper props, and accessibility. You can use it standalone or inside other components (like `Button`, `Tag`, or `IconText`).
 
 :::info
 Font Awesome is the default icon library, but you can use Material Design Icons, Ionicons, Google Material Icons, or Material Symbols by changing the `library` prop. For setup instructions, see [Alternative Icons](/docs/guides/getting-started/alternative-icons).
@@ -21,30 +28,13 @@ Font Awesome is the default icon library, but you can use Material Design Icons,
 
 ## Import
 
+<!-- bestax:generated import -->
+
 ```tsx
 import { Icon } from '@allxsmith/bestax-bulma';
 ```
 
----
-
-## Props
-
-| Prop                 | Type                                                                                                                                                                                                                                                                                     | Default  | Description                                                                       |
-| -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | --------------------------------------------------------------------------------- |
-| `className`          | `string`                                                                                                                                                                                                                                                                                 | —        | Additional CSS classes.                                                           |
-| `textColor`          | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` \| `'black'` \| `'black-bis'` \| `'black-ter'` \| `'grey-darker'` \| `'grey-dark'` \| `'grey'` \| `'grey-light'` \| `'grey-lighter'` \| `'white'` \| `'light'` \| `'dark'` \| `'inherit'` \| `'current'` | —        | Text color helper.                                                                |
-| `color`              | `'primary' \| 'link' \| 'info' \| 'success' \| 'warning' \| 'danger'`                                                                                                                                                                                                                    | —        | Bulma color modifier for the icon.                                                |
-| `bgColor`            | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` \| `'black'` \| `'black-bis'` \| `'black-ter'` \| `'grey-darker'` \| `'grey-dark'` \| `'grey'` \| `'grey-light'` \| `'grey-lighter'` \| `'white'` \| `'light'` \| `'dark'` \| `'inherit'` \| `'current'` | —        | Background color helper.                                                          |
-| `name`               | `string`                                                                                                                                                                                                                                                                                 |          | The icon name, with or without its library prefix (e.g. `'star'` or `'fa-star'`). |
-| `library`            | `'fa' \| 'mdi' \| 'ion' \| 'material-icons' \| 'material-symbols'`                                                                                                                                                                                                                       | `'fa'`   | The icon library to use.                                                          |
-| `variant`            | `string`                                                                                                                                                                                                                                                                                 | —        | Icon style variant (e.g. `'solid'`, `'outlined'`, `'rounded'`).                   |
-| `features`           | `string \| string[]`                                                                                                                                                                                                                                                                     | —        | Additional modifiers (e.g. `'fa-lg'`, `'fa-spin'`, `'is-size-1'`).                |
-| `libraryFeatures`    | `string \| string[]`                                                                                                                                                                                                                                                                     | —        | **DEPRECATED:** Use `variant` and `features` instead.                             |
-| `size`               | `'small' \| 'medium' \| 'large'`                                                                                                                                                                                                                                                         | —        | Size modifier for the icon container.                                             |
-| `ariaLabel`          | `string`                                                                                                                                                                                                                                                                                 | `'icon'` | ARIA label for accessibility.                                                     |
-| `style`              | `object`                                                                                                                                                                                                                                                                                 | —        | Inline style object.                                                              |
-| `containerClassName` | `string`                                                                                                                                                                                                                                                                                 | —        | Override the default `'icon'` container class (e.g., `'panel-icon'`).             |
-| ...                  | All standard `<span>` and Bulma helper props                                                                                                                                                                                                                                             |          | (See [Helper Props](../helpers/usebulmaclasses))                                  |
+<!-- /bestax:generated import -->
 
 ---
 
@@ -218,3 +208,47 @@ For purely decorative icons, you can use `aria-hidden="true"` via the `...rest`
 - [Bulma Icon Documentation](https://bulma.io/documentation/elements/icon/)
 - [Font Awesome Docs](https://fontawesome.com/docs/web/use-with/react/)
 - [Storybook: Icon Stories](https://bestax.io/storybook/?path=/story/elements-icon--default)
+
+---
+
+## Props
+
+<!-- bestax:generated props -->
+
+| Prop                 | Type                                                                            | Default  | Description                                                                                                                                                                                                                                                                   |
+| -------------------- | ------------------------------------------------------------------------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `className`          | `string`                                                                        | —        | Additional CSS classes to apply.                                                                                                                                                                                                                                              |
+| `textColor`          | [Bulma color](../helpers/valid-values.md) \| `'inherit'` \| `'current'`         | —        | Text color helper.                                                                                                                                                                                                                                                            |
+| `color`              | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` | —        | Bulma color modifier for the icon.                                                                                                                                                                                                                                            |
+| `bgColor`            | [Bulma color](../helpers/valid-values.md) \| `'inherit'` \| `'current'`         | —        | Background color helper.                                                                                                                                                                                                                                                      |
+| `name`               | `string`                                                                        | —        | The icon name, with or without its library prefix (e.g. `'star'` or `'fa-star'`).                                                                                                                                                                                             |
+| `icon`               | `string`                                                                        | —        | DEPRECATED: Legacy prop, use `name` instead.                                                                                                                                                                                                                                  |
+| `library`            | `'fa'` \| `'mdi'` \| `'ion'` \| `'material-icons'` \| `'material-symbols'`      | `'fa'`   | The icon library to use ('fa' = Font Awesome, 'mdi' = Material Design Icons, 'ion' = Ionicons Web Components, 'material-icons' = Google Material Icons, 'material-symbols' = Google Material Symbols). Defaults to the value set in ConfigProvider or 'fa' if not configured. |
+| `variant`            | `string`                                                                        | —        | Icon style variant (e.g. `'solid'`, `'outlined'`, `'rounded'`).                                                                                                                                                                                                               |
+| `features`           | `string` \| `string[]`                                                          | —        | Additional modifiers (e.g. `'fa-lg'`, `'fa-spin'`, `'is-size-1'`).                                                                                                                                                                                                            |
+| `libraryFeatures`    | `string` \| `string[]`                                                          | —        | **DEPRECATED:** Use `variant` and `features` instead.                                                                                                                                                                                                                         |
+| `size`               | `'small'` \| `'medium'` \| `'large'`                                            | —        | Size modifier for the icon container.                                                                                                                                                                                                                                         |
+| `ariaLabel`          | `string`                                                                        | `'icon'` | ARIA label for accessibility (default: 'icon').                                                                                                                                                                                                                               |
+| `style`              | `React.CSSProperties`                                                           | —        | Inline style object.                                                                                                                                                                                                                                                          |
+| `containerClassName` | `string`                                                                        | —        | Override the default `'icon'` container class (e.g., `'panel-icon'`).                                                                                                                                                                                                         |
+| `...`                | All standard `<span>` attributes and Bulma helper props                         | —        | See [Helper Props](../helpers/usebulmaclasses.md)                                                                                                                                                                                                                             |
+
+<!-- /bestax:generated props -->
+
+---
+
+## CSS & Sass Variables
+
+<!-- bestax:generated cssvars -->
+
+`Icon` registers these variables on its own `.icon` element. Override them there (or via `className`) — a value set on an ancestor is only inherited, and loses to the component-level declaration. See [Theme](../helpers/theme.md).
+
+| CSS Variable                     | Sass Variable             | Default  |
+| -------------------------------- | ------------------------- | -------- |
+| `--bulma-icon-dimensions`        | `$icon-dimensions`        | `1.5rem` |
+| `--bulma-icon-dimensions-small`  | `$icon-dimensions-small`  | `1rem`   |
+| `--bulma-icon-dimensions-medium` | `$icon-dimensions-medium` | `2rem`   |
+| `--bulma-icon-dimensions-large`  | `$icon-dimensions-large`  | `3rem`   |
+| `--bulma-icon-text-spacing`      | `$icon-text-spacing`      | `0.25em` |
+
+<!-- /bestax:generated cssvars -->
diff --git a/docs/docs/api/elements/icontext.md b/docs/docs/api/elements/icontext.md
index e2ca8ab99..0d680427f 100644
--- a/docs/docs/api/elements/icontext.md
+++ b/docs/docs/api/elements/icontext.md
@@ -1,13 +1,20 @@
 ---
 title: IconText
 sidebar_label: IconText
+description: The `IconText` component provides a Bulma-styled horizontal arrangement of one or more `Icon` components and optional text.
 ---
 
 # IconText
 
 ## Overview
 
-The `IconText` component provides a Bulma-styled horizontal arrangement of one or more `Icon` components and optional text. Use it for icon-and-label patterns, ratings, button content, or any visual+text UI. Supports all Bulma helper props for spacing, color, and layout.
+<!-- bestax:generated overview -->
+
+The `IconText` component provides a Bulma-styled horizontal arrangement of one or more `Icon` components and optional text.
+
+<!-- /bestax:generated overview -->
+
+Use it for icon-and-label patterns, ratings, button content, or any visual+text UI. Supports all Bulma helper props for spacing, color, and layout.
 
 :::tip
 Use `IconText` to keep icons and text vertically aligned and spaced, as recommended by Bulma.
@@ -17,24 +24,13 @@ Use `IconText` to keep icons and text vertically aligned and spaced, as recommen
 
 ## Import
 
+<!-- bestax:generated import -->
+
 ```tsx
 import { IconText } from '@allxsmith/bestax-bulma';
 ```
 
----
-
-## Props
-
-| Prop        | Type                                                                                                                                                                                                                                                                                     | Default | Description                                               |
-| ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------- |
-| `className` | `string`                                                                                                                                                                                                                                                                                 | —       | Additional CSS classes.                                   |
-| `textColor` | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` \| `'black'` \| `'black-bis'` \| `'black-ter'` \| `'grey-darker'` \| `'grey-dark'` \| `'grey'` \| `'grey-light'` \| `'grey-lighter'` \| `'white'` \| `'light'` \| `'dark'` \| `'inherit'` \| `'current'` | —       | Text color helper.                                        |
-| `color`     | `'primary' \| 'link' \| 'info' \| 'success' \| 'warning' \| 'danger'`                                                                                                                                                                                                                    | —       | Bulma color modifier for the icon text group.             |
-| `bgColor`   | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` \| `'black'` \| `'black-bis'` \| `'black-ter'` \| `'grey-darker'` \| `'grey-dark'` \| `'grey'` \| `'grey-light'` \| `'grey-lighter'` \| `'white'` \| `'light'` \| `'dark'` \| `'inherit'` \| `'current'` | —       | Background color helper.                                  |
-| `iconProps` | `IconProps`                                                                                                                                                                                                                                                                              | —       | Props for a single Icon component (for single icon mode). |
-| `children`  | `React.ReactNode`                                                                                                                                                                                                                                                                        | —       | Text for a single icon (for single icon mode).            |
-| `items`     | `{ iconProps: IconProps, text?: string }[]`                                                                                                                                                                                                                                              | —       | Array of icon/text pairs (for multiple icons mode).       |
-| ...         | All standard `<span>` and Bulma helper props                                                                                                                                                                                                                                             |         | (See [Helper Props](../helpers/usebulmaclasses))          |
+<!-- /bestax:generated import -->
 
 ---
 
@@ -295,3 +291,44 @@ For star ratings or icon lists, use `items` with `iconProps` and optional `text`
 
 - [Bulma IconText Documentation](https://bulma.io/documentation/elements/icon/#icon-text)
 - [Storybook: IconText Stories](https://bestax.io/storybook/?path=/story/elements-icontext--default)
+
+---
+
+## Props
+
+<!-- bestax:generated props -->
+
+| Prop        | Type                                                                            | Default | Description                                               |
+| ----------- | ------------------------------------------------------------------------------- | ------- | --------------------------------------------------------- |
+| `className` | `string`                                                                        | —       | Additional CSS classes to apply.                          |
+| `textColor` | [Bulma color](../helpers/valid-values.md) \| `'inherit'` \| `'current'`         | —       | Text color helper.                                        |
+| `color`     | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` | —       | Bulma color modifier for the icon text group.             |
+| `bgColor`   | [Bulma color](../helpers/valid-values.md) \| `'inherit'` \| `'current'`         | —       | Background color helper.                                  |
+| `iconProps` | `IconProps`                                                                     | —       | Props for a single Icon component (for single icon mode). |
+| `children`  | `React.ReactNode`                                                               | —       | Text for a single icon (for single icon mode).            |
+| `items`     | `{ iconProps: IconProps; text?: string }[]`                                     | —       | Array of icon/text pairs (for multiple icons mode).       |
+| `...`       | All standard `<span>` attributes and Bulma helper props                         | —       | See [Helper Props](../helpers/usebulmaclasses.md)         |
+
+**Subcomponents:**
+
+- [`IconText.Icon`](icon.md): The `Icon` component is a Bulma-styled wrapper for displaying icons from various libraries (Font Awesome, Material Design Icons, Ionicons, Google Material Icons, Material Symbols, etc.).
+
+<!-- /bestax:generated props -->
+
+---
+
+## CSS & Sass Variables
+
+<!-- bestax:generated cssvars -->
+
+`IconText` registers these variables on its own `.icon-text` element. Override them there (or via `className`) — a value set on an ancestor is only inherited, and loses to the component-level declaration. See [Theme](../helpers/theme.md).
+
+| CSS Variable                     | Sass Variable             | Default  |
+| -------------------------------- | ------------------------- | -------- |
+| `--bulma-icon-dimensions`        | `$icon-dimensions`        | `1.5rem` |
+| `--bulma-icon-dimensions-small`  | `$icon-dimensions-small`  | `1rem`   |
+| `--bulma-icon-dimensions-medium` | `$icon-dimensions-medium` | `2rem`   |
+| `--bulma-icon-dimensions-large`  | `$icon-dimensions-large`  | `3rem`   |
+| `--bulma-icon-text-spacing`      | `$icon-text-spacing`      | `0.25em` |
+
+<!-- /bestax:generated cssvars -->
diff --git a/docs/docs/api/elements/image.md b/docs/docs/api/elements/image.md
index 14468f784..3c5a4f1d6 100644
--- a/docs/docs/api/elements/image.md
+++ b/docs/docs/api/elements/image.md
@@ -1,14 +1,19 @@
 ---
 title: Image
 sidebar_label: Image
+description: The `Image` component wraps images, iframes, or custom content in a Bulma-styled container, supporting fixed sizes, aspect ratios, rounded corners, retina images, and all Bulma helper props for color and spacing.
 ---
 
 # Image
 
 ## Overview
 
+<!-- bestax:generated overview -->
+
 The `Image` component wraps images, iframes, or custom content in a Bulma-styled container, supporting fixed sizes, aspect ratios, rounded corners, retina images, and all Bulma helper props for color and spacing.
 
+<!-- /bestax:generated overview -->
+
 :::info
 Use `Image` for consistent responsive image containers, or to embed arbitrary media (like iframes) with Bulma styling.
 :::
@@ -17,28 +22,13 @@ Use `Image` for consistent responsive image containers, or to embed arbitrary me
 
 ## Import
 
+<!-- bestax:generated import -->
+
 ```tsx
 import { Image } from '@allxsmith/bestax-bulma';
 ```
 
----
-
-## Props
-
-| Prop        | Type                                                                                                                                                                                                                                                                                     | Default | Description                                                                                     |
-| ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------- |
-| `className` | `string`                                                                                                                                                                                                                                                                                 | —       | Additional CSS classes.                                                                         |
-| `textColor` | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` \| `'black'` \| `'black-bis'` \| `'black-ter'` \| `'grey-darker'` \| `'grey-dark'` \| `'grey'` \| `'grey-light'` \| `'grey-lighter'` \| `'white'` \| `'light'` \| `'dark'` \| `'inherit'` \| `'current'` | —       | Text color helper for the container.                                                            |
-| `color`     | `'primary' \| 'link' \| 'info' \| 'success' \| 'warning' \| 'danger'`                                                                                                                                                                                                                    | —       | Bulma color modifier for the image container.                                                   |
-| `bgColor`   | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` \| `'black'` \| `'black-bis'` \| `'black-ter'` \| `'grey-darker'` \| `'grey-dark'` \| `'grey'` \| `'grey-light'` \| `'grey-lighter'` \| `'white'` \| `'light'` \| `'dark'` \| `'inherit'` \| `'current'` | —       | Background color helper for the container.                                                      |
-| `size`      | Bulma size string (e.g., `'128x128'`, `'16by9'`, `'square'`)                                                                                                                                                                                                                             | —       | Fixed size or aspect ratio modifier for the image container.                                    |
-| `isRounded` | `boolean`                                                                                                                                                                                                                                                                                | —       | Renders the image with rounded corners.                                                         |
-| `isRetina`  | `boolean`                                                                                                                                                                                                                                                                                | —       | Uses retina (2x) image source.                                                                  |
-| `src`       | `string`                                                                                                                                                                                                                                                                                 | —       | Image source URL.                                                                               |
-| `alt`       | `string`                                                                                                                                                                                                                                                                                 | —       | Alternate text for the image.                                                                   |
-| `children`  | `React.ReactNode`                                                                                                                                                                                                                                                                        | —       | Arbitrary content (e.g., iframe, custom HTML) inside the image container.                       |
-| `as`        | `'figure' \| 'div' \| 'p'`                                                                                                                                                                                                                                                               | —       | Container element tag. Defaults to `'figure'` when using aspect-ratio sizes, `'div'` otherwise. |
-| ...         | All standard `<figure>`/`<div>` and Bulma helper props                                                                                                                                                                                                                                   |         | (See [Helper Props](../helpers/usebulmaclasses))                                                |
+<!-- /bestax:generated import -->
 
 ---
 
@@ -199,3 +189,26 @@ Do not use `Image` for decorative images without `alt=""`, unless purely present
 
 - [Bulma Image Documentation](https://bulma.io/documentation/elements/image/)
 - [Storybook: Image Stories](https://bestax.io/storybook/?path=/story/elements-image--default)
+
+---
+
+## Props
+
+<!-- bestax:generated props -->
+
+| Prop        | Type                                                                                                                                                                                                                                                                                          | Default | Description                                                                                     |
+| ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------- |
+| `className` | `string`                                                                                                                                                                                                                                                                                      | —       | Additional CSS classes to apply.                                                                |
+| `textColor` | [Bulma color](../helpers/valid-values.md) \| `'inherit'` \| `'current'`                                                                                                                                                                                                                       | —       | Text color helper for the container.                                                            |
+| `color`     | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'`                                                                                                                                                                                                               | —       | Bulma color modifier for the image container.                                                   |
+| `bgColor`   | [Bulma color](../helpers/valid-values.md) \| `'inherit'` \| `'current'`                                                                                                                                                                                                                       | —       | Background color helper for the container.                                                      |
+| `size`      | `'16x16'` \| `'24x24'` \| `'32x32'` \| `'48x48'` \| `'64x64'` \| `'96x96'` \| `'128x128'` \| `'square'` \| `'1by1'` \| `'5by4'` \| `'4by3'` \| `'3by2'` \| `'5by3'` \| `'16by9'` \| `'2by1'` \| `'3by1'` \| `'4by5'` \| `'3by4'` \| `'2by3'` \| `'3by5'` \| `'9by16'` \| `'1by2'` \| `'1by3'` | —       | Fixed size or aspect ratio modifier for the image container.                                    |
+| `isRounded` | `boolean`                                                                                                                                                                                                                                                                                     | `false` | Renders the image with rounded corners.                                                         |
+| `isRetina`  | `boolean`                                                                                                                                                                                                                                                                                     | `false` | Uses retina (2x) image source.                                                                  |
+| `src`       | `string`                                                                                                                                                                                                                                                                                      | —       | Image source URL.                                                                               |
+| `alt`       | `string`                                                                                                                                                                                                                                                                                      | —       | Alternate text for the image.                                                                   |
+| `children`  | `React.ReactNode`                                                                                                                                                                                                                                                                             | —       | Arbitrary content (e.g., iframe, custom HTML) inside the image container.                       |
+| `as`        | `'figure'` \| `'div'` \| `'p'`                                                                                                                                                                                                                                                                | —       | Container element tag. Defaults to `'figure'` when using aspect-ratio sizes, `'div'` otherwise. |
+| `...`       | All standard HTML attributes and Bulma helper props                                                                                                                                                                                                                                           | —       | See [Helper Props](../helpers/usebulmaclasses.md)                                               |
+
+<!-- /bestax:generated props -->
diff --git a/docs/docs/api/elements/link.md b/docs/docs/api/elements/link.md
index 5788d72c8..9f4a0b132 100644
--- a/docs/docs/api/elements/link.md
+++ b/docs/docs/api/elements/link.md
@@ -1,13 +1,20 @@
 ---
 title: Link
 sidebar_label: Link
+description: The `Link` component renders a styled anchor (`<a>`) element with Bulma helper class integration.
 ---
 
 # Link
 
 ## Overview
 
-The `Link` component renders a styled anchor (`<a>`) element with Bulma helper class integration. Use it for navigation links, external links, or any clickable text that follows Bulma's styling conventions. It supports all Bulma helper props for color, spacing, typography, and more.
+<!-- bestax:generated overview -->
+
+The `Link` component renders a styled anchor (`<a>`) element with Bulma helper class integration.
+
+<!-- /bestax:generated overview -->
+
+Use it for navigation links, external links, or any clickable text that follows Bulma's styling conventions. It supports all Bulma helper props for color, spacing, typography, and more.
 
 :::info
 The Link component is a thin wrapper around the HTML `<a>` element, providing consistent Bulma styling and helper class support.
@@ -17,26 +24,13 @@ The Link component is a thin wrapper around the HTML `<a>` element, providing co
 
 ## Import
 
+<!-- bestax:generated import -->
+
 ```tsx
 import { Link } from '@allxsmith/bestax-bulma';
 ```
 
----
-
-## Props
-
-| Prop        | Type                                                                                                                                                                                                                                                                                     | Default | Description                                                           |
-| ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------- |
-| `href`      | `string`                                                                                                                                                                                                                                                                                 | —       | The URL the link points to.                                           |
-| `target`    | `'_self'` \| `'_blank'` \| `'_parent'` \| `'_top'`                                                                                                                                                                                                                                       | —       | Where to open the linked document.                                    |
-| `rel`       | `string`                                                                                                                                                                                                                                                                                 | —       | Relationship between current and linked document.                     |
-| `isActive`  | `boolean`                                                                                                                                                                                                                                                                                | —       | Whether the link appears active.                                      |
-| `as`        | `React.ElementType`                                                                                                                                                                                                                                                                      | `'a'`   | Render as a custom component (e.g. a router `Link`) instead of `<a>`. |
-| `className` | `string`                                                                                                                                                                                                                                                                                 | —       | Additional CSS classes.                                               |
-| `textColor` | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` \| `'black'` \| `'black-bis'` \| `'black-ter'` \| `'grey-darker'` \| `'grey-dark'` \| `'grey'` \| `'grey-light'` \| `'grey-lighter'` \| `'white'` \| `'light'` \| `'dark'` \| `'inherit'` \| `'current'` | —       | Text color helper.                                                    |
-| `bgColor`   | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` \| `'black'` \| `'black-bis'` \| `'black-ter'` \| `'grey-darker'` \| `'grey-dark'` \| `'grey'` \| `'grey-light'` \| `'grey-lighter'` \| `'white'` \| `'light'` \| `'dark'` \| `'inherit'` \| `'current'` | —       | Background color helper.                                              |
-| `children`  | `React.ReactNode`                                                                                                                                                                                                                                                                        | —       | Content to render inside the link.                                    |
-| ...         | All standard `<a>` and Bulma helper props                                                                                                                                                                                                                                                |         | (See [Helper Props](../helpers/usebulmaclasses))                      |
+<!-- /bestax:generated import -->
 
 ---
 
@@ -208,3 +202,24 @@ Per [Section 508](https://www.section508.gov/) and [eslint-plugin-jsx-a11y](http
 
 - [Bulma Content Documentation](https://bulma.io/documentation/elements/content/)
 - [Storybook: Link Stories](https://bestax.io/storybook/?path=/story/elements-link--default)
+
+---
+
+## Props
+
+<!-- bestax:generated props -->
+
+| Prop        | Type                                                                    | Default | Description                                                                              |
+| ----------- | ----------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------- |
+| `className` | `string`                                                                | —       | Additional CSS classes to apply.                                                         |
+| `textColor` | [Bulma color](../helpers/valid-values.md) \| `'inherit'` \| `'current'` | —       | Text color helper.                                                                       |
+| `bgColor`   | [Bulma color](../helpers/valid-values.md) \| `'inherit'` \| `'current'` | —       | Background color helper.                                                                 |
+| `isActive`  | `boolean`                                                               | `false` | Whether the link appears active.                                                         |
+| `as`        | `React.ElementType`                                                     | `'a'`   | Render as a custom component (e.g. a router `Link`) instead of `<a>`. Defaults to `'a'`. |
+| `children`  | `React.ReactNode`                                                       | —       | Content to render inside the link.                                                       |
+| `href`      | `string`                                                                | —       | The URL the link points to.                                                              |
+| `target`    | `'_self'` \| `'_blank'` \| `'_parent'` \| `'_top'`                      | —       | Where to open the linked document.                                                       |
+| `rel`       | `string`                                                                | —       | Relationship between current and linked document.                                        |
+| `...`       | All standard `<a>` attributes and Bulma helper props                    | —       | See [Helper Props](../helpers/usebulmaclasses.md)                                        |
+
+<!-- /bestax:generated props -->
diff --git a/docs/docs/api/elements/linkbutton.md b/docs/docs/api/elements/linkbutton.md
index 612fe343b..5dc5d8919 100644
--- a/docs/docs/api/elements/linkbutton.md
+++ b/docs/docs/api/elements/linkbutton.md
@@ -1,13 +1,20 @@
 ---
 title: LinkButton
 sidebar_label: LinkButton
+description: The `LinkButton` component renders a `<button>` that visually looks like text or a link.
 ---
 
 # LinkButton
 
 ## Overview
 
-The `LinkButton` component renders a `<button>` that visually looks like text or a link. It provides an accessible replacement for `<div onClick>` anti-patterns by wrapping the [`Button`](./button.md) component with `is-text` or `is-ghost` styling and CSS overrides.
+<!-- bestax:generated overview -->
+
+The `LinkButton` component renders a `<button>` that visually looks like text or a link.
+
+<!-- /bestax:generated overview -->
+
+It provides an accessible replacement for `<div onClick>` anti-patterns by wrapping the [`Button`](./button.md) component with `is-text` or `is-ghost` styling and CSS overrides.
 
 **Two variants:**
 
@@ -24,37 +31,13 @@ Use `LinkButton` instead of `<div onClick>` or unstyled click handlers to get pr
 
 ## Import
 
+<!-- bestax:generated import -->
+
 ```tsx
 import { LinkButton } from '@allxsmith/bestax-bulma';
 ```
 
----
-
-## Props
-
-| Prop          | Type                                                                                                             | Default    | Description                                                                  |
-| ------------- | ---------------------------------------------------------------------------------------------------------------- | ---------- | ---------------------------------------------------------------------------- |
-| `variant`     | `'text' \| 'ghost' \| 'underline'`                                                                               | `'text'`   | Display mode. `text` has no underline; `ghost` uses default text color.      |
-| `color`       | `'primary' \| 'link' \| 'info' \| 'success' \| 'warning' \| 'danger' \| 'white' \| 'light' \| 'dark' \| 'black'` | —          | Text color override for the button.                                          |
-| `size`        | `'small' \| 'normal' \| 'medium' \| 'large'`                                                                     | —          | Size of the button.                                                          |
-| `isRounded`   | `boolean`                                                                                                        | —          | Makes the button rounded.                                                    |
-| `isLoading`   | `boolean`                                                                                                        | —          | Displays a loading spinner.                                                  |
-| `isStatic`    | `boolean`                                                                                                        | —          | Makes the button non-interactive.                                            |
-| `isFullWidth` | `boolean`                                                                                                        | —          | Makes the button full-width.                                                 |
-| `isFocused`   | `boolean`                                                                                                        | —          | Applies focused styling (visual only).                                       |
-| `isActive`    | `boolean`                                                                                                        | —          | Applies active styling (visual only).                                        |
-| `isHovered`   | `boolean`                                                                                                        | —          | Applies hovered styling (visual only).                                       |
-| `isDisabled`  | `boolean`                                                                                                        | —          | Applies disabled styling.                                                    |
-| `as`          | `React.ElementType`                                                                                              | `'button'` | Render as a `<button>`, `<a>`, or a custom component (e.g. a router `Link`). |
-| `href`        | `string`                                                                                                         | —          | Href value (if rendering as `<a>`).                                          |
-| `onClick`     | `function`                                                                                                       | —          | Click event handler.                                                         |
-| `className`   | `string`                                                                                                         | —          | Custom class name.                                                           |
-| `children`    | `React.ReactNode`                                                                                                | —          | Button content.                                                              |
-| ...           | All standard `<button>` and Bulma helper props                                                                   | —          | See [Helper Props](../helpers/usebulmaclasses.md)                            |
-
-:::note
-The `isOutlined`, `isInverted`, and `isLight` props from Button are not available on LinkButton — they don't apply to link-like buttons.
-:::
+<!-- /bestax:generated import -->
 
 ---
 
@@ -177,3 +160,39 @@ If your LinkButton has only an icon, use `aria-label` to provide accessible text
 - [Bulma Button Documentation](https://bulma.io/documentation/elements/button/)
 - [React Button Accessibility](https://www.w3.org/WAI/ARIA/apg/patterns/button/)
 - [Storybook: LinkButton Stories](https://bestax.io/storybook/?path=/story/elements-linkbutton--default)
+
+---
+
+## Props
+
+<!-- bestax:generated props -->
+
+| Prop          | Type                                                                                                                               | Default    | Description                                                                                                                                                           |
+| ------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `variant`     | `'text'` \| `'ghost'` \| `'underline'`                                                                                             | `'text'`   | Display mode. `text` has no underline; `ghost` uses default text color.                                                                                               |
+| `color`       | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` \| `'white'` \| `'light'` \| `'dark'` \| `'black'` | —          | Text color override for the button.                                                                                                                                   |
+| `size`        | `'small'` \| `'normal'` \| `'medium'` \| `'large'`                                                                                 | —          | Size of the button.                                                                                                                                                   |
+| `isRounded`   | `boolean`                                                                                                                          | `false`    | Makes the button rounded.                                                                                                                                             |
+| `isLoading`   | `boolean`                                                                                                                          | `false`    | Displays a loading spinner.                                                                                                                                           |
+| `isStatic`    | `boolean`                                                                                                                          | `false`    | Makes the button non-interactive.                                                                                                                                     |
+| `isFullWidth` | `boolean`                                                                                                                          | `false`    | Makes the button full-width.                                                                                                                                          |
+| `isFocused`   | `boolean`                                                                                                                          | `false`    | Applies focused styling (visual only).                                                                                                                                |
+| `isActive`    | `boolean`                                                                                                                          | `false`    | Applies active styling (visual only).                                                                                                                                 |
+| `isHovered`   | `boolean`                                                                                                                          | `false`    | Applies hovered styling (visual only).                                                                                                                                |
+| `isDisabled`  | `boolean`                                                                                                                          | `false`    | Applies disabled styling.                                                                                                                                             |
+| `className`   | `string`                                                                                                                           | —          | Custom class name.                                                                                                                                                    |
+| `textColor`   | [Bulma color](../helpers/valid-values.md) \| `'inherit'` \| `'current'`                                                            | —          | Text color helper.                                                                                                                                                    |
+| `bgColor`     | [Bulma color](../helpers/valid-values.md) \| `'inherit'` \| `'current'`                                                            | —          | Background color helper.                                                                                                                                              |
+| `as`          | `React.ElementType`                                                                                                                | `'button'` | Render as a `<button>`, `<a>`, or a custom component (e.g. a router `Link`). Defaults to `'button'`; anything else (including `'a'`) uses anchor-style prop handling. |
+| `href`        | `string`                                                                                                                           | —          | Href value (if rendering as `<a>`).                                                                                                                                   |
+| `onClick`     | `React.MouseEventHandler<HTMLButtonElement>` \| `React.MouseEventHandler<HTMLAnchorElement>`                                       | —          | Click event handler.                                                                                                                                                  |
+| `target`      | `string`                                                                                                                           | —          | Anchor tag target.                                                                                                                                                    |
+| `rel`         | `string`                                                                                                                           | —          | Anchor tag rel.                                                                                                                                                       |
+| `children`    | `React.ReactNode`                                                                                                                  | —          | Button content.                                                                                                                                                       |
+| `...`         | All standard `<button>` attributes and Bulma helper props                                                                          | —          | See [Helper Props](../helpers/usebulmaclasses.md)                                                                                                                     |
+
+<!-- /bestax:generated props -->
+
+:::note
+The `isOutlined`, `isInverted`, and `isLight` props from Button are not available on LinkButton — they don't apply to link-like buttons.
+:::
diff --git a/docs/docs/api/elements/listitem.md b/docs/docs/api/elements/listitem.md
index 1d7a2a1e6..96b98d85a 100644
--- a/docs/docs/api/elements/listitem.md
+++ b/docs/docs/api/elements/listitem.md
@@ -1,13 +1,20 @@
 ---
 title: ListItem
 sidebar_label: ListItem
+description: The `ListItem` component renders a styled list item (`<li>`) element with Bulma helper class integration.
 ---
 
 # ListItem
 
 ## Overview
 
-The `ListItem` component renders a styled list item (`<li>`) element with Bulma helper class integration. Use it inside `UnorderedList` or `OrderedList` components to create list items with consistent styling.
+<!-- bestax:generated overview -->
+
+The `ListItem` component renders a styled list item (`<li>`) element with Bulma helper class integration.
+
+<!-- /bestax:generated overview -->
+
+Use it inside `UnorderedList` or `OrderedList` components to create list items with consistent styling.
 
 :::info
 The ListItem component is a thin wrapper around the HTML `<li>` element, providing consistent Bulma styling and helper class support.
@@ -17,22 +24,13 @@ The ListItem component is a thin wrapper around the HTML `<li>` element, providi
 
 ## Import
 
+<!-- bestax:generated import -->
+
 ```tsx
 import { ListItem, UnorderedList, OrderedList } from '@allxsmith/bestax-bulma';
 ```
 
----
-
-## Props
-
-| Prop        | Type                                                                                                                                                                                                                                                                                     | Default | Description                                      |
-| ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------ |
-| `value`     | `number`                                                                                                                                                                                                                                                                                 | —       | Custom value for ordered list items.             |
-| `className` | `string`                                                                                                                                                                                                                                                                                 | —       | Additional CSS classes.                          |
-| `textColor` | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` \| `'black'` \| `'black-bis'` \| `'black-ter'` \| `'grey-darker'` \| `'grey-dark'` \| `'grey'` \| `'grey-light'` \| `'grey-lighter'` \| `'white'` \| `'light'` \| `'dark'` \| `'inherit'` \| `'current'` | —       | Text color helper.                               |
-| `bgColor`   | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` \| `'black'` \| `'black-bis'` \| `'black-ter'` \| `'grey-darker'` \| `'grey-dark'` \| `'grey'` \| `'grey-light'` \| `'grey-lighter'` \| `'white'` \| `'light'` \| `'dark'` \| `'inherit'` \| `'current'` | —       | Background color helper.                         |
-| `children`  | `React.ReactNode`                                                                                                                                                                                                                                                                        | —       | Content to render inside the list item.          |
-| ...         | All standard `<li>` and Bulma helper props                                                                                                                                                                                                                                               |         | (See [Helper Props](../helpers/usebulmaclasses)) |
+<!-- /bestax:generated import -->
 
 ---
 
@@ -156,3 +154,20 @@ Always use `ListItem` inside `UnorderedList` or `OrderedList` for proper semanti
 
 - [MDN: li element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li)
 - [Storybook: ListItem Stories](https://bestax.io/storybook/?path=/story/elements-listitem--default)
+
+---
+
+## Props
+
+<!-- bestax:generated props -->
+
+| Prop        | Type                                                                    | Default | Description                                       |
+| ----------- | ----------------------------------------------------------------------- | ------- | ------------------------------------------------- |
+| `className` | `string`                                                                | —       | Additional CSS classes to apply.                  |
+| `textColor` | [Bulma color](../helpers/valid-values.md) \| `'inherit'` \| `'current'` | —       | Text color helper.                                |
+| `bgColor`   | [Bulma color](../helpers/valid-values.md) \| `'inherit'` \| `'current'` | —       | Background color helper.                          |
+| `children`  | `React.ReactNode`                                                       | —       | Content to render inside the list item.           |
+| `value`     | `number`                                                                | —       | Custom value for ordered list items.              |
+| `...`       | All standard `<li>` attributes and Bulma helper props                   | —       | See [Helper Props](../helpers/usebulmaclasses.md) |
+
+<!-- /bestax:generated props -->
diff --git a/docs/docs/api/elements/notification.md b/docs/docs/api/elements/notification.md
index ea6c782fc..35aa4412b 100644
--- a/docs/docs/api/elements/notification.md
+++ b/docs/docs/api/elements/notification.md
@@ -1,13 +1,20 @@
 ---
 title: Notification
 sidebar_label: Notification
+description: The `Notification` component is a Bulma-styled alert/message area for providing feedback, warnings, or information to users.
 ---
 
 # Notification
 
 ## Overview
 
-The `Notification` component is a Bulma-styled alert/message area for providing feedback, warnings, or information to users. It supports color themes, light variants, an optional close (delete) button, custom content, and all Bulma helper props for spacing, etc.
+<!-- bestax:generated overview -->
+
+The `Notification` component is a Bulma-styled alert/message area for providing feedback, warnings, or information to users.
+
+<!-- /bestax:generated overview -->
+
+It supports color themes, light variants, an optional close (delete) button, custom content, and all Bulma helper props for spacing, etc.
 
 :::info
 Notifications are perfect for status updates, alerts, and dismissible feedback in your UI.
@@ -17,24 +24,13 @@ Notifications are perfect for status updates, alerts, and dismissible feedback i
 
 ## Import
 
+<!-- bestax:generated import -->
+
 ```tsx
 import { Notification } from '@allxsmith/bestax-bulma';
 ```
 
----
-
-## Props
-
-| Prop        | Type                                                                                                                                                                                                                                                                                     | Default | Description                                        |
-| ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | -------------------------------------------------- |
-| `className` | `string`                                                                                                                                                                                                                                                                                 | —       | Additional CSS classes.                            |
-| `color`     | `Bulma color` (e.g. `'primary'`, `'info'`, etc.)                                                                                                                                                                                                                                         | —       | Bulma color modifier for the notification.         |
-| `textColor` | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` \| `'black'` \| `'black-bis'` \| `'black-ter'` \| `'grey-darker'` \| `'grey-dark'` \| `'grey'` \| `'grey-light'` \| `'grey-lighter'` \| `'white'` \| `'light'` \| `'dark'` \| `'inherit'` \| `'current'` | —       | Text color helper.                                 |
-| `isLight`   | `boolean`                                                                                                                                                                                                                                                                                | —       | Use the light color variant.                       |
-| `hasDelete` | `boolean`                                                                                                                                                                                                                                                                                | —       | Shows a close (delete) button in the notification. |
-| `onDelete`  | `() => void`                                                                                                                                                                                                                                                                             | —       | Callback fired when the delete button is clicked.  |
-| `children`  | `React.ReactNode`                                                                                                                                                                                                                                                                        | —       | Content inside the notification.                   |
-| ...         | All standard `<div>` and Bulma helper props                                                                                                                                                                                                                                              |         | (See [Helper Props](../helpers/usebulmaclasses))   |
+<!-- /bestax:generated import -->
 
 ---
 
@@ -144,3 +140,42 @@ Always provide clear, actionable text inside notifications.
 
 - [Bulma Notification Documentation](https://bulma.io/documentation/elements/notification/)
 - [Storybook: Notification Stories](https://bestax.io/storybook/?path=/story/elements-notification--default)
+
+---
+
+## Props
+
+<!-- bestax:generated props -->
+
+| Prop        | Type                                                                    | Default | Description                                        |
+| ----------- | ----------------------------------------------------------------------- | ------- | -------------------------------------------------- |
+| `className` | `string`                                                                | —       | Additional CSS classes to apply.                   |
+| `color`     | [Bulma color](../helpers/valid-values.md)                               | —       | Bulma color modifier for the notification.         |
+| `textColor` | [Bulma color](../helpers/valid-values.md) \| `'inherit'` \| `'current'` | —       | Text color helper.                                 |
+| `isLight`   | `boolean`                                                               | `false` | Use the light color variant.                       |
+| `hasDelete` | `boolean`                                                               | `false` | Shows a close (delete) button in the notification. |
+| `onDelete`  | `() => void`                                                            | —       | Callback fired when the delete button is clicked.  |
+| `children`  | `React.ReactNode`                                                       | —       | Content inside the notification.                   |
+| `...`       | All standard `<div>` attributes and Bulma helper props                  | —       | See [Helper Props](../helpers/usebulmaclasses.md)  |
+
+<!-- /bestax:generated props -->
+
+---
+
+## CSS & Sass Variables
+
+<!-- bestax:generated cssvars -->
+
+`Notification` registers these variables on its own `.notification` element. Override them there (or via `className`) — a value set on an ancestor is only inherited, and loses to the component-level declaration. See [Theme](../helpers/theme.md).
+
+| CSS Variable                                 | Sass Variable                         | Default                      |
+| -------------------------------------------- | ------------------------------------- | ---------------------------- |
+| `--bulma-notification-h`                     | —                                     | `var(--bulma-scheme-h)`      |
+| `--bulma-notification-s`                     | —                                     | `var(--bulma-scheme-s)`      |
+| `--bulma-notification-background-l`          | —                                     | `var(--bulma-background-l)`  |
+| `--bulma-notification-color-l`               | —                                     | `var(--bulma-text-strong-l)` |
+| `--bulma-notification-code-background-color` | `$notification-code-background-color` | `var(--bulma-scheme-main)`   |
+| `--bulma-notification-radius`                | `$notification-radius`                | `var(--bulma-radius)`        |
+| `--bulma-notification-padding`               | `$notification-padding`               | `1.375em 1.5em`              |
+
+<!-- /bestax:generated cssvars -->
diff --git a/docs/docs/api/elements/orderedlist.md b/docs/docs/api/elements/orderedlist.md
index 219ded1cf..b0f13263b 100644
--- a/docs/docs/api/elements/orderedlist.md
+++ b/docs/docs/api/elements/orderedlist.md
@@ -1,13 +1,20 @@
 ---
 title: OrderedList
 sidebar_label: OrderedList
+description: The `OrderedList` component renders a styled ordered list (`<ol>`) element with Bulma helper class integration.
 ---
 
 # OrderedList
 
 ## Overview
 
-The `OrderedList` component renders a styled ordered list (`<ol>`) element with Bulma helper class integration. Use it with `ListItem` components to create numbered lists with consistent styling. Supports all standard `<ol>` attributes like `type`, `start`, and `reversed`.
+<!-- bestax:generated overview -->
+
+The `OrderedList` component renders a styled ordered list (`<ol>`) element with Bulma helper class integration.
+
+<!-- /bestax:generated overview -->
+
+Use it with `ListItem` components to create numbered lists with consistent styling. Supports all standard `<ol>` attributes like `type`, `start`, and `reversed`.
 
 :::info
 The OrderedList component is a thin wrapper around the HTML `<ol>` element, providing consistent Bulma styling and helper class support.
@@ -17,24 +24,13 @@ The OrderedList component is a thin wrapper around the HTML `<ol>` element, prov
 
 ## Import
 
+<!-- bestax:generated import -->
+
 ```tsx
 import { OrderedList, ListItem } from '@allxsmith/bestax-bulma';
 ```
 
----
-
-## Props
-
-| Prop        | Type                                                                                                                                                                                                                                                                                     | Default | Description                                      |
-| ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------ |
-| `type`      | `'1'` \| `'a'` \| `'A'` \| `'i'` \| `'I'`                                                                                                                                                                                                                                                | `'1'`   | The numbering type for the list.                 |
-| `start`     | `number`                                                                                                                                                                                                                                                                                 | —       | The starting number for the list.                |
-| `reversed`  | `boolean`                                                                                                                                                                                                                                                                                | —       | Whether to reverse the list numbering.           |
-| `className` | `string`                                                                                                                                                                                                                                                                                 | —       | Additional CSS classes.                          |
-| `textColor` | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` \| `'black'` \| `'black-bis'` \| `'black-ter'` \| `'grey-darker'` \| `'grey-dark'` \| `'grey'` \| `'grey-light'` \| `'grey-lighter'` \| `'white'` \| `'light'` \| `'dark'` \| `'inherit'` \| `'current'` | —       | Text color helper.                               |
-| `bgColor`   | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` \| `'black'` \| `'black-bis'` \| `'black-ter'` \| `'grey-darker'` \| `'grey-dark'` \| `'grey'` \| `'grey-light'` \| `'grey-lighter'` \| `'white'` \| `'light'` \| `'dark'` \| `'inherit'` \| `'current'` | —       | Background color helper.                         |
-| `children`  | `React.ReactNode`                                                                                                                                                                                                                                                                        | —       | List items to render inside the list.            |
-| ...         | All standard `<ol>` and Bulma helper props                                                                                                                                                                                                                                               |         | (See [Helper Props](../helpers/usebulmaclasses)) |
+<!-- /bestax:generated import -->
 
 ---
 
@@ -204,3 +200,26 @@ Use `OrderedList` when the order of items is significant, such as steps in a pro
 
 - [MDN: ol element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol)
 - [Storybook: OrderedList Stories](https://bestax.io/storybook/?path=/story/elements-orderedlist--default)
+
+---
+
+## Props
+
+<!-- bestax:generated props -->
+
+| Prop        | Type                                                                    | Default | Description                                       |
+| ----------- | ----------------------------------------------------------------------- | ------- | ------------------------------------------------- |
+| `className` | `string`                                                                | —       | Additional CSS classes to apply.                  |
+| `textColor` | [Bulma color](../helpers/valid-values.md) \| `'inherit'` \| `'current'` | —       | Text color helper.                                |
+| `bgColor`   | [Bulma color](../helpers/valid-values.md) \| `'inherit'` \| `'current'` | —       | Background color helper.                          |
+| `children`  | `React.ReactNode`                                                       | —       | List items to render inside the list.             |
+| `type`      | `'1'` \| `'a'` \| `'A'` \| `'i'` \| `'I'`                               | `'1'`   | The numbering type for the list.                  |
+| `start`     | `number`                                                                | —       | The starting number for the list.                 |
+| `reversed`  | `boolean`                                                               | —       | Whether to reverse the list numbering.            |
+| `...`       | All standard `<ol>` attributes and Bulma helper props                   | —       | See [Helper Props](../helpers/usebulmaclasses.md) |
+
+**Subcomponents:**
+
+- [`OrderedList.Item`](listitem.md): The `ListItem` component renders a styled list item (`<li>`) element with Bulma helper class integration.
+
+<!-- /bestax:generated props -->
diff --git a/docs/docs/api/elements/paragraph.md b/docs/docs/api/elements/paragraph.md
index 2e062aeb6..9c330105d 100644
--- a/docs/docs/api/elements/paragraph.md
+++ b/docs/docs/api/elements/paragraph.md
@@ -1,13 +1,20 @@
 ---
 title: Paragraph
 sidebar_label: Paragraph
+description: The `Paragraph` component renders a styled `<p>` element with Bulma helper class integration.
 ---
 
 # Paragraph
 
 ## Overview
 
-The `Paragraph` component renders a styled `<p>` element with Bulma helper class integration. Use it for text content that benefits from Bulma's typography utilities, including text color, size, alignment, weight, and spacing.
+<!-- bestax:generated overview -->
+
+The `Paragraph` component renders a styled `<p>` element with Bulma helper class integration.
+
+<!-- /bestax:generated overview -->
+
+Use it for text content that benefits from Bulma's typography utilities, including text color, size, alignment, weight, and spacing.
 
 :::info
 The Paragraph component is a thin wrapper around the HTML `<p>` element, providing consistent Bulma styling and helper class support for text content.
@@ -17,21 +24,13 @@ The Paragraph component is a thin wrapper around the HTML `<p>` element, providi
 
 ## Import
 
+<!-- bestax:generated import -->
+
 ```tsx
 import { Paragraph } from '@allxsmith/bestax-bulma';
 ```
 
----
-
-## Props
-
-| Prop        | Type                                                                                                                                                                                                                                                                                     | Default | Description                                      |
-| ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------ |
-| `className` | `string`                                                                                                                                                                                                                                                                                 | —       | Additional CSS classes.                          |
-| `textColor` | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` \| `'black'` \| `'black-bis'` \| `'black-ter'` \| `'grey-darker'` \| `'grey-dark'` \| `'grey'` \| `'grey-light'` \| `'grey-lighter'` \| `'white'` \| `'light'` \| `'dark'` \| `'inherit'` \| `'current'` | —       | Text color helper.                               |
-| `bgColor`   | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` \| `'black'` \| `'black-bis'` \| `'black-ter'` \| `'grey-darker'` \| `'grey-dark'` \| `'grey'` \| `'grey-light'` \| `'grey-lighter'` \| `'white'` \| `'light'` \| `'dark'` \| `'inherit'` \| `'current'` | —       | Background color helper.                         |
-| `children`  | `React.ReactNode`                                                                                                                                                                                                                                                                        | —       | Content to render inside the paragraph.          |
-| ...         | All standard `<p>` and Bulma helper props                                                                                                                                                                                                                                                |         | (See [Helper Props](../helpers/usebulmaclasses)) |
+<!-- /bestax:generated import -->
 
 ---
 
@@ -183,3 +182,19 @@ For semantic emphasis within paragraphs, use `<strong>` (Strong) or `<em>` (Emph
 
 - [Bulma Typography Helpers](https://bulma.io/documentation/helpers/typography-helpers/)
 - [Storybook: Paragraph Stories](https://bestax.io/storybook/?path=/story/elements-paragraph--default)
+
+---
+
+## Props
+
+<!-- bestax:generated props -->
+
+| Prop        | Type                                                                    | Default | Description                                       |
+| ----------- | ----------------------------------------------------------------------- | ------- | ------------------------------------------------- |
+| `className` | `string`                                                                | —       | Additional CSS classes to apply.                  |
+| `textColor` | [Bulma color](../helpers/valid-values.md) \| `'inherit'` \| `'current'` | —       | Text color helper.                                |
+| `bgColor`   | [Bulma color](../helpers/valid-values.md) \| `'inherit'` \| `'current'` | —       | Background color helper.                          |
+| `children`  | `React.ReactNode`                                                       | —       | Content to render inside the paragraph.           |
+| `...`       | All standard `<p>` attributes and Bulma helper props                    | —       | See [Helper Props](../helpers/usebulmaclasses.md) |
+
+<!-- /bestax:generated props -->
diff --git a/docs/docs/api/elements/pre.md b/docs/docs/api/elements/pre.md
index c2905e5d2..60eedec98 100644
--- a/docs/docs/api/elements/pre.md
+++ b/docs/docs/api/elements/pre.md
@@ -1,13 +1,20 @@
 ---
 title: Pre
 sidebar_label: Pre
+description: The `Pre` component renders a styled `<pre>` element with Bulma helper class integration.
 ---
 
 # Pre
 
 ## Overview
 
-The `Pre` component renders a styled `<pre>` element with Bulma helper class integration. Use it for multi-line code blocks, terminal output, ASCII art, or any content where whitespace formatting must be preserved.
+<!-- bestax:generated overview -->
+
+The `Pre` component renders a styled `<pre>` element with Bulma helper class integration.
+
+<!-- /bestax:generated overview -->
+
+Use it for multi-line code blocks, terminal output, ASCII art, or any content where whitespace formatting must be preserved.
 
 :::info
 Often used together with the `Code` component for semantically correct code blocks: `<Pre><Code>...</Code></Pre>`.
@@ -17,21 +24,13 @@ Often used together with the `Code` component for semantically correct code bloc
 
 ## Import
 
+<!-- bestax:generated import -->
+
 ```tsx
 import { Pre, Code } from '@allxsmith/bestax-bulma';
 ```
 
----
-
-## Props
-
-| Prop        | Type                                                                                                                                                                                                                                                                                     | Default | Description                                      |
-| ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------ |
-| `className` | `string`                                                                                                                                                                                                                                                                                 | —       | Additional CSS classes.                          |
-| `textColor` | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` \| `'black'` \| `'black-bis'` \| `'black-ter'` \| `'grey-darker'` \| `'grey-dark'` \| `'grey'` \| `'grey-light'` \| `'grey-lighter'` \| `'white'` \| `'light'` \| `'dark'` \| `'inherit'` \| `'current'` | —       | Text color helper.                               |
-| `bgColor`   | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` \| `'black'` \| `'black-bis'` \| `'black-ter'` \| `'grey-darker'` \| `'grey-dark'` \| `'grey'` \| `'grey-light'` \| `'grey-lighter'` \| `'white'` \| `'light'` \| `'dark'` \| `'inherit'` \| `'current'` | —       | Background color helper.                         |
-| `children`  | `React.ReactNode`                                                                                                                                                                                                                                                                        | —       | Preformatted content to render.                  |
-| ...         | All standard `<pre>` and Bulma helper props                                                                                                                                                                                                                                              |         | (See [Helper Props](../helpers/usebulmaclasses)) |
+<!-- /bestax:generated import -->
 
 ---
 
@@ -149,3 +148,35 @@ For code blocks, wrap content in both `<Pre>` and `<Code>` for proper semantics:
 
 - [MDN: pre element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre)
 - [Storybook: Pre Stories](https://bestax.io/storybook/?path=/story/elements-pre--default)
+
+---
+
+## Props
+
+<!-- bestax:generated props -->
+
+| Prop        | Type                                                                    | Default | Description                                       |
+| ----------- | ----------------------------------------------------------------------- | ------- | ------------------------------------------------- |
+| `className` | `string`                                                                | —       | Additional CSS classes to apply.                  |
+| `textColor` | [Bulma color](../helpers/valid-values.md) \| `'inherit'` \| `'current'` | —       | Text color helper.                                |
+| `bgColor`   | [Bulma color](../helpers/valid-values.md) \| `'inherit'` \| `'current'` | —       | Background color helper.                          |
+| `children`  | `React.ReactNode`                                                       | —       | Preformatted content to render.                   |
+| `...`       | All standard `<pre>` attributes and Bulma helper props                  | —       | See [Helper Props](../helpers/usebulmaclasses.md) |
+
+<!-- /bestax:generated props -->
+
+---
+
+## CSS & Sass Variables
+
+<!-- bestax:generated cssvars -->
+
+Bulma declares these variables globally rather than on `Pre`'s own element, so the defaults come from the theme. Override them anywhere above the component — on the element itself (via `className`/`style`) for a one-off, or on `:root` to retheme every instance. See [Theme](../helpers/theme.md).
+
+| CSS Variable                 | Sass Variable         | Default          |
+| ---------------------------- | --------------------- | ---------------- |
+| `--bulma-pre-font-size`      | `$pre-font-size`      | `0.875em`        |
+| `--bulma-pre-padding`        | `$pre-padding`        | `1.25rem 1.5rem` |
+| `--bulma-pre-code-font-size` | `$pre-code-font-size` | `1em`            |
+
+<!-- /bestax:generated cssvars -->
diff --git a/docs/docs/api/elements/progress.md b/docs/docs/api/elements/progress.md
index 357fc906e..ee23ad5c8 100644
--- a/docs/docs/api/elements/progress.md
+++ b/docs/docs/api/elements/progress.md
@@ -1,13 +1,20 @@
 ---
 title: Progress
 sidebar_label: Progress
+description: The `Progress` component displays a Bulma-styled progress bar.
 ---
 
 # Progress
 
 ## Overview
 
-The `Progress` component displays a Bulma-styled progress bar. It supports color and size modifiers, value/max attributes, custom content, and all Bulma helper props for spacing and layout.
+<!-- bestax:generated overview -->
+
+The `Progress` component displays a Bulma-styled progress bar.
+
+<!-- /bestax:generated overview -->
+
+It supports color and size modifiers, value/max attributes, custom content, and all Bulma helper props for spacing and layout.
 
 :::info
 Use `Progress` for visualizing task completion, loading states, or quantitative user feedback.
@@ -17,23 +24,13 @@ Use `Progress` for visualizing task completion, loading states, or quantitative
 
 ## Import
 
+<!-- bestax:generated import -->
+
 ```tsx
 import { Progress } from '@allxsmith/bestax-bulma';
 ```
 
----
-
-## Props
-
-| Prop        | Type                                             | Default | Description                                      |
-| ----------- | ------------------------------------------------ | ------- | ------------------------------------------------ |
-| `className` | `string`                                         | —       | Additional CSS classes.                          |
-| `color`     | `Bulma color` (e.g. `'primary'`, `'info'`, etc.) | —       | Bulma color modifier for the progress bar.       |
-| `size`      | `'small' \| 'medium' \| 'large'`                 | —       | Size modifier for the progress bar.              |
-| `value`     | `number`                                         | —       | Current value of the progress bar.               |
-| `max`       | `number`                                         | —       | Maximum value of the progress bar.               |
-| `children`  | `React.ReactNode`                                | —       | Optional custom content inside the progress bar. |
-| ...         | All standard `<progress>` and Bulma helper props |         | (See [Helper Props](../helpers/usebulmaclasses)) |
+<!-- /bestax:generated import -->
 
 ---
 
@@ -137,3 +134,38 @@ Ensure your progress bars have sufficient color contrast for users with visual i
 
 - [Bulma Progress Documentation](https://bulma.io/documentation/elements/progress/)
 - [Storybook: Progress Stories](https://bestax.io/storybook/?path=/story/elements-progress--default)
+
+---
+
+## Props
+
+<!-- bestax:generated props -->
+
+| Prop        | Type                                                        | Default | Description                                       |
+| ----------- | ----------------------------------------------------------- | ------- | ------------------------------------------------- |
+| `className` | `string`                                                    | —       | Additional CSS classes to apply.                  |
+| `color`     | [Bulma color](../helpers/valid-values.md)                   | —       | Bulma color modifier for the progress bar.        |
+| `size`      | `'small'` \| `'medium'` \| `'large'`                        | —       | Size modifier for the progress bar.               |
+| `value`     | `number`                                                    | —       | Current value of the progress bar.                |
+| `max`       | `number`                                                    | —       | Maximum value of the progress bar.                |
+| `children`  | `React.ReactNode`                                           | —       | Optional custom content inside the progress bar.  |
+| `...`       | All standard `<progress>` attributes and Bulma helper props | —       | See [Helper Props](../helpers/usebulmaclasses.md) |
+
+<!-- /bestax:generated props -->
+
+---
+
+## CSS & Sass Variables
+
+<!-- bestax:generated cssvars -->
+
+`Progress` registers these variables on its own `.progress` element. Override them there (or via `className`) — a value set on an ancestor is only inherited, and loses to the component-level declaration. See [Theme](../helpers/theme.md).
+
+| CSS Variable                              | Sass Variable                      | Default                       |
+| ----------------------------------------- | ---------------------------------- | ----------------------------- |
+| `--bulma-progress-border-radius`          | `$progress-border-radius`          | `var(--bulma-radius-rounded)` |
+| `--bulma-progress-bar-background-color`   | `$progress-bar-background-color`   | `var(--bulma-border-weak)`    |
+| `--bulma-progress-value-background-color` | `$progress-value-background-color` | `var(--bulma-text)`           |
+| `--bulma-progress-indeterminate-duration` | `$progress-indeterminate-duration` | `1.5s`                        |
+
+<!-- /bestax:generated cssvars -->
diff --git a/docs/docs/api/elements/skeleton.md b/docs/docs/api/elements/skeleton.md
index fe31d3f1c..7a3c68605 100644
--- a/docs/docs/api/elements/skeleton.md
+++ b/docs/docs/api/elements/skeleton.md
@@ -1,13 +1,20 @@
 ---
 title: Skeleton
 sidebar_label: Skeleton
+description: The `Skeleton` component provides a Bulma-styled skeleton loader for React applications, useful for indicating that content is loading.
 ---
 
 # Skeleton
 
 ## Overview
 
-The `Skeleton` component provides a Bulma-styled skeleton loader for React applications, useful for indicating that content is loading. It can be used as a placeholder for headings, paragraphs, blocks, or custom content.
+<!-- bestax:generated overview -->
+
+The `Skeleton` component provides a Bulma-styled skeleton loader for React applications, useful for indicating that content is loading.
+
+<!-- /bestax:generated overview -->
+
+It can be used as a placeholder for headings, paragraphs, blocks, or custom content.
 
 :::info
 Use `Skeleton` to improve perceived performance and give users a visual cue that content is being fetched.
@@ -17,21 +24,13 @@ Use `Skeleton` to improve perceived performance and give users a visual cue that
 
 ## Import
 
+<!-- bestax:generated import -->
+
 ```tsx
 import { Skeleton } from '@allxsmith/bestax-bulma';
 ```
 
----
-
-## Props
-
-| Prop        | Type                                 | Default   | Description                                        |
-| ----------- | ------------------------------------ | --------- | -------------------------------------------------- |
-| `className` | `string`                             | —         | Additional CSS classes.                            |
-| `variant`   | `'block' \| 'lines'`                 | `'block'` | Skeleton variant: block (single block) or lines.   |
-| `lines`     | `number`                             | `3`       | Number of lines (only for `lines` variant).        |
-| `children`  | `React.ReactNode`                    | —         | Content inside the block (only for block variant). |
-| ...         | All standard `<div>` HTML attributes |           | Passed through to the root element.                |
+<!-- /bestax:generated import -->
 
 ---
 
@@ -238,3 +237,37 @@ The following components support the `skeleton` property for Bulma skeleton load
 
 - [Bulma Skeleton Documentation](https://bulma.io/documentation/features/skeletons/)
 - [Storybook: Skeleton Stories](https://bestax.io/storybook/?path=/story/elements-skeleton--default)
+
+---
+
+## Props
+
+<!-- bestax:generated props -->
+
+| Prop        | Type                            | Default   | Description                                        |
+| ----------- | ------------------------------- | --------- | -------------------------------------------------- |
+| `className` | `string`                        | —         | Additional CSS classes to apply                    |
+| `variant`   | `'block'` \| `'lines'`          | `'block'` | Skeleton variant: block (single block) or lines.   |
+| `lines`     | `number`                        | `3`       | Number of lines (only for `lines` variant).        |
+| `children`  | `React.ReactNode`               | —         | Content inside the block (only for block variant). |
+| `...`       | All standard `<div>` attributes | —         |                                                    |
+
+<!-- /bestax:generated props -->
+
+---
+
+## CSS & Sass Variables
+
+<!-- bestax:generated cssvars -->
+
+Bulma declares these variables globally rather than on `Skeleton`'s own element, so the defaults come from the theme. Override them anywhere above the component — on the element itself (via `className`/`style`) for a one-off, or on `:root` to retheme every instance. See [Theme](../helpers/theme.md).
+
+| CSS Variable                        | Sass Variable                | Default                     |
+| ----------------------------------- | ---------------------------- | --------------------------- |
+| `--bulma-skeleton-background`       | `$skeleton-background`       | `var(--bulma-border)`       |
+| `--bulma-skeleton-radius`           | `$skeleton-radius`           | `var(--bulma-radius-small)` |
+| `--bulma-skeleton-block-min-height` | `$skeleton-block-min-height` | `4.5em`                     |
+| `--bulma-skeleton-lines-gap`        | `$skeleton-lines-gap`        | `0.75em`                    |
+| `--bulma-skeleton-line-height`      | `$skeleton-line-height`      | `0.75em`                    |
+
+<!-- /bestax:generated cssvars -->
diff --git a/docs/docs/api/elements/span.md b/docs/docs/api/elements/span.md
index 4be2bd7d3..aa1cea41b 100644
--- a/docs/docs/api/elements/span.md
+++ b/docs/docs/api/elements/span.md
@@ -1,13 +1,20 @@
 ---
 title: Span
 sidebar_label: Span
+description: The `Span` component renders a styled inline `<span>` element with Bulma helper class integration.
 ---
 
 # Span
 
 ## Overview
 
-The `Span` component renders a styled inline `<span>` element with Bulma helper class integration. Use it for highlighting text, applying inline styles, or wrapping content that needs Bulma's typography and color utilities without affecting the document flow.
+<!-- bestax:generated overview -->
+
+The `Span` component renders a styled inline `<span>` element with Bulma helper class integration.
+
+<!-- /bestax:generated overview -->
+
+Use it for highlighting text, applying inline styles, or wrapping content that needs Bulma's typography and color utilities without affecting the document flow.
 
 :::info
 The Span component is a thin wrapper around the HTML `<span>` element, providing consistent Bulma styling and helper class support for inline content.
@@ -17,21 +24,13 @@ The Span component is a thin wrapper around the HTML `<span>` element, providing
 
 ## Import
 
+<!-- bestax:generated import -->
+
 ```tsx
 import { Span } from '@allxsmith/bestax-bulma';
 ```
 
----
-
-## Props
-
-| Prop        | Type                                                                                                                                                                                                                                                                                     | Default | Description                                      |
-| ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------ |
-| `className` | `string`                                                                                                                                                                                                                                                                                 | —       | Additional CSS classes.                          |
-| `textColor` | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` \| `'black'` \| `'black-bis'` \| `'black-ter'` \| `'grey-darker'` \| `'grey-dark'` \| `'grey'` \| `'grey-light'` \| `'grey-lighter'` \| `'white'` \| `'light'` \| `'dark'` \| `'inherit'` \| `'current'` | —       | Text color helper.                               |
-| `bgColor`   | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` \| `'black'` \| `'black-bis'` \| `'black-ter'` \| `'grey-darker'` \| `'grey-dark'` \| `'grey'` \| `'grey-light'` \| `'grey-lighter'` \| `'white'` \| `'light'` \| `'dark'` \| `'inherit'` \| `'current'` | —       | Background color helper.                         |
-| `children`  | `React.ReactNode`                                                                                                                                                                                                                                                                        | —       | Content to render inside the span.               |
-| ...         | All standard `<span>` and Bulma helper props                                                                                                                                                                                                                                             |         | (See [Helper Props](../helpers/usebulmaclasses)) |
+<!-- /bestax:generated import -->
 
 ---
 
@@ -154,3 +153,19 @@ For text that has semantic importance, consider using `<strong>` (Strong) or `<e
 
 - [Bulma Typography Helpers](https://bulma.io/documentation/helpers/typography-helpers/)
 - [Storybook: Span Stories](https://bestax.io/storybook/?path=/story/elements-span--default)
+
+---
+
+## Props
+
+<!-- bestax:generated props -->
+
+| Prop        | Type                                                                    | Default | Description                                       |
+| ----------- | ----------------------------------------------------------------------- | ------- | ------------------------------------------------- |
+| `className` | `string`                                                                | —       | Additional CSS classes to apply.                  |
+| `textColor` | [Bulma color](../helpers/valid-values.md) \| `'inherit'` \| `'current'` | —       | Text color helper.                                |
+| `bgColor`   | [Bulma color](../helpers/valid-values.md) \| `'inherit'` \| `'current'` | —       | Background color helper.                          |
+| `children`  | `React.ReactNode`                                                       | —       | Content to render inside the span.                |
+| `...`       | All standard `<span>` attributes and Bulma helper props                 | —       | See [Helper Props](../helpers/usebulmaclasses.md) |
+
+<!-- /bestax:generated props -->
diff --git a/docs/docs/api/elements/strong.md b/docs/docs/api/elements/strong.md
index fca6499b8..5f72bf1e0 100644
--- a/docs/docs/api/elements/strong.md
+++ b/docs/docs/api/elements/strong.md
@@ -1,13 +1,20 @@
 ---
 title: Strong
 sidebar_label: Strong
+description: The `Strong` component renders a styled `<strong>` element with Bulma helper class integration.
 ---
 
 # Strong
 
 ## Overview
 
-The `Strong` component renders a styled `<strong>` element with Bulma helper class integration. Use it for text that has strong importance, seriousness, or urgency. The `<strong>` element carries semantic meaning for screen readers and search engines.
+<!-- bestax:generated overview -->
+
+The `Strong` component renders a styled `<strong>` element with Bulma helper class integration.
+
+<!-- /bestax:generated overview -->
+
+Use it for text that has strong importance, seriousness, or urgency. The `<strong>` element carries semantic meaning for screen readers and search engines.
 
 :::info
 For visual-only bold styling without semantic meaning, use the `Span` component with `textWeight="bold"` instead.
@@ -17,21 +24,13 @@ For visual-only bold styling without semantic meaning, use the `Span` component
 
 ## Import
 
+<!-- bestax:generated import -->
+
 ```tsx
 import { Strong } from '@allxsmith/bestax-bulma';
 ```
 
----
-
-## Props
-
-| Prop        | Type                                                                                                                                                                                                                                                                                     | Default | Description                                      |
-| ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------ |
-| `className` | `string`                                                                                                                                                                                                                                                                                 | —       | Additional CSS classes.                          |
-| `textColor` | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` \| `'black'` \| `'black-bis'` \| `'black-ter'` \| `'grey-darker'` \| `'grey-dark'` \| `'grey'` \| `'grey-light'` \| `'grey-lighter'` \| `'white'` \| `'light'` \| `'dark'` \| `'inherit'` \| `'current'` | —       | Text color helper.                               |
-| `bgColor`   | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` \| `'black'` \| `'black-bis'` \| `'black-ter'` \| `'grey-darker'` \| `'grey-dark'` \| `'grey'` \| `'grey-light'` \| `'grey-lighter'` \| `'white'` \| `'light'` \| `'dark'` \| `'inherit'` \| `'current'` | —       | Background color helper.                         |
-| `children`  | `React.ReactNode`                                                                                                                                                                                                                                                                        | —       | Content to render inside the strong element.     |
-| ...         | All standard `<strong>` and Bulma helper props                                                                                                                                                                                                                                           |         | (See [Helper Props](../helpers/usebulmaclasses)) |
+<!-- /bestax:generated import -->
 
 ---
 
@@ -135,3 +134,34 @@ The `<strong>` element indicates strong importance. For visual-only bold styling
 
 - [MDN: strong element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong)
 - [Storybook: Strong Stories](https://bestax.io/storybook/?path=/story/elements-strong--default)
+
+---
+
+## Props
+
+<!-- bestax:generated props -->
+
+| Prop        | Type                                                                    | Default | Description                                       |
+| ----------- | ----------------------------------------------------------------------- | ------- | ------------------------------------------------- |
+| `className` | `string`                                                                | —       | Additional CSS classes to apply.                  |
+| `textColor` | [Bulma color](../helpers/valid-values.md) \| `'inherit'` \| `'current'` | —       | Text color helper.                                |
+| `bgColor`   | [Bulma color](../helpers/valid-values.md) \| `'inherit'` \| `'current'` | —       | Background color helper.                          |
+| `children`  | `React.ReactNode`                                                       | —       | Content to render inside the strong element.      |
+| `...`       | All standard HTML attributes and Bulma helper props                     | —       | See [Helper Props](../helpers/usebulmaclasses.md) |
+
+<!-- /bestax:generated props -->
+
+---
+
+## CSS & Sass Variables
+
+<!-- bestax:generated cssvars -->
+
+Bulma declares these variables globally rather than on `Strong`'s own element, so the defaults come from the theme. Override them anywhere above the component — on the element itself (via `className`/`style`) for a one-off, or on `:root` to retheme every instance. See [Theme](../helpers/theme.md).
+
+| CSS Variable            | Sass Variable    | Default                        |
+| ----------------------- | ---------------- | ------------------------------ |
+| `--bulma-strong-color`  | `$strong-color`  | `var(--bulma-text-strong)`     |
+| `--bulma-strong-weight` | `$strong-weight` | `var(--bulma-weight-semibold)` |
+
+<!-- /bestax:generated cssvars -->
diff --git a/docs/docs/api/elements/subtitle.md b/docs/docs/api/elements/subtitle.md
index 0fefdbbe9..9ee01b76d 100644
--- a/docs/docs/api/elements/subtitle.md
+++ b/docs/docs/api/elements/subtitle.md
@@ -1,13 +1,20 @@
 ---
 title: SubTitle
 sidebar_label: SubTitle
+description: The `SubTitle` component renders a Bulma-styled subtitle (secondary heading), supporting sizes `1-6` and rendering as any heading or paragraph element (`h1-h6`, `p`).
 ---
 
 # SubTitle
 
 ## Overview
 
-The `SubTitle` component renders a Bulma-styled subtitle (secondary heading), supporting sizes `1-6` and rendering as any heading or paragraph element (`h1-h6`, `p`). Use it for subheadings, section titles, and supporting text.
+<!-- bestax:generated overview -->
+
+The `SubTitle` component renders a Bulma-styled subtitle (secondary heading), supporting sizes `1-6` and rendering as any heading or paragraph element (`h1-h6`, `p`).
+
+<!-- /bestax:generated overview -->
+
+Use it for subheadings, section titles, and supporting text.
 
 :::info
 `SubTitle` helps create clarity in content structure, especially when paired with `Title`.
@@ -17,25 +24,13 @@ The `SubTitle` component renders a Bulma-styled subtitle (secondary heading), su
 
 ## Import
 
+<!-- bestax:generated import -->
+
 ```tsx
 import { SubTitle } from '@allxsmith/bestax-bulma';
 ```
 
----
-
-## Props
-
-| Prop          | Type                                                                                                                                                                                                                                                                                     | Default | Description                                              |
-| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | -------------------------------------------------------- |
-| `className`   | `string`                                                                                                                                                                                                                                                                                 | —       | Additional CSS classes.                                  |
-| `size`        | `'1' \| '2' \| '3' \| '4' \| '5' \| '6'`                                                                                                                                                                                                                                                 | —       | Size of the subtitle (Bulma sizes).                      |
-| `as`          | `'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6' \| 'p'`                                                                                                                                                                                                                                    | `'h1'`  | HTML element to render as.                               |
-| `hasSkeleton` | `boolean`                                                                                                                                                                                                                                                                                | —       | Applies the `has-skeleton` class to part of the content. |
-| `skeleton`    | `boolean`                                                                                                                                                                                                                                                                                | —       | Applies the `is-skeleton` class to the entire component. |
-| `children`    | `React.ReactNode`                                                                                                                                                                                                                                                                        | —       | Subtitle content.                                        |
-| `textColor`   | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` \| `'black'` \| `'black-bis'` \| `'black-ter'` \| `'grey-darker'` \| `'grey-dark'` \| `'grey'` \| `'grey-light'` \| `'grey-lighter'` \| `'white'` \| `'light'` \| `'dark'` \| `'inherit'` \| `'current'` | —       | Text color helper.                                       |
-| `bgColor`     | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` \| `'black'` \| `'black-bis'` \| `'black-ter'` \| `'grey-darker'` \| `'grey-dark'` \| `'grey'` \| `'grey-light'` \| `'grey-lighter'` \| `'white'` \| `'light'` \| `'dark'` \| `'inherit'` \| `'current'` | —       | Background color helper.                                 |
-| ...           | All standard heading/paragraph and Bulma helper props                                                                                                                                                                                                                                    |         | (See [Helper Props](../helpers/usebulmaclasses))         |
+<!-- /bestax:generated import -->
 
 ---
 
@@ -152,3 +147,52 @@ Combine `Title` and `SubTitle` components for a structured heading and subheadin
 
 - [Bulma Title Documentation (Subtitle)](https://bulma.io/documentation/elements/title/#subtitle)
 - [Storybook: SubTitle Stories](https://bestax.io/storybook/?path=/story/elements-subtitle--default)
+
+---
+
+## Props
+
+<!-- bestax:generated props -->
+
+| Prop          | Type                                                                    | Default | Description                                              |
+| ------------- | ----------------------------------------------------------------------- | ------- | -------------------------------------------------------- |
+| `className`   | `string`                                                                | —       | Additional CSS classes to apply.                         |
+| `size`        | `'1'` \| `'2'` \| `'3'` \| `'4'` \| `'5'` \| `'6'`                      | —       | Size of the subtitle (Bulma sizes).                      |
+| `as`          | `'h1'` \| `'h2'` \| `'h3'` \| `'h4'` \| `'h5'` \| `'h6'` \| `'p'`       | `'h1'`  | HTML element to render as (h1-h6 or p).                  |
+| `hasSkeleton` | `boolean`                                                               | `false` | Applies the `has-skeleton` class to part of the content. |
+| `children`    | `React.ReactNode`                                                       | —       | Subtitle content.                                        |
+| `textColor`   | [Bulma color](../helpers/valid-values.md) \| `'inherit'` \| `'current'` | —       | Text color helper.                                       |
+| `bgColor`     | [Bulma color](../helpers/valid-values.md) \| `'inherit'` \| `'current'` | —       | Background color helper.                                 |
+| `skeleton`    | `boolean`                                                               | —       | Applies the `is-skeleton` class to the entire component. |
+| `...`         | All standard `<h1>`–`<h6>` attributes and Bulma helper props            | —       | See [Helper Props](../helpers/usebulmaclasses.md)        |
+
+<!-- /bestax:generated props -->
+
+---
+
+## CSS & Sass Variables
+
+<!-- bestax:generated cssvars -->
+
+`SubTitle` registers these variables on its own `.subtitle` element. Override them there (or via `className`) — a value set on an ancestor is only inherited, and loses to the component-level declaration. See [Theme](../helpers/theme.md).
+
+| CSS Variable                     | Sass Variable             | Default                         |
+| -------------------------------- | ------------------------- | ------------------------------- |
+| `--bulma-title-color`            | `$title-color`            | `var(--bulma-text-strong)`      |
+| `--bulma-title-family`           | `$title-family`           | `false`                         |
+| `--bulma-title-size`             | `$title-size`             | `var(--bulma-size-3)`           |
+| `--bulma-title-weight`           | `$title-weight`           | `var(--bulma-weight-extrabold)` |
+| `--bulma-title-line-height`      | `$title-line-height`      | `1.125`                         |
+| `--bulma-title-strong-color`     | `$title-strong-color`     | `inherit`                       |
+| `--bulma-title-strong-weight`    | `$title-strong-weight`    | `inherit`                       |
+| `--bulma-title-sub-size`         | `$title-sub-size`         | `0.75em`                        |
+| `--bulma-title-sup-size`         | `$title-sup-size`         | `0.75em`                        |
+| `--bulma-subtitle-color`         | `$subtitle-color`         | `var(--bulma-text)`             |
+| `--bulma-subtitle-family`        | `$subtitle-family`        | `false`                         |
+| `--bulma-subtitle-size`          | `$subtitle-size`          | `var(--bulma-size-5)`           |
+| `--bulma-subtitle-weight`        | `$subtitle-weight`        | `var(--bulma-weight-normal)`    |
+| `--bulma-subtitle-line-height`   | `$subtitle-line-height`   | `1.25`                          |
+| `--bulma-subtitle-strong-color`  | `$subtitle-strong-color`  | `var(--bulma-text-strong)`      |
+| `--bulma-subtitle-strong-weight` | `$subtitle-strong-weight` | `var(--bulma-weight-semibold)`  |
+
+<!-- /bestax:generated cssvars -->
diff --git a/docs/docs/api/elements/table.md b/docs/docs/api/elements/table.md
index d31a49a08..2c2f0f17b 100644
--- a/docs/docs/api/elements/table.md
+++ b/docs/docs/api/elements/table.md
@@ -1,13 +1,20 @@
 ---
 title: Table
 sidebar_label: Table
+description: The `Table` component and its subcomponents provide a highly composable, Bulma-styled table system for React.
 ---
 
 # Table
 
 ## Overview
 
-The `Table` component and its subcomponents provide a highly composable, Bulma-styled table system for React. You get full access to Bulma’s table features—borders, stripes, narrow cells, hover effects, responsive scroll, cell/row coloring, and more—using idiomatic React patterns. All Bulma helper props for spacing and color are supported.
+<!-- bestax:generated overview -->
+
+The `Table` component and its subcomponents provide a highly composable, Bulma-styled table system for React.
+
+<!-- /bestax:generated overview -->
+
+You get full access to Bulma’s table features—borders, stripes, narrow cells, hover effects, responsive scroll, cell/row coloring, and more—using idiomatic React patterns. All Bulma helper props for spacing and color are supported.
 
 :::info
 Use the full suite: `Table`, `Thead`, `Tbody`, `Tfoot`, `Tr`, `Th`, and `Td` for maximum flexibility and Bulma compatibility.
@@ -17,6 +24,8 @@ Use the full suite: `Table`, `Thead`, `Tbody`, `Tfoot`, `Tr`, `Th`, and `Td` for
 
 ## Import
 
+<!-- bestax:generated import -->
+
 ```tsx
 import {
   Table,
@@ -29,61 +38,7 @@ import {
 } from '@allxsmith/bestax-bulma';
 ```
 
----
-
-## Props
-
-### Table
-
-| Prop           | Type                                          | Default | Description                                               |
-| -------------- | --------------------------------------------- | ------- | --------------------------------------------------------- |
-| `className`    | `string`                                      | —       | Additional CSS classes.                                   |
-| `isBordered`   | `boolean`                                     | —       | Adds borders to all cells.                                |
-| `isStriped`    | `boolean`                                     | —       | Adds zebra-striping to rows.                              |
-| `isNarrow`     | `boolean`                                     | —       | Makes the table more compact.                             |
-| `isHoverable`  | `boolean`                                     | —       | Adds a hover effect on rows.                              |
-| `isFullwidth`  | `boolean`                                     | —       | Makes the table span the full width of its parent.        |
-| `isResponsive` | `boolean`                                     | —       | Makes the table horizontally scrollable on small screens. |
-| `children`     | `ReactNode`                                   | —       | Table content (should use subcomponents).                 |
-| ...            | All standard `<table>` and Bulma helper props |         | (See [Helper Props](../helpers/usebulmaclasses))          |
-
-### Thead / Tbody / Tfoot
-
-| Prop        | Type                                      | Default | Description                                      |
-| ----------- | ----------------------------------------- | ------- | ------------------------------------------------ |
-| `className` | `string`                                  | —       | Additional CSS classes.                          |
-| `children`  | `ReactNode`                               | —       | Section content (typically `Tr` rows).           |
-| ...         | All standard props and Bulma helper props |         | (See [Helper Props](../helpers/usebulmaclasses)) |
-
-### Tr
-
-| Prop         | Type                                      | Default | Description                                      |
-| ------------ | ----------------------------------------- | ------- | ------------------------------------------------ |
-| `className`  | `string`                                  | —       | Additional CSS classes.                          |
-| `isSelected` | `boolean`                                 | —       | Adds Bulma's `is-selected` class.                |
-| `color`      | `TableColor`                              | —       | Bulma color modifier for the row.                |
-| `children`   | `ReactNode`                               | —       | Row content (typically `Th`/`Td`).               |
-| ...          | All standard props and Bulma helper props |         | (See [Helper Props](../helpers/usebulmaclasses)) |
-
-### Th
-
-| Prop        | Type                                      | Default | Description                                      |
-| ----------- | ----------------------------------------- | ------- | ------------------------------------------------ |
-| `className` | `string`                                  | —       | Additional CSS classes.                          |
-| `isAligned` | `'left' \| 'right' \| 'centered'`         | —       | Text alignment.                                  |
-| `width`     | `string \| number`                        | —       | Cell width (e.g., `'100px'`, `100`).             |
-| `color`     | `TableColor`                              | —       | Bulma color modifier for the header cell.        |
-| `children`  | `ReactNode`                               | —       | Header cell content.                             |
-| ...         | All standard props and Bulma helper props |         | (See [Helper Props](../helpers/usebulmaclasses)) |
-
-### Td
-
-| Prop        | Type                                      | Default | Description                                      |
-| ----------- | ----------------------------------------- | ------- | ------------------------------------------------ |
-| `className` | `string`                                  | —       | Additional CSS classes.                          |
-| `color`     | `TableColor`                              | —       | Bulma color modifier for the cell.               |
-| `children`  | `ReactNode`                               | —       | Cell content.                                    |
-| ...         | All standard props and Bulma helper props |         | (See [Helper Props](../helpers/usebulmaclasses)) |
+<!-- /bestax:generated import -->
 
 ---
 
@@ -295,3 +250,131 @@ For responsive tables, ensure your column headers are clear and concise for smal
 - [Bulma Table Documentation](https://bulma.io/documentation/elements/table/)
 - [Storybook: Table Stories](https://bestax.io/storybook/?path=/story/elements-table--default)
   :::
+
+---
+
+## Props
+
+### Table
+
+<!-- bestax:generated props -->
+
+| Prop           | Type                                                     | Default | Description                                                   |
+| -------------- | -------------------------------------------------------- | ------- | ------------------------------------------------------------- |
+| `className`    | `string`                                                 | —       | Additional CSS classes to apply.                              |
+| `isBordered`   | `boolean`                                                | `false` | Adds borders to all cells.                                    |
+| `isStriped`    | `boolean`                                                | `false` | Adds zebra-striping to rows.                                  |
+| `isNarrow`     | `boolean`                                                | `false` | Makes the table more compact by cutting cell padding in half. |
+| `isHoverable`  | `boolean`                                                | `false` | Adds a hover effect on rows.                                  |
+| `isFullwidth`  | `boolean`                                                | `false` | Makes the table span the full width of its parent.            |
+| `isResponsive` | `boolean`                                                | `false` | Makes the table horizontally scrollable on small screens.     |
+| `children`     | `React.ReactNode`                                        | —       | Table content (should use subcomponents).                     |
+| `...`          | All standard `<table>` attributes and Bulma helper props | —       | See [Helper Props](../helpers/usebulmaclasses.md)             |
+
+**Subcomponents:**
+
+- `Table.Thead`: Thead component for rendering a styled Bulma table header. Supports Bulma helper classes for additional styling.
+- `Table.Tbody`: Tbody component for rendering a styled Bulma table body. Supports Bulma helper classes for additional styling.
+- `Table.Tfoot`: Tfoot component for rendering a styled Bulma table footer. Supports Bulma helper classes for additional styling.
+- `Table.Tr`: Tr component for rendering a styled Bulma table row. Supports the is-selected modifier and color modifiers.
+- `Table.Th`: Th component for rendering a styled Bulma table header cell. Supports alignment, width, and color modifiers.
+- `Table.Td`: Td component for rendering a styled Bulma table cell. Supports Bulma color modifiers and helper classes for additional styling.
+
+### Table.Thead
+
+| Prop        | Type                                                               | Default | Description                                       |
+| ----------- | ------------------------------------------------------------------ | ------- | ------------------------------------------------- |
+| `className` | `string`                                                           | —       | Additional CSS classes to apply.                  |
+| `children`  | `React.ReactNode`                                                  | —       | Table header content (rows).                      |
+| `...`       | All standard `<thead>`/`<tbody>` attributes and Bulma helper props | —       | See [Helper Props](../helpers/usebulmaclasses.md) |
+
+### Table.Tbody
+
+| Prop        | Type                                                               | Default | Description                                       |
+| ----------- | ------------------------------------------------------------------ | ------- | ------------------------------------------------- |
+| `className` | `string`                                                           | —       | Additional CSS classes to apply.                  |
+| `children`  | `React.ReactNode`                                                  | —       | Table body content (rows).                        |
+| `...`       | All standard `<thead>`/`<tbody>` attributes and Bulma helper props | —       | See [Helper Props](../helpers/usebulmaclasses.md) |
+
+### Table.Tfoot
+
+| Prop        | Type                                                               | Default | Description                                       |
+| ----------- | ------------------------------------------------------------------ | ------- | ------------------------------------------------- |
+| `className` | `string`                                                           | —       | Additional CSS classes to apply.                  |
+| `children`  | `React.ReactNode`                                                  | —       | Table footer content (rows).                      |
+| `...`       | All standard `<thead>`/`<tbody>` attributes and Bulma helper props | —       | See [Helper Props](../helpers/usebulmaclasses.md) |
+
+### Table.Tr
+
+| Prop         | Type                                                  | Default | Description                                                   |
+| ------------ | ----------------------------------------------------- | ------- | ------------------------------------------------------------- |
+| `className`  | `string`                                              | —       | Additional CSS classes to apply.                              |
+| `isSelected` | `boolean`                                             | `false` | Whether the row is selected (adds Bulma's is-selected class). |
+| `color`      | `TableColor`                                          | —       | Bulma color modifier for the table row.                       |
+| `children`   | `React.ReactNode`                                     | —       | Table row content (cells).                                    |
+| `...`        | All standard `<tr>` attributes and Bulma helper props | —       | See [Helper Props](../helpers/usebulmaclasses.md)             |
+
+**Types:**
+
+- `TableColor`: `'primary'` | `'link'` | `'info'` | `'success'` | `'warning'` | `'danger'` | `'black'` | `'dark'` | `'light'` | `'white'` — Valid color values for the Td component (Bulma table cell colors).
+
+### Table.Th
+
+| Prop        | Type                                                         | Default | Description                                                       |
+| ----------- | ------------------------------------------------------------ | ------- | ----------------------------------------------------------------- |
+| `className` | `string`                                                     | —       | Additional CSS classes to apply.                                  |
+| `isAligned` | `'left'` \| `'right'` \| `'centered'`                        | —       | Text alignment for the header cell ('left', 'right', 'centered'). |
+| `width`     | `string` \| `number`                                         | —       | Width of the header cell (e.g., '100px' or 100).                  |
+| `color`     | `TableColor`                                                 | —       | Bulma color modifier for the header cell.                         |
+| `children`  | `React.ReactNode`                                            | —       | Table header cell content.                                        |
+| `...`       | All standard `<td>`/`<th>` attributes and Bulma helper props | —       | See [Helper Props](../helpers/usebulmaclasses.md)                 |
+
+**Types:**
+
+- `TableColor`: `'primary'` | `'link'` | `'info'` | `'success'` | `'warning'` | `'danger'` | `'black'` | `'dark'` | `'light'` | `'white'` — Valid color values for the Td component (Bulma table cell colors).
+
+### Table.Td
+
+| Prop        | Type                                                         | Default | Description                                       |
+| ----------- | ------------------------------------------------------------ | ------- | ------------------------------------------------- |
+| `className` | `string`                                                     | —       | Additional CSS classes to apply.                  |
+| `color`     | `TableColor`                                                 | —       | Bulma color modifier for the table cell.          |
+| `children`  | `React.ReactNode`                                            | —       | Table cell content.                               |
+| `...`       | All standard `<td>`/`<th>` attributes and Bulma helper props | —       | See [Helper Props](../helpers/usebulmaclasses.md) |
+
+**Types:**
+
+- `TableColor`: `'primary'` | `'link'` | `'info'` | `'success'` | `'warning'` | `'danger'` | `'black'` | `'dark'` | `'light'` | `'white'` — Valid color values for the Td component (Bulma table cell colors).
+
+<!-- /bestax:generated props -->
+
+## CSS & Sass Variables
+
+<!-- bestax:generated cssvars -->
+
+`Table` registers these variables on its own `.table` element. Override them there (or via `className`) — a value set on an ancestor is only inherited, and loses to the component-level declaration. See [Theme](../helpers/theme.md).
+
+| CSS Variable                                            | Sass Variable                                    | Default                        |
+| ------------------------------------------------------- | ------------------------------------------------ | ------------------------------ |
+| `--bulma-table-color`                                   | `$table-color`                                   | `var(--bulma-text-strong)`     |
+| `--bulma-table-background-color`                        | `$table-background-color`                        | `var(--bulma-scheme-main)`     |
+| `--bulma-table-cell-border-color`                       | `$table-cell-border-color`                       | `var(--bulma-border)`          |
+| `--bulma-table-cell-border-style`                       | `$table-cell-border-style`                       | `solid`                        |
+| `--bulma-table-cell-border-width`                       | `$table-cell-border-width`                       | `0 0 1px`                      |
+| `--bulma-table-cell-padding`                            | `$table-cell-padding`                            | `0.5em 0.75em`                 |
+| `--bulma-table-cell-heading-color`                      | `$table-cell-heading-color`                      | `var(--bulma-text-strong)`     |
+| `--bulma-table-cell-text-align`                         | `$table-cell-text-align`                         | `left`                         |
+| `--bulma-table-head-cell-border-width`                  | `$table-head-cell-border-width`                  | `0 0 2px`                      |
+| `--bulma-table-head-cell-color`                         | `$table-head-cell-color`                         | `var(--bulma-text-strong)`     |
+| `--bulma-table-foot-cell-border-width`                  | `$table-foot-cell-border-width`                  | `2px 0 0`                      |
+| `--bulma-table-foot-cell-color`                         | `$table-foot-cell-color`                         | `var(--bulma-text-strong)`     |
+| `--bulma-table-head-background-color`                   | `$table-head-background-color`                   | `transparent`                  |
+| `--bulma-table-body-background-color`                   | `$table-body-background-color`                   | `transparent`                  |
+| `--bulma-table-foot-background-color`                   | `$table-foot-background-color`                   | `transparent`                  |
+| `--bulma-table-row-hover-background-color`              | `$table-row-hover-background-color`              | `var(--bulma-scheme-main-bis)` |
+| `--bulma-table-row-active-background-color`             | `$table-row-active-background-color`             | `var(--bulma-primary)`         |
+| `--bulma-table-row-active-color`                        | `$table-row-active-color`                        | `var(--bulma-primary-invert)`  |
+| `--bulma-table-striped-row-even-background-color`       | `$table-striped-row-even-background-color`       | `var(--bulma-scheme-main-bis)` |
+| `--bulma-table-striped-row-even-hover-background-color` | `$table-striped-row-even-hover-background-color` | `var(--bulma-scheme-main-ter)` |
+
+<!-- /bestax:generated cssvars -->
diff --git a/docs/docs/api/elements/tag.md b/docs/docs/api/elements/tag.md
index 69954f8b0..268bf04c2 100644
--- a/docs/docs/api/elements/tag.md
+++ b/docs/docs/api/elements/tag.md
@@ -1,13 +1,20 @@
 ---
 title: Tag
 sidebar_label: Tag
+description: The `Tag` component renders a Bulma-styled label or badge.
 ---
 
 # Tag
 
 ## Overview
 
-The `Tag` component renders a Bulma-styled label or badge. It supports color, size, rounded, hoverable, and delete (close) variants. Use it for status indicators, categorization, dismissible tokens, or compact UI elements.
+<!-- bestax:generated overview -->
+
+The `Tag` component renders a Bulma-styled label or badge.
+
+<!-- /bestax:generated overview -->
+
+It supports color, size, rounded, hoverable, and delete (close) variants. Use it for status indicators, categorization, dismissible tokens, or compact UI elements.
 
 :::info
 Tags are perfect for highlighting statuses, categories, or adding removable tokens to your UI.
@@ -17,25 +24,13 @@ Tags are perfect for highlighting statuses, categories, or adding removable toke
 
 ## Import
 
+<!-- bestax:generated import -->
+
 ```tsx
 import { Tag } from '@allxsmith/bestax-bulma';
 ```
 
----
-
-## Props
-
-| Prop          | Type                                                                                                             | Default | Description                                      |
-| ------------- | ---------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------ |
-| `className`   | `string`                                                                                                         | —       | Additional CSS classes.                          |
-| `color`       | `'primary' \| 'link' \| 'info' \| 'success' \| 'warning' \| 'danger' \| 'black' \| 'dark' \| 'light' \| 'white'` | —       | Bulma color modifier for the tag.                |
-| `size`        | `'normal' \| 'medium' \| 'large'`                                                                                | —       | Tag size.                                        |
-| `isRounded`   | `boolean`                                                                                                        | —       | Renders a rounded tag.                           |
-| `isDelete`    | `boolean`                                                                                                        | —       | Renders a delete-style tag (delete button).      |
-| `isHoverable` | `boolean`                                                                                                        | —       | Adds hover effect to the tag.                    |
-| `onDelete`    | `() => void`                                                                                                     | —       | Callback for delete tag/button.                  |
-| `children`    | `React.ReactNode`                                                                                                | —       | Tag content.                                     |
-| ...           | All standard `<span>` and Bulma helper props                                                                     |         | (See [Helper Props](../helpers/usebulmaclasses)) |
+<!-- /bestax:generated import -->
 
 ---
 
@@ -200,3 +195,49 @@ Combine `Tag` with `Tags` for grouped, multi-tag UIs.
 
 - [Bulma Tag Documentation](https://bulma.io/documentation/elements/tag/)
 - [Storybook: Tag Stories](https://bestax.io/storybook/?path=/story/elements-tag--default)
+
+---
+
+## Props
+
+<!-- bestax:generated props -->
+
+| Prop          | Type                                                    | Default | Description                                       |
+| ------------- | ------------------------------------------------------- | ------- | ------------------------------------------------- |
+| `className`   | `string`                                                | —       | Additional CSS classes to apply.                  |
+| `color`       | `TagColor`                                              | —       | Bulma color modifier for the tag.                 |
+| `size`        | `'normal'` \| `'medium'` \| `'large'`                   | —       | Tag size.                                         |
+| `isRounded`   | `boolean`                                               | `false` | Renders a rounded tag.                            |
+| `isDelete`    | `boolean`                                               | `false` | Renders a delete-style tag (delete button).       |
+| `isHoverable` | `boolean`                                               | `false` | Adds hover effect to the tag.                     |
+| `onDelete`    | `() => void`                                            | —       | Callback for delete tag/button.                   |
+| `children`    | `React.ReactNode`                                       | —       | Tag content.                                      |
+| `...`         | All standard `<span>` attributes and Bulma helper props | —       | See [Helper Props](../helpers/usebulmaclasses.md) |
+
+**Types:**
+
+- `TagColor`: `'primary'` | `'link'` | `'info'` | `'success'` | `'warning'` | `'danger'` | `'black'` | `'dark'` | `'light'` | `'white'` — Valid color values for the Tag component (Bulma tag colors).
+
+<!-- /bestax:generated props -->
+
+---
+
+## CSS & Sass Variables
+
+<!-- bestax:generated cssvars -->
+
+`Tag` registers these variables on its own `.tag` element. Override them there (or via `className`) — a value set on an ancestor is only inherited, and loses to the component-level declaration. See [Theme](../helpers/theme.md).
+
+| CSS Variable                            | Sass Variable                    | Default                                  |
+| --------------------------------------- | -------------------------------- | ---------------------------------------- |
+| `--bulma-tag-h`                         | `$tag-h`                         | `var(--bulma-scheme-h)`                  |
+| `--bulma-tag-s`                         | `$tag-s`                         | `var(--bulma-scheme-s)`                  |
+| `--bulma-tag-background-l`              | `$tag-background-l`              | `var(--bulma-background-l)`              |
+| `--bulma-tag-background-l-delta`        | `$tag-background-l-delta`        | `0%`                                     |
+| `--bulma-tag-hover-background-l-delta`  | `$tag-hover-background-l-delta`  | `var(--bulma-hover-background-l-delta)`  |
+| `--bulma-tag-active-background-l-delta` | `$tag-active-background-l-delta` | `var(--bulma-active-background-l-delta)` |
+| `--bulma-tag-color-l`                   | `$tag-color-l`                   | `var(--bulma-text-l)`                    |
+| `--bulma-tag-radius`                    | `$tag-radius`                    | `var(--bulma-radius)`                    |
+| `--bulma-tag-delete-margin`             | `$tag-delete-margin`             | `1px`                                    |
+
+<!-- /bestax:generated cssvars -->
diff --git a/docs/docs/api/elements/tags.md b/docs/docs/api/elements/tags.md
index 91c48950a..2b0a3b2d5 100644
--- a/docs/docs/api/elements/tags.md
+++ b/docs/docs/api/elements/tags.md
@@ -1,13 +1,20 @@
 ---
 title: Tags
 sidebar_label: Tags
+description: The `Tags` component groups multiple `Tag` components together in a horizontal (or multiline) Bulma-styled container.
 ---
 
 # Tags
 
 ## Overview
 
-The `Tags` component groups multiple `Tag` components together in a horizontal (or multiline) Bulma-styled container. Use it for tag clouds, keyword lists, multi-select UIs, or displaying collections of dismissible tokens.
+<!-- bestax:generated overview -->
+
+The `Tags` component groups multiple `Tag` components together in a horizontal (or multiline) Bulma-styled container.
+
+<!-- /bestax:generated overview -->
+
+Use it for tag clouds, keyword lists, multi-select UIs, or displaying collections of dismissible tokens.
 
 :::info
 Use `Tags` to organize tags with add-on and multiline layouts for a clean, compact UI.
@@ -17,21 +24,13 @@ Use `Tags` to organize tags with add-on and multiline layouts for a clean, compa
 
 ## Import
 
+<!-- bestax:generated import -->
+
 ```tsx
 import { Tags } from '@allxsmith/bestax-bulma';
 ```
 
----
-
-## Props
-
-| Prop          | Type                                        | Default | Description                                      |
-| ------------- | ------------------------------------------- | ------- | ------------------------------------------------ |
-| `className`   | `string`                                    | —       | Additional CSS classes.                          |
-| `hasAddons`   | `boolean`                                   | —       | Group tags together as add-ons (no spacing).     |
-| `isMultiline` | `boolean`                                   | —       | Allow tags to wrap onto multiple lines.          |
-| `children`    | `ReactNode`                                 | —       | Tag elements to render inside the container.     |
-| ...           | All standard `<div>` and Bulma helper props |         | (See [Helper Props](../helpers/usebulmaclasses)) |
+<!-- /bestax:generated import -->
 
 ---
 
@@ -159,3 +158,23 @@ Use `hasAddons` for tightly grouped tags (no space between them).
 
 - [Bulma Tags Documentation](https://bulma.io/documentation/elements/tag/#list-of-tags)
 - [Storybook: Tag Stories](https://bestax.io/storybook/?path=/story/elements-tag--default)
+
+---
+
+## Props
+
+<!-- bestax:generated props -->
+
+| Prop          | Type                                                   | Default | Description                                       |
+| ------------- | ------------------------------------------------------ | ------- | ------------------------------------------------- |
+| `className`   | `string`                                               | —       | Additional CSS classes to apply.                  |
+| `hasAddons`   | `boolean`                                              | `false` | Group tags together as add-ons (no spacing).      |
+| `isMultiline` | `boolean`                                              | `false` | Allow tags to wrap onto multiple lines.           |
+| `children`    | `React.ReactNode`                                      | —       | Tag elements to render inside the container.      |
+| `...`         | All standard `<div>` attributes and Bulma helper props | —       | See [Helper Props](../helpers/usebulmaclasses.md) |
+
+**Subcomponents:**
+
+- [`Tags.Tag`](tag.md): The `Tag` component renders a Bulma-styled label or badge.
+
+<!-- /bestax:generated props -->
diff --git a/docs/docs/api/elements/title.md b/docs/docs/api/elements/title.md
index 535f4a6b7..7a1ccdf0c 100644
--- a/docs/docs/api/elements/title.md
+++ b/docs/docs/api/elements/title.md
@@ -1,13 +1,20 @@
 ---
 title: Title
 sidebar_label: Title
+description: The `Title` component renders a Bulma-styled title (heading), supporting sizes `1`-`6`, spacing, and rendering as any heading or paragraph element (`h1`-`h6`, `p`).
 ---
 
 # Title
 
 ## Overview
 
-The `Title` component renders a Bulma-styled title (heading), supporting sizes `1`-`6`, spacing, and rendering as any heading or paragraph element (`h1`-`h6`, `p`). Use it for section headings, page titles, and prominent text.
+<!-- bestax:generated overview -->
+
+The `Title` component renders a Bulma-styled title (heading), supporting sizes `1`-`6`, spacing, and rendering as any heading or paragraph element (`h1`-`h6`, `p`).
+
+<!-- /bestax:generated overview -->
+
+Use it for section headings, page titles, and prominent text.
 
 :::info
 Pair `Title` with `SubTitle` for semantic and visually balanced headings.
@@ -17,26 +24,13 @@ Pair `Title` with `SubTitle` for semantic and visually balanced headings.
 
 ## Import
 
+<!-- bestax:generated import -->
+
 ```tsx
 import { Title } from '@allxsmith/bestax-bulma';
 ```
 
----
-
-## Props
-
-| Prop          | Type                                                                                                                                                                                                                                                                                     | Default | Description                                              |
-| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | -------------------------------------------------------- |
-| `className`   | `string`                                                                                                                                                                                                                                                                                 | —       | Additional CSS classes.                                  |
-| `size`        | `'1' \| '2' \| '3' \| '4' \| '5' \| '6'`                                                                                                                                                                                                                                                 | —       | Size of the title (Bulma sizes).                         |
-| `isSpaced`    | `boolean`                                                                                                                                                                                                                                                                                | —       | Adds margin below the title.                             |
-| `as`          | `'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6' \| 'p'`                                                                                                                                                                                                                                    | `'h1'`  | HTML element to render as.                               |
-| `hasSkeleton` | `boolean`                                                                                                                                                                                                                                                                                | —       | Applies the `has-skeleton` class to part of the content. |
-| `skeleton`    | `boolean`                                                                                                                                                                                                                                                                                | —       | Applies the `is-skeleton` class to the entire component. |
-| `children`    | `React.ReactNode`                                                                                                                                                                                                                                                                        | —       | Title content.                                           |
-| `textColor`   | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` \| `'black'` \| `'black-bis'` \| `'black-ter'` \| `'grey-darker'` \| `'grey-dark'` \| `'grey'` \| `'grey-light'` \| `'grey-lighter'` \| `'white'` \| `'light'` \| `'dark'` \| `'inherit'` \| `'current'` | —       | Text color helper.                                       |
-| `bgColor`     | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` \| `'black'` \| `'black-bis'` \| `'black-ter'` \| `'grey-darker'` \| `'grey-dark'` \| `'grey'` \| `'grey-light'` \| `'grey-lighter'` \| `'white'` \| `'light'` \| `'dark'` \| `'inherit'` \| `'current'` | —       | Background color helper.                                 |
-| ...           | All standard heading/paragraph and Bulma helper props                                                                                                                                                                                                                                    |         | (See [Helper Props](../helpers/usebulmaclasses))         |
+<!-- /bestax:generated import -->
 
 ---
 
@@ -162,3 +156,53 @@ When using `as="p"`, the element is visually styled as a heading but semanticall
 
 - [Bulma Title Documentation](https://bulma.io/documentation/elements/title/)
 - [Storybook: Title Stories](https://bestax.io/storybook/?path=/story/elements-title--default)
+
+---
+
+## Props
+
+<!-- bestax:generated props -->
+
+| Prop          | Type                                                                    | Default | Description                                              |
+| ------------- | ----------------------------------------------------------------------- | ------- | -------------------------------------------------------- |
+| `className`   | `string`                                                                | —       | Additional CSS classes to apply.                         |
+| `size`        | `'1'` \| `'2'` \| `'3'` \| `'4'` \| `'5'` \| `'6'`                      | —       | Size of the title (Bulma sizes).                         |
+| `isSpaced`    | `boolean`                                                               | `false` | Adds margin below the title.                             |
+| `as`          | `'h1'` \| `'h2'` \| `'h3'` \| `'h4'` \| `'h5'` \| `'h6'` \| `'p'`       | `'h1'`  | HTML element to render as (h1-h6 or p).                  |
+| `hasSkeleton` | `boolean`                                                               | `false` | Applies the `has-skeleton` class to part of the content. |
+| `children`    | `React.ReactNode`                                                       | —       | Title content.                                           |
+| `textColor`   | [Bulma color](../helpers/valid-values.md) \| `'inherit'` \| `'current'` | —       | Text color helper.                                       |
+| `bgColor`     | [Bulma color](../helpers/valid-values.md) \| `'inherit'` \| `'current'` | —       | Background color helper.                                 |
+| `skeleton`    | `boolean`                                                               | —       | Applies the `is-skeleton` class to the entire component. |
+| `...`         | All standard `<h1>`–`<h6>` attributes and Bulma helper props            | —       | See [Helper Props](../helpers/usebulmaclasses.md)        |
+
+<!-- /bestax:generated props -->
+
+---
+
+## CSS & Sass Variables
+
+<!-- bestax:generated cssvars -->
+
+`Title` registers these variables on its own `.title` element. Override them there (or via `className`) — a value set on an ancestor is only inherited, and loses to the component-level declaration. See [Theme](../helpers/theme.md).
+
+| CSS Variable                     | Sass Variable             | Default                         |
+| -------------------------------- | ------------------------- | ------------------------------- |
+| `--bulma-title-color`            | `$title-color`            | `var(--bulma-text-strong)`      |
+| `--bulma-title-family`           | `$title-family`           | `false`                         |
+| `--bulma-title-size`             | `$title-size`             | `var(--bulma-size-3)`           |
+| `--bulma-title-weight`           | `$title-weight`           | `var(--bulma-weight-extrabold)` |
+| `--bulma-title-line-height`      | `$title-line-height`      | `1.125`                         |
+| `--bulma-title-strong-color`     | `$title-strong-color`     | `inherit`                       |
+| `--bulma-title-strong-weight`    | `$title-strong-weight`    | `inherit`                       |
+| `--bulma-title-sub-size`         | `$title-sub-size`         | `0.75em`                        |
+| `--bulma-title-sup-size`         | `$title-sup-size`         | `0.75em`                        |
+| `--bulma-subtitle-color`         | `$subtitle-color`         | `var(--bulma-text)`             |
+| `--bulma-subtitle-family`        | `$subtitle-family`        | `false`                         |
+| `--bulma-subtitle-size`          | `$subtitle-size`          | `var(--bulma-size-5)`           |
+| `--bulma-subtitle-weight`        | `$subtitle-weight`        | `var(--bulma-weight-normal)`    |
+| `--bulma-subtitle-line-height`   | `$subtitle-line-height`   | `1.25`                          |
+| `--bulma-subtitle-strong-color`  | `$subtitle-strong-color`  | `var(--bulma-text-strong)`      |
+| `--bulma-subtitle-strong-weight` | `$subtitle-strong-weight` | `var(--bulma-weight-semibold)`  |
+
+<!-- /bestax:generated cssvars -->
diff --git a/docs/docs/api/elements/unorderedlist.md b/docs/docs/api/elements/unorderedlist.md
index 7312705c1..b674d014f 100644
--- a/docs/docs/api/elements/unorderedlist.md
+++ b/docs/docs/api/elements/unorderedlist.md
@@ -1,13 +1,20 @@
 ---
 title: UnorderedList
 sidebar_label: UnorderedList
+description: The `UnorderedList` component renders a styled unordered list (`<ul>`) element with Bulma helper class integration.
 ---
 
 # UnorderedList
 
 ## Overview
 
-The `UnorderedList` component renders a styled unordered list (`<ul>`) element with Bulma helper class integration. Use it with `ListItem` components to create bulleted lists with consistent styling.
+<!-- bestax:generated overview -->
+
+The `UnorderedList` component renders a styled unordered list (`<ul>`) element with Bulma helper class integration.
+
+<!-- /bestax:generated overview -->
+
+Use it with `ListItem` components to create bulleted lists with consistent styling.
 
 :::info
 The UnorderedList component is a thin wrapper around the HTML `<ul>` element, providing consistent Bulma styling and helper class support.
@@ -17,21 +24,13 @@ The UnorderedList component is a thin wrapper around the HTML `<ul>` element, pr
 
 ## Import
 
+<!-- bestax:generated import -->
+
 ```tsx
 import { UnorderedList, ListItem } from '@allxsmith/bestax-bulma';
 ```
 
----
-
-## Props
-
-| Prop        | Type                                                                                                                                                                                                                                                                                     | Default | Description                                      |
-| ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------ |
-| `className` | `string`                                                                                                                                                                                                                                                                                 | —       | Additional CSS classes.                          |
-| `textColor` | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` \| `'black'` \| `'black-bis'` \| `'black-ter'` \| `'grey-darker'` \| `'grey-dark'` \| `'grey'` \| `'grey-light'` \| `'grey-lighter'` \| `'white'` \| `'light'` \| `'dark'` \| `'inherit'` \| `'current'` | —       | Text color helper.                               |
-| `bgColor`   | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` \| `'black'` \| `'black-bis'` \| `'black-ter'` \| `'grey-darker'` \| `'grey-dark'` \| `'grey'` \| `'grey-light'` \| `'grey-lighter'` \| `'white'` \| `'light'` \| `'dark'` \| `'inherit'` \| `'current'` | —       | Background color helper.                         |
-| `children`  | `React.ReactNode`                                                                                                                                                                                                                                                                        | —       | List items to render inside the list.            |
-| ...         | All standard `<ul>` and Bulma helper props                                                                                                                                                                                                                                               |         | (See [Helper Props](../helpers/usebulmaclasses)) |
+<!-- /bestax:generated import -->
 
 ---
 
@@ -160,3 +159,23 @@ Use `UnorderedList` when the order of items is not significant. For ordered cont
 
 - [MDN: ul element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul)
 - [Storybook: UnorderedList Stories](https://bestax.io/storybook/?path=/story/elements-unorderedlist--default)
+
+---
+
+## Props
+
+<!-- bestax:generated props -->
+
+| Prop        | Type                                                                    | Default | Description                                       |
+| ----------- | ----------------------------------------------------------------------- | ------- | ------------------------------------------------- |
+| `className` | `string`                                                                | —       | Additional CSS classes to apply.                  |
+| `textColor` | [Bulma color](../helpers/valid-values.md) \| `'inherit'` \| `'current'` | —       | Text color helper.                                |
+| `bgColor`   | [Bulma color](../helpers/valid-values.md) \| `'inherit'` \| `'current'` | —       | Background color helper.                          |
+| `children`  | `React.ReactNode`                                                       | —       | List items to render inside the list.             |
+| `...`       | All standard `<ul>` attributes and Bulma helper props                   | —       | See [Helper Props](../helpers/usebulmaclasses.md) |
+
+**Subcomponents:**
+
+- [`UnorderedList.Item`](listitem.md): The `ListItem` component renders a styled list item (`<li>`) element with Bulma helper class integration.
+
+<!-- /bestax:generated props -->
diff --git a/scripts/lib/api-sources.mjs b/scripts/lib/api-sources.mjs
index ac9eead42..c14073230 100644
--- a/scripts/lib/api-sources.mjs
+++ b/scripts/lib/api-sources.mjs
@@ -19,6 +19,7 @@
  */
 export const ORDERED_CATEGORIES = new Set([
   'columns',
+  'elements',
   'grid',
   'helpers',
   'layout',
@@ -35,7 +36,12 @@ export const ORDERED_CATEGORIES = new Set([
 // lands the tooling and its CI gates, and each category is migrated in its own
 // follow-up so the page diffs stay reviewable. The gates below are live from
 // this commit — they simply have nothing to police yet.
-export const MANAGED_CATEGORIES = new Set(['columns', 'grid', 'layout']);
+export const MANAGED_CATEGORIES = new Set([
+  'columns',
+  'elements',
+  'grid',
+  'layout',
+]);
 
 /**
  * Pages that are ordered but never generated.