@allxsmith/bestax-bulma 5.8.0 → 5.8.2

package/dist/index.esm.js

@@ -952,7 +952,7 @@ const useBulmaClasses = (props) => {
 };
 
 /**
- * Bulma Column component for responsive grid layouts.
+ * The `Column` component provides a single responsive layout column using Bulma's flexbox-based column system.
  *
  * @function
  * @param {ColumnProps} props - Props for the Column component.
@@ -1014,7 +1014,7 @@ function withSubComponents(base, subs, displayName) {
 }
 
 /**
- * Bulma Columns container for flexible, responsive layouts.
+ * The `Columns` component provides Bulma's flexible, responsive grid container for aligning and distributing [`Column`](./column.md) components.
  *
  * @function
  * @param {ColumnsProps} props - Props for the Columns component.
@@ -1118,11 +1118,7 @@ function DefaultAvatarIcon() {
     return (jsx("svg", { viewBox: "0 0 24 24", width: "60%", height: "60%", "aria-hidden": "true", children: jsx("path", { fill: "currentColor", d: "M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-4.42 0-9 2.24-9 5v2a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1v-2c0-2.76-4.58-5-9-5Z" }) }));
 }
 /**
- * Avatar component for representing a person or entity as a compact image.
- *
- * Falls back automatically: `src` (image) -> initials (from `initials`/`name`) -> `icon` ->
- * a generic default icon. Initials avatars get a stable auto background color derived from
- * `name` unless `color` is set.
+ * The `Avatar` component represents a person or entity as a compact image.
  *
  * @function
  * @param {AvatarProps} props - Props for the Avatar component.
@@ -1239,10 +1235,7 @@ function flattenChildren(children, keyPrefix = '') {
     });
 }
 /**
- * Avatars component for rendering an overlapping/stacked group of `Avatar`s.
- *
- * Clamps to `max`, rendering the overflow as a single "+N" surplus avatar. Mirrors the
- * `Tags`/`Buttons` sibling-plural-container convention.
+ * The `Avatars` component renders an overlapping/stacked group of `Avatar`s, the "members" list pattern.
  *
  * @function
  * @param {AvatarsProps} props - Props for the Avatars component.
@@ -1305,13 +1298,7 @@ const badgeColors = [
     'white',
 ];
 /**
- * Badge component for a small status/count indicator overlaid on the corner of another
- * element (or rendered standalone).
- *
- * Renders `{max}+` when a numeric `content` exceeds `max` and no-ops its `pulse` animation
- * under `prefers-reduced-motion: reduce`. At `0` without `showZero` the pill is visually
- * hidden but stays mounted, so its `role="status"` live region announces a later `0 -> 1`
- * change.
+ * The `Badge` component is a small status/count indicator overlaid on the corner of another element, or rendered standalone.
  *
  * @function
  * @param {BadgeProps} props - Props for the Badge component.
@@ -1404,9 +1391,7 @@ const validBreadcrumbSeparators = [
 ];
 const validBreadcrumbSizes = ['small', 'medium', 'large'];
 /**
- * Breadcrumb component for rendering a styled Bulma breadcrumb navigation.
- *
- * Supports alignment, separator styles, and sizes.
+ * The `Breadcrumb` component renders a Bulma-styled breadcrumb navigation.
  *
  * @function
  * @param {BreadcrumbProps} props - Props for the Breadcrumb component.
@@ -1457,17 +1442,17 @@ const hasCompoundComponents = (children) => {
     });
 };
 /**
- * Card component for rendering a styled Bulma card.
+ * The `Card` component renders a Bulma-styled card with optional header, image, content, and footer.
  *
  * @function
  * @param {CardProps} props - Props for the Card component.
  * @returns {JSX.Element} The rendered card element.
  * @see {@link https://bulma.io/documentation/components/card/ | Bulma Card documentation}
  */
-const CardComponent = ({ className, children, textColor, bgColor, hasShadow = true, header, headerCentered, headerIcon, footer, image, imageAlt, ...props }) => {
+const CardComponent = ({ className, children, textColor, color, bgColor, hasShadow = true, header, headerCentered, headerIcon, footer, image, imageAlt, ...props }) => {
     const { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses({
-        color: textColor,
+        color: textColor ?? color,
         backgroundColor: bgColor,
         ...props,
     });
@@ -1588,7 +1573,7 @@ const __test_exports__ = { renderFooter };
  */
 const isBrowser$1 = (win, doc) => typeof win !== 'undefined' && typeof doc !== 'undefined';
 /**
- * Bulma Dropdown component.
+ * The `Dropdown` component provides Bulma's versatile dropdown menu for your Bulma React UI.
  *
  * @function
  * @param {DropdownProps} props - Props for the Dropdown component.
@@ -1678,7 +1663,7 @@ const Dropdown = withSubComponents(DropdownComponent, {
 // Context to track MenuList nesting level
 const MenuListLevelContext = createContext(0);
 /**
- * Bulma Menu component.
+ * The `Menu` component provides Bulma's vertical navigation menu: a simple, accessible sidebar or section menu for your Bulma React UI.
  *
  * @function
  * @param {MenuProps} props - Props for the Menu component.
@@ -1758,9 +1743,7 @@ const Menu = withSubComponents(MenuComponent, {
 }, 'Menu');
 
 /**
- * Bulma-styled Message component.
- *
- * Supports Bulma helper classes, color, and an optional close button.
+ * The `Message` component provides Bulma's flexible notice/message box for your Bulma React UI.
  *
  * @function
  * @param {MessageProps} props - Props for the Message component.
@@ -1907,8 +1890,7 @@ const ModalClose = ({ className, size = 'large', variant = 'delete', ...props })
     return (jsx("button", { className: classes, "aria-label": "close", type: "button", ...props }));
 };
 /**
- * Bulma Modal component, supporting both modal-card and modal-content variants.
- * Supports both legacy props-based API and compound component API.
+ * The `Modal` component provides a flexible, accessible modal dialog for your Bulma React UI.
  *
  * @function
  * @param {ModalProps} props - Props for the Modal component.
@@ -1978,7 +1960,7 @@ const Modal = withSubComponents(ModalRoot, {
 }, 'Modal');
 
 /**
- * Bulma Navbar component, supports subcomponents for structured navigation.
+ * The `Navbar` component implements Bulma's powerful, responsive navigation bar for your Bulma React UI.
  *
  * @function
  * @param {NavbarProps} props - Props for the Navbar component.
@@ -2001,7 +1983,7 @@ const NavbarComponent = ({ className, textColor, bgColor, color, transparent, fi
     return (jsx("nav", { className: navbarClasses, role: "navigation", "aria-label": "main navigation", ...rest, children: children }));
 };
 /**
- * Bulma Navbar brand area (usually left side).
+ * For logo and branding (left side)
  *
  * @function
  * @param {NavbarBrandProps} props - Props for the NavbarBrand component.
@@ -2015,7 +1997,7 @@ const NavbarBrand = ({ className, children, textColor, ...props }) => {
     return (jsx("div", { className: classNames(usePrefixedClassNames('navbar-brand'), bulmaHelperClasses, className), ...rest, children: children }));
 };
 /**
- * Bulma Navbar item (link, button, etc).
+ * Navigation links, buttons, or custom content
  *
  * @function
  * @param {NavbarItemProps} props - Props for the NavbarItem component.
@@ -2032,7 +2014,7 @@ const NavbarItem = ({ className, as: Component = 'a', active, textColor, bgColor
         }), bulmaHelperClasses, className), ...rest, children: children }));
 };
 /**
- * Bulma Navbar burger (responsive menu toggle).
+ * Responsive menu toggle (mobile)
  *
  * @function
  * @param {NavbarBurgerProps} props - Props for the NavbarBurger component.
@@ -2047,7 +2029,7 @@ const NavbarBurger = ({ className, active, children, ...props }) => {
         }), bulmaHelperClasses, className), "aria-label": props['aria-label'] || 'menu', "aria-expanded": props['aria-expanded'] ?? !!active, ...rest, children: [jsx("span", { "aria-hidden": "true" }), jsx("span", { "aria-hidden": "true" }), jsx("span", { "aria-hidden": "true" }), children] }));
 };
 /**
- * Bulma Navbar menu area (collapsible content).
+ * Collapsible content (contains `Navbar.Start` and `Navbar.End`)
  *
  * @function
  * @param {NavbarMenuProps} props - Props for the NavbarMenu component.
@@ -2062,7 +2044,7 @@ const NavbarMenu = ({ className, active, children, ...props }) => {
         }), bulmaHelperClasses, className), ...rest, children: children }));
 };
 /**
- * Bulma Navbar start area (left-aligned).
+ * Left-aligned menu area
  *
  * @function
  * @param {NavbarStartEndProps} props - Props for the NavbarStart component.
@@ -2075,7 +2057,7 @@ const NavbarStart = ({ className, children, ...props }) => {
     return (jsx("div", { className: classNames(usePrefixedClassNames('navbar-start'), bulmaHelperClasses, className), ...rest, children: children }));
 };
 /**
- * Bulma Navbar end area (right-aligned).
+ * Right-aligned menu area
  *
  * @function
  * @param {NavbarStartEndProps} props - Props for the NavbarEnd component.
@@ -2088,10 +2070,7 @@ const NavbarEnd = ({ className, children, ...props }) => {
     return (jsx("div", { className: classNames(usePrefixedClassNames('navbar-end'), bulmaHelperClasses, className), ...rest, children: children }));
 };
 /**
- * Bulma Navbar link — the dropdown trigger inside a `Navbar.Dropdown`.
- *
- * Renders with the `navbar-link` class, which adds a dropdown arrow indicator
- * automatically. Use `arrowless` to remove the arrow.
+ * Dropdown trigger with arrow indicator (use as first child of `Navbar.Dropdown`)
  *
  * @function
  * @param {NavbarLinkProps} props - Props for the NavbarLink component.
@@ -2108,7 +2087,7 @@ const NavbarLink = ({ className, as: Component = 'a', arrowless, textColor, bgCo
         }), bulmaHelperClasses, className), ...rest, children: children }));
 };
 /**
- * Bulma Navbar dropdown (for nested dropdown menus).
+ * Dropdown parent (with options for hover, up, right, active)
  *
  * @function
  * @param {NavbarDropdownProps} props - Props for the NavbarDropdown component.
@@ -2121,7 +2100,7 @@ const NavbarDropdown = ({ className, right, up, hoverable, active, children, ...
         'is-active': active,
     }), className), ...props, children: children }));
 /**
- * Bulma Navbar dropdown menu container.
+ * Dropdown menu container
  *
  * @function
  * @param {NavbarDropdownMenuProps} props - Props for the NavbarDropdownMenu component.
@@ -2132,7 +2111,7 @@ const NavbarDropdownMenu = ({ className, right, up, children, ...props }) => (js
         'is-up': up,
     }), className), ...props, children: children }));
 /**
- * Bulma Navbar divider.
+ * Divider in dropdown menus.
  *
  * @function
  * @param {React.HTMLAttributes<HTMLHRElement>} props - Standard hr props.
@@ -2153,8 +2132,68 @@ const Navbar = withSubComponents(NavbarComponent, {
     Divider: NavbarDivider,
 }, 'Navbar');
 
+// INTERNAL — deliberately not exported from src/index.ts.
+/**
+ * Color values that emit an `is-<color>` modifier no shipped Bulma 1.0.4 rule
+ * matches on `.progress`/`.notification`/`.hero`. The `has-text-*` and
+ * `has-background-*` helpers DO cover these values — only the
+ * component-modifier form is dead.
+ */
+const UNSTYLED_MODIFIER_COLORS = [
+    'black-bis',
+    'black-ter',
+    'grey-darker',
+    'grey-dark',
+    'grey',
+    'grey-light',
+    'grey-lighter',
+];
+const CSS_BACKED = 'primary, link, info, success, warning, danger, black, white, light, dark';
+const warnedKeys = new Set();
+// Fail closed: with no bundler and no Node (raw CDN ESM), reading `process`
+// throws and warnings stay off, so production can never warn by accident.
+const isDev = () => {
+    try {
+        return process.env.NODE_ENV !== 'production';
+    }
+    catch {
+        return false;
+    }
+};
+const warnOnce = (key, message) => {
+    if (!isDev() || warnedKeys.has(key))
+        return;
+    warnedKeys.add(key);
+    console.warn(message);
+};
+/**
+ * Dev warning for a `color` value whose `is-<color>` modifier has no shipped
+ * CSS. `extraUnstyled` covers per-component dead values beyond the shared
+ * list (e.g. Hero's `inherit`/`current`).
+ */
+const warnUnstyledColor = (component, value, extraUnstyled = []) => {
+    if (!value)
+        return;
+    if (!UNSTYLED_MODIFIER_COLORS.includes(value) &&
+        !extraUnstyled.includes(value)) {
+        return;
+    }
+    warnOnce(`${component}:${value}`, `[bestax-bulma] <${component} color="${value}">: Bulma ships no ` +
+        `"is-${value}" CSS for ${component}, so it renders unstyled. This ` +
+        `value is deprecated and will be removed from the ${component} color ` +
+        `union in the next major version. CSS-backed values: ${CSS_BACKED}.`);
+};
+/** Dev warning for a `color` prop that has no shipped CSS for any value. */
+const warnDeprecatedColorProp = (component, value, hint) => {
+    if (value === undefined)
+        return;
+    warnOnce(`${component}:color-prop`, `[bestax-bulma] The ${component} "color" prop is deprecated: Bulma ` +
+        `ships no ${component.toLowerCase()} color CSS, so it has never had ` +
+        `a visual effect. It will be removed in the next major version. ${hint}`);
+};
+
 /**
- * Bulma Pagination previous button.
+ * "Previous" navigation button.
  *
  * @function
  * @param {PaginationPreviousNextProps} props - Props for the PaginationPrevious component.
@@ -2169,7 +2208,7 @@ const PaginationPrevious = ({ className, disabled, children, ...props }) => (jsx
         }
         : props.onClick, children: children }));
 /**
- * Bulma Pagination next button.
+ * "Next" navigation button.
  *
  * @function
  * @param {PaginationPreviousNextProps} props - Props for the PaginationNext component.
@@ -2184,7 +2223,7 @@ const PaginationNext = ({ className, disabled, children, ...props }) => (jsx("a"
         }
         : props.onClick, children: children }));
 /**
- * Bulma Pagination navigation component.
+ * The `Pagination` component provides a flexible, composable Bulma pagination navigation for your Bulma React UI.
  *
  * @function
  * @param {PaginationProps} props - Props for the Pagination component.
@@ -2192,6 +2231,7 @@ const PaginationNext = ({ className, disabled, children, ...props }) => (jsx("a"
  * @see {@link https://bulma.io/documentation/components/pagination/ | Bulma Pagination documentation}
  */
 const PaginationComponent = ({ color, textColor, bgColor, size, align, rounded, className, children, ...props }) => {
+    warnDeprecatedColorProp('Pagination', color, 'Use the textColor / bgColor helper props instead.');
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         backgroundColor: bgColor,
@@ -2208,7 +2248,7 @@ const PaginationComponent = ({ color, textColor, bgColor, size, align, rounded,
     return (jsx("nav", { className: paginationClasses, role: "navigation", "aria-label": "pagination", ...rest, children: children }));
 };
 /**
- * Bulma Pagination list container.
+ * Container for page links and ellipsis.
  *
  * @function
  * @param {PaginationListProps} props - Props for the PaginationList component.
@@ -2223,7 +2263,7 @@ const PaginationList = ({ className, textColor, bgColor, children, ...props }) =
     return (jsx("ul", { className: classNames(usePrefixedClassNames('pagination-list'), bulmaHelperClasses, className), ...rest, children: children }));
 };
 /**
- * Bulma Pagination link (page number).
+ * Page number or navigation link.
  *
  * @function
  * @param {PaginationLinkProps} props - Props for the PaginationLink component.
@@ -2251,7 +2291,7 @@ const PaginationLink = ({ className, textColor, bgColor, active, disabled, onCli
             }), "aria-current": active ? 'page' : undefined, "aria-disabled": disabled, tabIndex: disabled ? -1 : 0, onClick: handleClick, ...rest, children: children }) }));
 };
 /**
- * Bulma Pagination ellipsis element.
+ * Ellipsis separator.
  *
  * @function
  * @param {React.LiHTMLAttributes<HTMLLIElement>} props - Standard li props.
@@ -2358,9 +2398,7 @@ function getIconClasses(library, name, variant, features) {
     }
 }
 /**
- * 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.
@@ -2489,7 +2527,7 @@ containerClassName, ...restProps }) => {
 };
 
 /**
- * Bulma Panel component, supports various panel subcomponents.
+ * The `Panel` component implements Bulma's versatile panel block for React.
  *
  * @function
  * @param {PanelProps} props - Props for the Panel component.
@@ -2509,7 +2547,7 @@ const PanelComponent = ({ color, className, children, ...props }) => {
     return (jsx("nav", { className: panelClasses, ...rest, children: children }));
 };
 /**
- * Bulma Panel heading.
+ * Main heading (renders as `<p class="panel-heading">`)
  *
  * @function
  * @param {PanelHeadingProps} props - Props for the PanelHeading component.
@@ -2517,7 +2555,7 @@ const PanelComponent = ({ color, className, children, ...props }) => {
  */
 const PanelHeading = ({ className, children, ...props }) => (jsx("p", { className: classNames(usePrefixedClassNames('panel-heading'), className), ...props, children: children }));
 /**
- * Bulma Panel tabs.
+ * Panel tabs (renders as `<p class="panel-tabs">`)
  *
  * @function
  * @param {PanelTabsProps} props - Props for the PanelTabs component.
@@ -2525,7 +2563,7 @@ const PanelHeading = ({ className, children, ...props }) => (jsx("p", { classNam
  */
 const PanelTabs = ({ className, children, ...props }) => (jsx("p", { className: classNames(usePrefixedClassNames('panel-tabs'), className), ...props, children: children }));
 /**
- * Bulma Panel block.
+ * Individual panel block (renders as `<a class="panel-block">`)
  *
  * @function
  * @param {PanelBlockProps} props - Props for the PanelBlock component.
@@ -2533,8 +2571,8 @@ const PanelTabs = ({ className, children, ...props }) => (jsx("p", { className:
  */
 const PanelBlock = ({ className, active, children, ...props }) => (jsx("a", { className: classNames(usePrefixedClassNames('panel-block', { 'is-active': active }), className), ...props, children: children }));
 /**
- * Bulma Panel icon.
- * Wraps the Icon component with 'panel-icon' container class.
+ * Icon wrapper with panel styling (renders as `<span class="panel-icon"><i/></span>`).
+ * Accepts all Icon props (`name`, `variant`, `features`, etc.)
  *
  * @function
  * @param {PanelIconProps} props - Props for the PanelIcon component.
@@ -2542,7 +2580,7 @@ const PanelBlock = ({ className, active, children, ...props }) => (jsx("a", { cl
  */
 const PanelIcon = ({ className, ...props }) => (jsx(Icon, { containerClassName: classNames(usePrefixedClassNames('panel-icon'), className), ...props }));
 /**
- * Bulma Panel input block.
+ * Search input with icon (renders as `<div class="panel-block">`)
  *
  * @function
  * @param {PanelInputBlockProps} props - Props for the PanelInputBlock component.
@@ -2553,7 +2591,7 @@ const PanelInputBlock = ({ value, onChange, placeholder, iconClassName = 'fas fa
     return (jsx("div", { className: usePrefixedClassNames('panel-block'), ...props, children: jsxs("p", { className: usePrefixedClassNames('control', 'has-icons-left'), children: [jsx("input", { className: inputClass, type: "text", placeholder: placeholder, value: value, onChange: onChange }), jsx("span", { className: usePrefixedClassNames('icon', 'is-left'), children: jsx("i", { className: iconClassName, "aria-hidden": "true" }) })] }) }));
 };
 /**
- * Bulma Panel checkbox block.
+ * Checkbox block (renders as `<label class="panel-block">`)
  *
  * @function
  * @param {PanelCheckboxBlockProps} props - Props for the PanelCheckboxBlock component.
@@ -2561,7 +2599,7 @@ const PanelInputBlock = ({ value, onChange, placeholder, iconClassName = 'fas fa
  */
 const PanelCheckboxBlock = ({ checked, onChange, children, ...props }) => (jsxs("label", { className: usePrefixedClassNames('panel-block'), ...props, children: [jsx("input", { type: "checkbox", checked: checked, onChange: onChange }), children] }));
 /**
- * Bulma Panel button block.
+ * Call-to-action button (renders as `<div class="panel-block"><button /></div>`)
  *
  * @function
  * @param {PanelButtonBlockProps} props - Props for the PanelButtonBlock component.
@@ -2583,7 +2621,7 @@ function useTabsContext() {
     return useContext(TabsContext);
 }
 /**
- * Bulma Tabs component with stateful tab management, content panels, and vertical layout.
+ * The `Tabs` component provides flexible and fully-featured Bulma tab navigation for your Bulma React UI.
  *
  * @function
  * @param {TabsProps} props - Props for the Tabs component.
@@ -2604,6 +2642,7 @@ function useTabsContext() {
  * </Tabs>
  */
 const TabsComponent = ({ align, size, fullwidth, boxed, toggle, rounded, color, value, onChange, defaultValue = 0, vertical, side, expanded, className, children, ...props }) => {
+    warnDeprecatedColorProp('Tabs', color, 'Remove the prop; no replacement exists.');
     const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
     // Controlled vs uncontrolled state
     const isControlled = value !== undefined;
@@ -2671,7 +2710,7 @@ const TabsComponent = ({ align, size, fullwidth, boxed, toggle, rounded, color,
     return (jsx(TabsContext.Provider, { value: contextValue, children: jsx("div", { className: combinedClasses, ...rest, children: children }) }));
 };
 /**
- * Tab list container. Renders a `<ul>` with `role="tablist"`.
+ * The `<ul>` container for tab items.
  *
  * @function
  * @param {TabListProps} props - Props for the TabList component.
@@ -2699,7 +2738,7 @@ const Tab = ({ index, disabled, icon, iconLibrary, iconVariant, iconSize = 'smal
     return (jsx("li", { className: classNames(activeClass, className), role: "tab", "aria-selected": isActive, tabIndex: disabled ? -1 : 0, ...props, children: jsxs("a", { onClick: handleClick, "aria-disabled": disabled || undefined, children: [icon && (jsx(Icon, { name: icon, library: iconLibrary, variant: iconVariant, size: iconSize, features: iconFeatures })), children && jsx("span", { children: children })] }) }));
 };
 /**
- * Legacy tab item. Does not consume context — active state is controlled via prop.
+ * Each tab; accepts `active`, `onClick`, etc.
  *
  * @function
  * @param {TabItemProps} props - Props for the TabItem component.
@@ -2708,7 +2747,7 @@ const Tab = ({ index, disabled, icon, iconLibrary, iconVariant, iconSize = 'smal
  */
 const TabItem = ({ active, className, children, onClick, ...props }) => (jsx("li", { className: classNames({ [usePrefixedClassNames('is-active')]: active }, className), onClick: onClick, ...props, children: children }));
 /**
- * Wrapper for tab content panels. Apply `.tabs-content` class.
+ * Container for tab content panels. No custom props beyond `children` and standard `<div>` HTML attributes. Applies the `.tabs-content` class.
  *
  * @function
  * @param {TabsContentProps} props - Props for the TabsContent component.
@@ -2747,11 +2786,7 @@ const Tabs = withSubComponents(TabsComponent, {
 }, 'Tabs');
 
 /**
- * Loading component for displaying a loading overlay with spinner.
- *
- * Can be used as a full-page overlay or a container overlay to indicate
- * loading states. Supports different sizes, color variants, and optional
- * cancel functionality.
+ * The `Loading` component provides a loading overlay with a spinner animation.
  *
  * @function
  * @param {LoadingProps} props - Props for the Loading component.
@@ -2835,10 +2870,7 @@ const Loading = ({ active = false, isFullPage = false, size, color, canCancel =
 };
 
 /**
- * Collapse component for expandable/collapsible content panels.
- *
- * Can be used in controlled or uncontrolled mode. Supports animation
- * and accessibility features for screen readers.
+ * The `Collapse` component provides an expandable/collapsible content panel.
  *
  * @function
  * @param {CollapseProps} props - Props for the Collapse component.
@@ -2980,10 +3012,7 @@ const Collapse = ({ open: controlledOpen, defaultOpen = false, onOpen, onClose,
 };
 
 /**
- * Tooltip component for displaying helpful information on hover.
- *
- * Shows a small popup with text when the user hovers over or focuses
- * on the wrapped element. Supports multiple positions and color variants.
+ * The `Tooltip` component displays helpful information when users hover over or focus on an element.
  *
  * @function
  * @param {TooltipProps} props - Props for the Tooltip component.
@@ -3212,10 +3241,7 @@ const Step = ({ isActive = false, isCompleted = false, label, icon, clickable =
     return (jsx("li", { className: stepClasses, onClick: handleClick, onKeyDown: handleKeyDown, tabIndex: clickable ? 0 : undefined, role: clickable ? 'button' : undefined, "aria-current": isActive ? 'step' : undefined, ...rest, children: jsxs("div", { className: stepsLinkClass, children: [jsx("span", { className: stepsMarkerClass, children: markerContent }), (label || children) && (jsx("div", { className: stepsContentClass, children: jsx("p", { className: stepsTitleClass, children: label || children }) }))] }) }));
 };
 /**
- * Steps component for multi-step progress indication.
- *
- * Use for wizard flows, checkout processes, or any multi-step workflow.
- * Supports horizontal and vertical layouts with customizable markers.
+ * The `Steps` component provides a multi-step progress indicator for wizard flows, checkout processes, or any multi-step workflow.
  *
  * @function
  * @param {StepsProps} props - Props for the Steps component.
@@ -3299,10 +3325,7 @@ const StepsComponent = ({ value = 0, items, size, color, hasMarker = true, anima
 const Steps = withSubComponents(StepsComponent, { Step }, 'Steps');
 
 /**
- * Sidebar component for slide-out navigation panels.
- *
- * Provides a side panel that slides in from the left or right,
- * with optional overlay, keyboard support, and customizable width.
+ * The `Sidebar` component provides a slide-out navigation panel that appears from the left or right side of the screen.
  *
  * @function
  * @param {SidebarProps} props - Props for the Sidebar component.
@@ -3419,7 +3442,7 @@ const SidebarComponent = forwardRef(({ isOpen, onClose, position = 'left', width
     return null;
 });
 /**
- * Sidebar header section.
+ * Container for the sidebar header.
  *
  * @function
  * @param {SidebarHeaderProps} props - Props for the SidebarHeader component.
@@ -3430,7 +3453,7 @@ const SidebarHeader = ({ className, children, ...props }) => {
     return (jsx("div", { className: classNames(headerClass, className), ...props, children: children }));
 };
 /**
- * Sidebar title text.
+ * Title text inside the header.
  *
  * @function
  * @param {SidebarTitleProps} props - Props for the SidebarTitle component.
@@ -3441,7 +3464,7 @@ const SidebarTitle = ({ className, children, ...props }) => {
     return (jsx("p", { className: classNames(titleClass, className), ...props, children: children }));
 };
 /**
- * Sidebar close button.
+ * Close button for the sidebar.
  *
  * @function
  * @param {SidebarCloseProps} props - Props for the SidebarClose component.
@@ -3452,7 +3475,7 @@ const SidebarClose = ({ className, children, ...props }) => {
     return (jsx("button", { type: "button", className: classNames(closeClass, className), "aria-label": "Close", ...props, children: children }));
 };
 /**
- * Sidebar body/main content area.
+ * Main content area of the sidebar.
  *
  * @function
  * @param {SidebarBodyProps} props - Props for the SidebarBody component.
@@ -3463,7 +3486,7 @@ const SidebarBody = ({ className, children, ...props }) => {
     return (jsx("div", { className: classNames(bodyClass, className), ...props, children: children }));
 };
 /**
- * Sidebar footer section.
+ * Footer area of the sidebar.
  *
  * @function
  * @param {SidebarFooterProps} props - Props for the SidebarFooter component.
@@ -3483,10 +3506,7 @@ const Sidebar = withSubComponents(SidebarComponent, {
 }, 'Sidebar');
 
 /**
- * Toast component for displaying brief notification messages with optional action buttons.
- *
- * Appears at a configurable screen position with auto-close, pause-on-hover,
- * keyboard dismiss, action/cancel buttons, and an optional explicit close button.
+ * The `Toast` component provides brief notification messages with optional action and cancel buttons.
  *
  * @function
  * @param {ToastProps} props - Props for the Toast component.
@@ -3756,10 +3776,7 @@ const ToastContainer = ({ position = 'top-right', }) => {
 let _scrollLockCount = 0;
 let _originalOverflow = '';
 /**
- * Dialog component for confirmation and alert dialogs.
- *
- * Provides a modal dialog with confirm/cancel actions, customizable
- * appearance, and keyboard support.
+ * The `Dialog` component provides confirmation and alert dialogs with customizable actions.
  *
  * @function
  * @param {DialogProps} props - Props for the Dialog component.
@@ -3971,17 +3988,15 @@ const DialogContainer = () => {
     return (jsx(Dialog, { isOpen: true, title: options.title, message: options.message, type: options.type, confirmText: options.confirmText, cancelText: options.cancelText, icon: options.icon, showCancel: type === 'confirm', focusCancel: options.focusCancel, onConfirm: () => dialog.close(type === 'confirm' ? true : undefined), onCancel: () => dialog.close(type === 'confirm' ? false : undefined) }));
 };
 
+const validButtonColors = [...validColors, 'text', 'ghost'];
 /**
- * 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'];
 const Button = ({ color, size, isLight, isRounded, isLoading, isStatic, isFullWidth, isOutlined, isInverted, isFocused, isActive, isHovered, isDisabled, className, children, textColor, bgColor, as: Component = 'button', href, onClick, target, rel, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
@@ -4047,9 +4062,7 @@ const DefaultPrevIcon = () => (jsx("svg", { xmlns: "http://www.w3.org/2000/svg",
  */
 const DefaultNextIcon = () => (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: jsx("polyline", { points: "9 18 15 12 9 6" }) }));
 /**
- * Carousel component for displaying slides with navigation.
- *
- * Supports auto-play, drag navigation, indicators, and customizable arrows.
+ * The `Carousel` component provides an image/content slider with navigation arrows and indicators.
  *
  * @function
  * @param {CarouselProps} props - Props for the Carousel component.
@@ -4361,13 +4374,7 @@ function usePrefersReducedMotion() {
     return prefersReducedMotion;
 }
 /**
- * Reveal component that animates its content into view as it scrolls into
- * the viewport, backed by `IntersectionObserver`.
- *
- * Renders in its final, visible state during SSR and on the first client
- * render, so content is never hidden if JavaScript never runs (crawlers,
- * disabled JS). Automatically skips the animation (renders the final state
- * immediately) when the user prefers reduced motion.
+ * The `Reveal` component animates its content into view as it scrolls into the viewport, backed by `IntersectionObserver`.
  *
  * @function
  * @param {RevealProps} props - Props for the Reveal component.
@@ -4484,22 +4491,19 @@ const Reveal = ({ animation = 'fade-up', delay = 0, duration = 600, threshold =
 };
 
 /**
- * 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.
  * @returns {JSX.Element} The rendered block element.
  * @see {@link https://bulma.io/documentation/elements/block/ | Bulma Block documentation}
  */
-const Block = ({ className, textColor, bgColor, children, ...props }) => {
+const Block = ({ className, textColor, color, bgColor, children, ...props }) => {
     /**
      * Generates Bulma helper classes and separates out remaining props.
      */
     const { bulmaHelperClasses, rest } = useBulmaClasses({
-        color: textColor,
+        color: textColor ?? color,
         backgroundColor: bgColor,
         ...props,
     });
@@ -4509,21 +4513,19 @@ const Block = ({ className, textColor, bgColor, children, ...props }) => {
 };
 
 /**
- * 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.
  * @returns {JSX.Element} The rendered box element.
  * @see {@link https://bulma.io/documentation/elements/box/ | Bulma Box documentation}
  */
-const Box = ({ className, textColor, bgColor, hasShadow = true, children, ...props }) => {
+const Box = ({ className, textColor, color, bgColor, hasShadow = true, children, ...props }) => {
     /**
      * Generates Bulma helper classes and separates out remaining props.
      */
     const { bulmaHelperClasses, rest } = useBulmaClasses({
-        color: textColor,
+        color: textColor ?? color,
         backgroundColor: bgColor,
         ...props,
     });
@@ -4535,12 +4537,7 @@ const Box = ({ className, textColor, bgColor, hasShadow = true, children, ...pro
 };
 
 /**
- * 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.
@@ -4561,16 +4558,14 @@ const LinkButton = ({ variant = 'text', color, className, ...props }) => {
 };
 
 /**
- * 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.
  * @returns {JSX.Element} The rendered group of buttons.
  * @see {@link https://bulma.io/documentation/elements/button/#group | Bulma Button Group documentation}
  */
-const ButtonsComponent = ({ className, textColor, bgColor, isCentered, isRight, hasAddons, children, ...props }) => {
+const ButtonsComponent = ({ className, textColor, color, bgColor, isCentered, isRight, hasAddons, children, ...props }) => {
     const buttonsClasses = usePrefixedClassNames('buttons', {
         'is-centered': isCentered,
         'is-right': isRight,
@@ -4580,7 +4575,7 @@ const ButtonsComponent = ({ className, textColor, bgColor, isCentered, isRight,
      * Generates Bulma helper classes and separates out remaining props.
      */
     const { bulmaHelperClasses, rest } = useBulmaClasses({
-        color: textColor,
+        color: textColor ?? color,
         backgroundColor: bgColor,
         ...props,
     });
@@ -4593,11 +4588,7 @@ const Buttons = withSubComponents(ButtonsComponent, {
 }, 'Buttons');
 
 /**
- * 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.
@@ -4617,22 +4608,19 @@ const Code = ({ className, textColor, bgColor, children, ...props }) => {
 // Valid size modifiers for the content class
 const validSizes = ['small', 'medium', 'large'];
 /**
- * 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.
  * @returns {JSX.Element} The rendered content block.
  * @see {@link https://bulma.io/documentation/elements/content/ | Bulma Content documentation}
  */
-const Content = ({ className, textColor, bgColor, size, children, ...props }) => {
+const Content = ({ className, textColor, color, bgColor, size, children, ...props }) => {
     /**
      * Generates Bulma helper classes and separates out remaining props.
      */
     const { bulmaHelperClasses, rest } = useBulmaClasses({
-        color: textColor,
+        color: textColor ?? color,
         backgroundColor: bgColor,
         ...props,
     });
@@ -4644,21 +4632,19 @@ const Content = ({ className, textColor, bgColor, size, children, ...props }) =>
 };
 
 /**
- * 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.
  * @returns {JSX.Element} The rendered delete button.
  * @see {@link https://bulma.io/documentation/elements/delete/ | Bulma Delete documentation}
  */
-const Delete = ({ className, textColor, bgColor, onClick, size, ariaLabel = 'Close', disabled = false, ...props }) => {
+const Delete = ({ className, textColor, color, bgColor, onClick, size, ariaLabel = 'Close', disabled = false, ...props }) => {
     /**
      * Generates Bulma helper classes and separates out remaining props.
      */
     const { bulmaHelperClasses, rest } = useBulmaClasses({
-        color: textColor,
+        color: textColor ?? color,
         backgroundColor: bgColor,
         ...props,
     });
@@ -4671,10 +4657,7 @@ const Delete = ({ className, textColor, bgColor, onClick, size, ariaLabel = 'Clo
 };
 
 /**
- * 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.
@@ -4694,11 +4677,7 @@ const Divider = ({ className, bgColor, ...props }) => {
 };
 
 /**
- * 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.
@@ -4736,11 +4715,7 @@ const FigureCaption = ({ className, textColor, bgColor, children, ...props }) =>
     return (jsx("figcaption", { className: captionClasses || undefined, ...rest, children: children }));
 };
 /**
- * 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.
@@ -4770,21 +4745,19 @@ const Figure = withSubComponents(FigureComponent, {
 }, 'Figure');
 
 /**
- * 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.
  * @returns {JSX.Element} The rendered icon text element.
  * @see {@link https://bulma.io/documentation/elements/icon/#icon-text | Bulma IconText documentation}
  */
-const IconTextComponent = ({ className, textColor, bgColor, iconProps, children, items, ...props }) => {
+const IconTextComponent = ({ className, textColor, color, bgColor, iconProps, children, items, ...props }) => {
     /**
      * Generates Bulma helper classes and separates out remaining props.
      */
     const { bulmaHelperClasses, rest } = useBulmaClasses({
-        color: textColor,
+        color: textColor ?? color,
         backgroundColor: bgColor,
         ...props,
     });
@@ -4795,23 +4768,19 @@ const IconTextComponent = ({ className, textColor, bgColor, iconProps, children,
 const IconText = withSubComponents(IconTextComponent, { Icon }, 'IconText');
 
 /**
- * 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.
  * @returns {JSX.Element} The rendered image element.
  * @see {@link https://bulma.io/documentation/elements/image/ | Bulma Image documentation}
  */
-const Image = ({ as, className, textColor, bgColor, size, isRounded, isRetina, src, alt, children, ...props }) => {
+const Image = ({ as, className, textColor, color, bgColor, size, isRounded, isRetina, src, alt, children, ...props }) => {
     /**
      * Generates Bulma helper classes and separates out remaining props.
      */
     const { bulmaHelperClasses, rest } = useBulmaClasses({
-        color: textColor,
+        color: textColor ?? color,
         backgroundColor: bgColor,
         ...props,
     });
@@ -4838,10 +4807,7 @@ const Image = ({ as, className, textColor, bgColor, size, isRounded, isRetina, s
 };
 
 /**
- * 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.
@@ -4865,12 +4831,7 @@ const Link = ({ className, textColor, bgColor, isActive, as: Component = 'a', ch
 };
 
 /**
- * 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.
@@ -4891,9 +4852,7 @@ const ListItem = ({ className, textColor, bgColor, children, ...props }) => {
 };
 
 /**
- * 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.
@@ -4901,6 +4860,7 @@ const ListItem = ({ className, textColor, bgColor, children, ...props }) => {
  * @see {@link https://bulma.io/documentation/elements/notification/ | Bulma Notification documentation}
  */
 const Notification = ({ className, color, textColor, isLight, hasDelete, onDelete, children, ...props }) => {
+    warnUnstyledColor('Notification', color);
     /**
      * Generates Bulma helper classes and separates out remaining props.
      */
@@ -5098,11 +5058,7 @@ const NotificationContainer = ({ position = 'top-right' }) => {
 };
 
 /**
- * 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.
@@ -5124,11 +5080,7 @@ const OrderedListComponent = ({ className, textColor, bgColor, children, ...prop
 const OrderedList = withSubComponents(OrderedListComponent, { Item: ListItem }, 'OrderedList');
 
 /**
- * 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.
@@ -5149,11 +5101,7 @@ const Paragraph = ({ className, textColor, bgColor, children, ...props }) => {
 };
 
 /**
- * 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.
@@ -5171,9 +5119,7 @@ const Pre = ({ className, textColor, bgColor, children, ...props }) => {
 };
 
 /**
- * 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.
@@ -5181,6 +5127,7 @@ const Pre = ({ className, textColor, bgColor, children, ...props }) => {
  * @see {@link https://bulma.io/documentation/elements/progress/ | Bulma Progress documentation}
  */
 const Progress = ({ className, color, size, value, max, children, ...props }) => {
+    warnUnstyledColor('Progress', color);
     /**
      * Generates Bulma helper classes and separates out remaining props.
      */
@@ -5196,10 +5143,7 @@ const Progress = ({ className, color, size, value, max, children, ...props }) =>
 };
 
 /**
- * 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.
@@ -5223,10 +5167,7 @@ const Skeleton = ({ className, variant = 'block', lines = 3, children, ...props
 };
 
 /**
- * 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.
@@ -5247,11 +5188,7 @@ const Span = ({ className, textColor, bgColor, children, ...props }) => {
 };
 
 /**
- * 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.
@@ -5279,9 +5216,7 @@ const validSubTitleElements = [
     'p',
 ];
 /**
- * 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.
@@ -5453,9 +5388,7 @@ const Th = ({ className, isAligned, width, color, children, ...props }) => {
 };
 
 /**
- * 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.
@@ -5505,9 +5438,7 @@ const validTagColors = [
 ];
 const validTagSizes = ['normal', 'medium', 'large'];
 /**
- * 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.
@@ -5534,9 +5465,7 @@ const Tag = ({ className, color, size, isRounded, isDelete, isHoverable, onDelet
 };
 
 /**
- * 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.
@@ -5560,9 +5489,7 @@ const Tags = withSubComponents(TagsComponent, { Tag }, 'Tags');
 const validTitleSizes = ['1', '2', '3', '4', '5', '6'];
 const validTitleElements = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p'];
 /**
- * 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.
@@ -5594,11 +5521,7 @@ const Title = ({ className, size, isSpaced, as = 'h1', hasSkeleton, textColor, b
 };
 
 /**
- * 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.
@@ -5668,16 +5591,7 @@ const checkboxColors = [
  */
 const checkboxSizes = ['small', 'normal', 'medium', 'large'];
 /**
- * Bulma Checkbox component with themed styling support.
- *
- * Renders a custom-styled checkbox with a visual check indicator,
- * supporting colors, sizes, and various states. Inside a `<Checkboxes>`
- * group, Checkbox inherits `name` and (when the group is in controlled or
- * uncontrolled mode) derives its `checked` state from membership in the
- * group's `value` array. On click, dispatches the new array via the group's
- * `onChange`.
- *
- * Local props always win over group context.
+ * The `Checkbox` component provides a Bulma-styled checkbox input.
  *
  * @function
  * @param {CheckboxProps} props - Props for the Checkbox component.
@@ -5741,7 +5655,7 @@ Checkbox.displayName = 'Checkbox';
 
 const allowedColors = [...validColors, 'inherit', 'current'];
 /**
- * Bulma Control component for form controls, with icons, loading, and Bulma helper support.
+ * The `Control` component is a Bulma-styled wrapper for form controls (`Input`, `Select`, `TextArea`, etc.), supporting icons (left/right), loading state, expansion, size, and Bulma helper props for layout and color.
  *
  * @function
  * @param {ControlProps} props - Props for the Control component.
@@ -5843,8 +5757,7 @@ const FieldBody = ({ textColor, bgColor, className, children, ...props }) => {
     return (jsx("div", { className: fieldBodyClass, ...props, ...rest, children: children }));
 };
 /**
- * Field component for rendering a Bulma field container.
- * Supports horizontal, grouped, and labelled fields.
+ * The `Field` component is a Bulma-styled form field container.
  *
  * @function
  * @param {FieldProps} props - Props for the Field component.
@@ -5927,20 +5840,7 @@ const Field = withSubComponents(FieldComponent, {
 }, 'Field');
 
 /**
- * Wraps Checkbox components inside a Bulma 'checkboxes' wrapper. Manages the
- * selected-values array for the entire group when given
- * `value`/`defaultValue`/`onChange`.
- *
- * Three usage modes:
- *
- * 1. **Name-only** — pass `name`. Each child Checkbox manages its own checked
- *    state via `defaultChecked` or `checked`. Backwards compatible.
- *
- * 2. **Controlled** — pass `value` (array) and `onChange`. The group owns
- *    selection; each child derives `checked` from `value.includes(my.value)`.
- *
- * 3. **Uncontrolled** — pass `defaultValue` (array) and optionally `onChange`.
- *    The group manages internal state; `onChange` fires with the new array.
+ * The `Checkboxes` component wraps multiple `Checkbox` components in a Bulma-styled group.
  *
  * @function
  * @param {CheckboxesProps} props - Props for the Checkboxes component.
@@ -6002,8 +5902,26 @@ const CheckboxesComponent = ({ label, labelSize, labelProps, horizontal, message
 const Checkboxes = withSubComponents(CheckboxesComponent, { Checkbox }, 'Checkboxes');
 
 /**
- * Bulma File upload component with full Bulma helper class support.
- * isRight and isCentered are mutually exclusive (Bulma spec).
+ * Associates the convenience `label` prop with its control (#368): generates
+ * an id for the control and returns labelProps carrying a matching `htmlFor`.
+ * A user-supplied `id` is used as the target instead of the generated one, and
+ * an explicit `labelProps.htmlFor` disables generation entirely — the user has
+ * taken over the association. Internal; not part of the public API.
+ */
+function useAutoLabelId({ label, id, labelProps, rendersLabel, }) {
+    // Called unconditionally per the rules of hooks; SSR-safe on React 18 and 19.
+    const generatedId = useId();
+    // Truthiness mirrors Field's own `if (label)` render gate.
+    const active = !!label && rendersLabel;
+    const controlId = id ?? (active && !labelProps?.htmlFor ? generatedId : undefined);
+    const fieldLabelProps = active
+        ? { htmlFor: controlId, ...labelProps }
+        : labelProps;
+    return { controlId, fieldLabelProps };
+}
+
+/**
+ * The `File` component provides a Bulma-styled file input, supporting color, size, boxed/fullwidth/align styles, icons, "has name", and filename display.
  *
  * @function
  * @param {FileProps} props - Props for the File component.
@@ -6014,6 +5932,12 @@ const File = forwardRef(({
 // Field props
 label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, color, size, isBoxed, isFullwidth, isRight, isCentered, hasName, buttonLabel, iconLeft, iconRight, className, inputClassName, fileName, ...props }, ref) => {
     const insideField = useInsideField();
+    const { controlId, fieldLabelProps } = useAutoLabelId({
+        label,
+        id: props.id,
+        labelProps,
+        rendersLabel: !insideField,
+    });
     const { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color,
@@ -6043,9 +5967,9 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
         [`is-${messageColor}`]: !!messageColor,
     });
     const messageEl = message ? jsx("p", { className: helpClass, children: message }) : null;
-    const fileElement = (jsx("div", { className: fileClass, children: jsxs("label", { className: usePrefixedClassNames('file-label'), children: [jsx("input", { ref: ref, className: classNames(usePrefixedClassNames('file-input'), inputClassName), type: "file", ...rest }), jsxs("span", { className: usePrefixedClassNames('file-cta'), children: [iconLeft && (jsx("span", { className: prefixedClassNames(classPrefix, 'file-icon'), children: iconLeft })), jsx("span", { className: usePrefixedClassNames('file-label'), children: buttonLabel || 'Choose a file\u2026' }), iconRight && (jsx("span", { className: prefixedClassNames(classPrefix, 'file-icon'), children: iconRight }))] }), hasName && fileName && (jsx("span", { className: prefixedClassNames(classPrefix, 'file-name'), children: fileName }))] }) }));
+    const fileElement = (jsx("div", { className: fileClass, children: jsxs("label", { className: usePrefixedClassNames('file-label'), children: [jsx("input", { ref: ref, className: classNames(usePrefixedClassNames('file-input'), inputClassName), type: "file", id: controlId, ...rest }), jsxs("span", { className: usePrefixedClassNames('file-cta'), children: [iconLeft && (jsx("span", { className: prefixedClassNames(classPrefix, 'file-icon'), children: iconLeft })), jsx("span", { className: usePrefixedClassNames('file-label'), children: buttonLabel || 'Choose a file\u2026' }), iconRight && (jsx("span", { className: prefixedClassNames(classPrefix, 'file-icon'), children: iconRight }))] }), hasName && fileName && (jsx("span", { className: prefixedClassNames(classPrefix, 'file-name'), children: fileName }))] }) }));
     if (!insideField) {
-        return (jsxs(Field, { label: label, labelSize: labelSize, labelProps: labelProps, horizontal: horizontal, className: fieldClassName, children: [fileElement, messageEl] }));
+        return (jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [fileElement, messageEl] }));
     }
     return (jsxs(Fragment, { children: [fileElement, messageEl] }));
 });
@@ -6067,16 +5991,7 @@ const radioColors = [
  */
 const radioSizes = ['small', 'normal', 'medium', 'large'];
 /**
- * Bulma Radio component with themed styling support.
- *
- * Renders a custom-styled radio button with a visual indicator,
- * supporting colors, sizes, and various states. Inside a `<Radios>` group,
- * Radio inherits `name` and (when the group is in controlled or uncontrolled
- * mode) derives its `checked` state from the group's `value` and dispatches
- * the group's `onChange` when clicked.
- *
- * Local props always win over group context (`name`, `checked`, `onChange`
- * on Radio override the group). Required for opt-out scenarios.
+ * The `Radio` component provides a Bulma-styled radio button input with flexible labels and helper classes.
  *
  * @function
  * @param {RadioProps} props - Props for the Radio component.
@@ -6134,21 +6049,7 @@ const Radio = forwardRef(({ color, size, className, children, textColor, disable
 Radio.displayName = 'Radio';
 
 /**
- * Wraps Radio components inside a Bulma 'radios' wrapper. Manages selection
- * state for the entire group when given `value`/`defaultValue`/`onChange`,
- * matching the pattern used by MUI's RadioGroup, Radix's RadioGroup, and React
- * Aria's RadioGroup.
- *
- * Three usage modes:
- *
- * 1. **Name-only** — pass `name`. Each child Radio manages its own checked
- *    state via `defaultChecked` or `checked`. Backwards compatible.
- *
- * 2. **Controlled** — pass `value` and `onChange`. The group owns selection;
- *    each child derives `checked` from `value === my.value`.
- *
- * 3. **Uncontrolled** — pass `defaultValue` (and optionally `onChange`). The
- *    group manages internal state; `onChange` fires on selection change.
+ * The `Radios` component wraps multiple `Radio` components in a Bulma-styled group.
  *
  * @function
  * @param {RadiosProps} props - Props for the Radios component.
@@ -6227,10 +6128,7 @@ const switchColors = [
  */
 const switchSizes = ['small', 'normal', 'medium', 'large'];
 /**
- * Switch component for toggling between on/off states.
- *
- * A styled checkbox that appears as a toggle switch, commonly used for
- * settings and preferences. Supports various colors, sizes, and styles.
+ * The `Switch` component provides a toggle switch for boolean on/off states.
  *
  * @function
  * @param {SwitchProps} props - Props for the Switch component.
@@ -6307,11 +6205,7 @@ function getTickPositions(min, max, step, ticks, marks) {
     return positions;
 }
 /**
- * Slider component for selecting a value or range from a range.
- *
- * A styled range input that supports different sizes, colors,
- * optional value display, ticks/marks, range mode (dual thumb),
- * vertical orientation, and non-linear scale.
+ * The `Slider` component provides a range slider input for selecting values within a range.
  *
  * @function
  * @param {SliderProps} props - Props for the Slider component.
@@ -6368,6 +6262,14 @@ const Slider = forwardRef((props, ref) => {
     const insideField = useInsideField();
     const insideControl = useInsideControl();
     const { bulmaHelperClasses, rest } = useBulmaClasses(restProps);
+    // In range mode the low thumb carries `rest` (and any user id), so the
+    // label targets it; each thumb keeps its own aria-label for AT.
+    const { controlId, fieldLabelProps } = useAutoLabelId({
+        label,
+        id: restProps.id,
+        labelProps,
+        rendersLabel: !insideField,
+    });
     // Resolve tooltip mode: explicit tooltip prop takes precedence, else showOutput maps to 'auto'
     const tooltipMode = tooltip ?? (showOutput ? 'auto' : 'hidden');
     // --- Range mode state ---
@@ -6632,7 +6534,7 @@ const Slider = forwardRef((props, ref) => {
     // --- Single slider ---
     const sliderElement = !range ? (jsxs("div", { ref: wrapperRef, className: combinedClasses, style: wrapperStyle, children: [jsx("input", { ref: combinedRef, type: "range", min: min, max: max, step: step, value: currentSingle, disabled: disabled, onChange: handleSingleChange, onKeyDown: handleKeyDown, onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), onFocus: () => setShowTooltip(true), onBlur: () => setShowTooltip(false), className: prefixedClassNames(classPrefix, 'slider-input'), style: {
                     '--slider-progress': `${progressSingle}%`,
-                }, "aria-valuenow": currentSingle, "aria-valuemin": min, "aria-valuemax": max, "aria-orientation": isVertical ? 'vertical' : undefined, "aria-label": ariaLabel, ...getAriaProps(currentSingle), ...rest }), tooltipMode !== 'hidden' && (jsx("output", { ref: outputRef, className: prefixedClassNames(classPrefix, 'slider-output', {
+                }, "aria-valuenow": currentSingle, "aria-valuemin": min, "aria-valuemax": max, "aria-orientation": isVertical ? 'vertical' : undefined, "aria-label": ariaLabel, ...getAriaProps(currentSingle), id: controlId, ...rest }), tooltipMode !== 'hidden' && (jsx("output", { ref: outputRef, className: prefixedClassNames(classPrefix, 'slider-output', {
                     'is-visible': showTipLow,
                     'is-flipped': flipped,
                     'is-flipped-left': isVertical && verticalFlippedLeft,
@@ -6660,7 +6562,7 @@ const Slider = forwardRef((props, ref) => {
                     : {
                         '--slider-progress-low': `${progressLow}%`,
                         '--slider-progress-high': `${progressHigh}%`,
-                    } }), jsx("input", { ref: combinedRef, type: "range", min: min, max: max, step: step, value: currentRange[0], disabled: disabled, onChange: handleRangeLowChange, onKeyDown: handleKeyDown, onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), onFocus: () => setShowTooltip(true), onBlur: () => setShowTooltip(false), className: prefixedClassNames(classPrefix, 'slider-input', 'slider-input-low'), "aria-valuenow": currentRange[0], "aria-valuemin": min, "aria-valuemax": max, "aria-orientation": isVertical ? 'vertical' : undefined, "aria-label": ariaLabel?.[0] ?? 'Minimum value', ...getAriaProps(currentRange[0]), ...rest, ...(nameLow !== undefined ? { name: nameLow } : {}) }), jsx("input", { ref: inputHighRef, type: "range", min: min, max: max, step: step, value: currentRange[1], disabled: disabled, onChange: handleRangeHighChange, onMouseEnter: () => setShowTooltipHigh(true), onMouseLeave: () => setShowTooltipHigh(false), onFocus: () => setShowTooltipHigh(true), onBlur: () => setShowTooltipHigh(false), className: prefixedClassNames(classPrefix, 'slider-input', 'slider-input-high'), "aria-valuenow": currentRange[1], "aria-valuemin": min, "aria-valuemax": max, "aria-orientation": isVertical ? 'vertical' : undefined, "aria-label": ariaLabel?.[1] ?? 'Maximum value', ...getAriaProps(currentRange[1]), name: nameHigh }), tooltipMode !== 'hidden' && (jsx("output", { ref: outputRef, className: prefixedClassNames(classPrefix, 'slider-output', 'slider-output-low', {
+                    } }), jsx("input", { ref: combinedRef, type: "range", min: min, max: max, step: step, value: currentRange[0], disabled: disabled, onChange: handleRangeLowChange, onKeyDown: handleKeyDown, onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), onFocus: () => setShowTooltip(true), onBlur: () => setShowTooltip(false), className: prefixedClassNames(classPrefix, 'slider-input', 'slider-input-low'), "aria-valuenow": currentRange[0], "aria-valuemin": min, "aria-valuemax": max, "aria-orientation": isVertical ? 'vertical' : undefined, "aria-label": ariaLabel?.[0] ?? 'Minimum value', ...getAriaProps(currentRange[0]), id: controlId, ...rest, ...(nameLow !== undefined ? { name: nameLow } : {}) }), jsx("input", { ref: inputHighRef, type: "range", min: min, max: max, step: step, value: currentRange[1], disabled: disabled, onChange: handleRangeHighChange, onMouseEnter: () => setShowTooltipHigh(true), onMouseLeave: () => setShowTooltipHigh(false), onFocus: () => setShowTooltipHigh(true), onBlur: () => setShowTooltipHigh(false), className: prefixedClassNames(classPrefix, 'slider-input', 'slider-input-high'), "aria-valuenow": currentRange[1], "aria-valuemin": min, "aria-valuemax": max, "aria-orientation": isVertical ? 'vertical' : undefined, "aria-label": ariaLabel?.[1] ?? 'Maximum value', ...getAriaProps(currentRange[1]), name: nameHigh }), tooltipMode !== 'hidden' && (jsx("output", { ref: outputRef, className: prefixedClassNames(classPrefix, 'slider-output', 'slider-output-low', {
                     'is-visible': showTipLow,
                     'is-flipped': flipped,
                     'is-flipped-left': isVertical && verticalFlippedLeft,
@@ -6706,7 +6608,7 @@ const Slider = forwardRef((props, ref) => {
         content = jsx(Control, { children: content });
     }
     if (!insideField) {
-        return (jsxs(Field, { label: label, labelSize: labelSize, labelProps: labelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
+        return (jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
     }
     return (jsxs(Fragment, { children: [content, messageEl] }));
 });
@@ -6715,10 +6617,7 @@ Slider.displayName = 'Slider';
 const ArrowDropUp = () => (jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: jsx("path", { d: "M7 14.5l5-5 5 5" }) }));
 const ArrowDropDown = () => (jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: jsx("path", { d: "M7 9.5l5 5 5-5" }) }));
 /**
- * Bulma-styled numeric input with increment/decrement controls.
- *
- * Supports plus/minus buttons or a compact stepper variant,
- * with configurable min/max, step, and exponential stepping.
+ * The `Numberinput` component provides a number input with increment/decrement buttons.
  *
  * @function
  * @param {NumberinputProps} props - Props for the Numberinput component.
@@ -6747,6 +6646,13 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
     const isStepper = variant === 'stepper';
     const isAddons = compact || isStepper;
     const effectiveControlsPosition = isStepper ? 'right' : controlsPosition;
+    // The plusminus bare branch renders no Field and no label at all.
+    const { controlId, fieldLabelProps } = useAutoLabelId({
+        label,
+        id: props.id,
+        labelProps,
+        rendersLabel: !insideField && (isStepper || !effectiveBare),
+    });
     // Clamp value to min/max
     const clampValue = useCallback((val) => {
         let clamped = val;
@@ -6845,12 +6751,12 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
         }
     };
     // Shared input element
-    const inputControl = (jsx("div", { className: expandedControlClasses, children: jsx("input", { ref: combinedRef, type: "number", className: inputClasses, value: currentValue ?? '', min: min, max: max, step: step, disabled: disabled, readOnly: !editable, onChange: handleInputChange, onKeyDown: handleKeyDown, "aria-valuenow": currentValue ?? undefined, "aria-valuemin": min, "aria-valuemax": max, ...rest }) }));
+    const inputControl = (jsx("div", { className: expandedControlClasses, children: jsx("input", { ref: combinedRef, type: "number", className: inputClasses, value: currentValue ?? '', min: min, max: max, step: step, disabled: disabled, readOnly: !editable, onChange: handleInputChange, onKeyDown: handleKeyDown, "aria-valuenow": currentValue ?? undefined, "aria-valuemin": min, "aria-valuemax": max, id: controlId, ...rest }) }));
     // Stepper variant
     if (isStepper) {
         const stepperElement = (jsxs("div", { className: combinedClasses, children: [inputControl, jsx("div", { className: controlClasses, children: jsxs("div", { className: stepperClasses, children: [jsx("button", { type: "button", className: stepperButtonClasses, onClick: handleIncrement, disabled: disabled || isAtMax, tabIndex: -1, "aria-label": "Increase value", children: jsx(ArrowDropUp, {}) }), jsx("button", { type: "button", className: stepperButtonClasses, onClick: handleDecrement, disabled: disabled || isAtMin, tabIndex: -1, "aria-label": "Decrease value", children: jsx(ArrowDropDown, {}) })] }) })] }));
         if (!insideField) {
-            return (jsxs(Field, { label: label, labelSize: labelSize, labelProps: labelProps, horizontal: horizontal, className: fieldClassName, children: [stepperElement, messageEl] }));
+            return (jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [stepperElement, messageEl] }));
         }
         return (jsxs(Fragment, { children: [stepperElement, messageEl] }));
     }
@@ -6884,7 +6790,7 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
         numberinputElement = (jsxs("div", { className: combinedClasses, children: [decrementControl, inputControl, incrementControl] }));
     }
     if (!insideField) {
-        return (jsxs(Field, { label: label, labelSize: labelSize, labelProps: labelProps, horizontal: horizontal, className: fieldClassName, children: [numberinputElement, messageEl] }));
+        return (jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [numberinputElement, messageEl] }));
     }
     return (jsxs(Fragment, { children: [numberinputElement, messageEl] }));
 });
@@ -6907,11 +6813,7 @@ function getFillPercent(iconIndex, value) {
     return Math.round((value - iconIndex) * 100);
 }
 /**
- * Rate component for star/icon-based ratings.
- *
- * Provides an interactive rating system with customizable icons,
- * sizes, and display options. Works in controlled or uncontrolled modes.
- * Supports icon libraries, Bulma color variants, and fractional precision.
+ * The `Rate` component provides a star/icon-based rating system.
  *
  * @function
  * @param {RateProps} props - Props for the Rate component.
@@ -7142,10 +7044,7 @@ const Rate = forwardRef(({ label, labelSize, labelProps, horizontal, message, me
 Rate.displayName = 'Rate';
 
 /**
- * Autocomplete component with dropdown suggestions.
- *
- * Provides an input field with a dropdown of suggestions that filter
- * based on user input.
+ * The `Autocomplete` component provides an input field with dropdown suggestions that filter based on user input.
  *
  * @function
  * @param {AutocompleteProps} props - Props for the Autocomplete component.
@@ -7386,10 +7285,7 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
 Autocomplete.displayName = 'Autocomplete';
 
 /**
- * Taginput component for managing multiple tags.
- *
- * Allows users to create, edit, and remove tags with optional
- * autocomplete suggestions.
+ * The `Taginput` component provides a tag/chip input field for managing multiple tags.
  *
  * @function
  * @param {TaginputProps} props - Props for the Taginput component.
@@ -7807,10 +7703,7 @@ const TextAreaBase = forwardRef(({ color, size, isRounded, isStatic, isHovered,
 TextAreaBase.displayName = 'TextAreaBase';
 
 /**
- * Input is a convenience component that composes Field, Control, and Input.
- *
- * Use this for typical form fields. For complex layouts (grouped fields,
- * addons, etc.), compose Field, Control, and Input directly.
+ * The `Input` component provides a Bulma-styled text input, supporting colors, sizes, rounded corners, static/read-only state, hover/focus/loading states, and all Bulma helper props.
  *
  * @function
  * @param {InputProps} props - Props for Input.
@@ -7841,26 +7734,29 @@ fieldClassName, controlClassName,
 ...inputProps }, ref) => {
     const insideField = useInsideField();
     const insideControl = useInsideControl();
+    const { controlId, fieldLabelProps } = useAutoLabelId({
+        label,
+        id: inputProps.id,
+        labelProps,
+        rendersLabel: !insideField,
+    });
     const helpClass = usePrefixedClassNames('help', {
         [`is-${messageColor}`]: !!messageColor,
     });
-    let content = jsx(InputBase, { ref: ref, ...inputProps });
+    let content = jsx(InputBase, { ref: ref, id: controlId, ...inputProps });
     if (!insideControl) {
         content = (jsx(Control, { iconLeft: iconLeft, iconRight: iconRight, iconLeftName: iconLeftName, iconRightName: iconRightName, iconLeftSize: iconLeftSize, iconRightSize: iconRightSize, hasIconsLeft: hasIconsLeft, hasIconsRight: hasIconsRight, isLoading: isLoading, isExpanded: isExpanded, size: controlSize, className: controlClassName, children: content }));
     }
     const messageEl = message ? jsx("p", { className: helpClass, children: message }) : null;
     if (!insideField) {
-        return (jsxs(Field, { label: label, labelSize: labelSize, labelProps: labelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
+        return (jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
     }
     return (jsxs(Fragment, { children: [content, messageEl] }));
 });
 Input.displayName = 'Input';
 
 /**
- * Select is a convenience component that composes Field, Control, and SelectBase.
- *
- * Use this for typical form fields. For complex layouts (grouped fields,
- * addons, etc.), compose Field, Control, and SelectBase directly.
+ * The `Select` component provides a Bulma-styled dropdown for selecting one or more options.
  *
  * @function
  * @param {SelectProps} props - Props for Select.
@@ -7888,26 +7784,29 @@ fieldClassName, controlClassName,
 ...selectProps }, ref) => {
     const insideField = useInsideField();
     const insideControl = useInsideControl();
+    const { controlId, fieldLabelProps } = useAutoLabelId({
+        label,
+        id: selectProps.id,
+        labelProps,
+        rendersLabel: !insideField,
+    });
     const helpClass = usePrefixedClassNames('help', {
         [`is-${messageColor}`]: !!messageColor,
     });
-    let content = jsx(SelectBase, { ref: ref, ...selectProps });
+    let content = jsx(SelectBase, { ref: ref, id: controlId, ...selectProps });
     if (!insideControl) {
         content = (jsx(Control, { iconLeft: iconLeft, iconLeftName: iconLeftName, iconLeftSize: iconLeftSize, hasIconsLeft: hasIconsLeft, isExpanded: isExpanded, size: controlSize, className: controlClassName, children: content }));
     }
     const messageEl = message ? jsx("p", { className: helpClass, children: message }) : null;
     if (!insideField) {
-        return (jsxs(Field, { label: label, labelSize: labelSize, labelProps: labelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
+        return (jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
     }
     return (jsxs(Fragment, { children: [content, messageEl] }));
 });
 Select.displayName = 'Select';
 
 /**
- * TextArea is a convenience component that composes Field, Control, and TextAreaBase.
- *
- * Use this for typical form fields. For complex layouts (grouped fields,
- * addons, etc.), compose Field, Control, and TextAreaBase directly.
+ * The `TextArea` component provides a Bulma-styled multi-line text input, supporting color, size, rounded corners, static/read-only state, hover/focus/loading states, fixed size, and all Bulma helper props.
  *
  * @function
  * @param {TextAreaProps} props - Props for TextArea.
@@ -7936,16 +7835,22 @@ fieldClassName, controlClassName,
 ...textAreaProps }, ref) => {
     const insideField = useInsideField();
     const insideControl = useInsideControl();
+    const { controlId, fieldLabelProps } = useAutoLabelId({
+        label,
+        id: textAreaProps.id,
+        labelProps,
+        rendersLabel: !insideField,
+    });
     const helpClass = usePrefixedClassNames('help', {
         [`is-${messageColor}`]: !!messageColor,
     });
-    let content = jsx(TextAreaBase, { ref: ref, ...textAreaProps });
+    let content = jsx(TextAreaBase, { ref: ref, id: controlId, ...textAreaProps });
     if (!insideControl) {
         content = (jsx(Control, { isLoading: controlIsLoading, size: controlSize, className: controlClassName, children: content }));
     }
     const messageEl = message ? jsx("p", { className: helpClass, children: message }) : null;
     if (!insideField) {
-        return (jsxs(Field, { label: label, labelSize: labelSize, labelProps: labelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
+        return (jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
     }
     return (jsxs(Fragment, { children: [content, messageEl] }));
 });
@@ -9603,11 +9508,7 @@ const DateInputBase = forwardRef((props, ref) => {
 DateInputBase.displayName = 'DateInputBase';
 
 /**
- * DateInput is a form input that opens a popover calendar for date selection.
- * Uses native `Date` and `Intl` only (no extra dependencies). Supports min/max
- * bounds, disabled-date predicates, custom formats, locale-aware day/month
- * names, an inline mode, and a native `<input type="date">` fallback for touch
- * devices.
+ * The `DateInput` component is a form input that opens a popover calendar for date selection.
  *
  * @function
  * @param {DateInputProps} props - Props for the DateInput.
@@ -9626,12 +9527,19 @@ DateInputBase.displayName = 'DateInputBase';
 const DateInput = forwardRef(({ label, labelSize, labelProps, horizontal, iconLeft, iconRight, iconLeftName = 'calendar', iconRightName, iconLeftSize, iconRightSize, hasIconsLeft, hasIconsRight, isLoading, isExpanded, controlSize, message, messageColor, fieldClassName, controlClassName, ...baseProps }, ref) => {
     const insideField = useInsideField();
     const insideControl = useInsideControl();
+    const { controlId, fieldLabelProps } = useAutoLabelId({
+        label,
+        id: baseProps.id,
+        labelProps,
+        // Inline mode renders a bare calendar with no input to label.
+        rendersLabel: !insideField && !baseProps.inline,
+    });
     const helpClass = usePrefixedClassNames('help', {
         [`is-${messageColor}`]: !!messageColor,
     });
     // The right-side launcher is on by default; suppress it while the Control
     // shows its loading spinner (also on the right) unless explicitly set.
-    let content = (jsx(DateInputBase, { ref: ref, ...baseProps, triggerIcon: baseProps.triggerIcon ?? !isLoading }));
+    let content = (jsx(DateInputBase, { ref: ref, id: controlId, ...baseProps, triggerIcon: baseProps.triggerIcon ?? !isLoading }));
     // Inline mode renders a bare calendar with no input, so the Control's
     // icon-left container has nothing to anchor to. Skip the Control wrap.
     if (!insideControl && !baseProps.inline) {
@@ -9639,7 +9547,7 @@ const DateInput = forwardRef(({ label, labelSize, labelProps, horizontal, iconLe
     }
     const messageEl = message ? jsx("p", { className: helpClass, children: message }) : null;
     if (!insideField) {
-        return (jsxs(Field, { label: label, labelSize: labelSize, labelProps: labelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
+        return (jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
     }
     return (jsxs(Fragment, { children: [content, messageEl] }));
 });
@@ -10695,10 +10603,7 @@ const TimeInputBase = forwardRef((props, ref) => {
 TimeInputBase.displayName = 'TimeInputBase';
 
 /**
- * TimeInput is a form input that opens a popover spinner for time-of-day
- * selection. Supports 12h/24h, optional seconds, custom step increments,
- * min/max bounds, an unselectable-times predicate, and a native
- * `<input type="time">` fallback for touch devices.
+ * The `TimeInput` component is a form input that opens a popover spinner for time-of-day selection.
  *
  * @function
  * @param {TimeInputProps} props
@@ -10713,12 +10618,19 @@ TimeInputBase.displayName = 'TimeInputBase';
 const TimeInput = forwardRef(({ label, labelSize, labelProps, horizontal, iconLeft, iconRight, iconLeftName = 'clock', iconRightName, iconLeftSize, iconRightSize, hasIconsLeft, hasIconsRight, isLoading, isExpanded, controlSize, message, messageColor, fieldClassName, controlClassName, ...baseProps }, ref) => {
     const insideField = useInsideField();
     const insideControl = useInsideControl();
+    const { controlId, fieldLabelProps } = useAutoLabelId({
+        label,
+        id: baseProps.id,
+        labelProps,
+        // Inline mode renders a bare panel with no input to label.
+        rendersLabel: !insideField && !baseProps.inline,
+    });
     const helpClass = usePrefixedClassNames('help', {
         [`is-${messageColor}`]: !!messageColor,
     });
     // The right-side launcher is on by default; suppress it while the Control
     // shows its loading spinner (also on the right) unless explicitly set.
-    let content = (jsx(TimeInputBase, { ref: ref, ...baseProps, triggerIcon: baseProps.triggerIcon ?? !isLoading }));
+    let content = (jsx(TimeInputBase, { ref: ref, id: controlId, ...baseProps, triggerIcon: baseProps.triggerIcon ?? !isLoading }));
     // Inline mode renders a bare panel with no input, so the Control's
     // icon-left container has nothing to anchor to. Skip the Control wrap.
     if (!insideControl && !baseProps.inline) {
@@ -10726,7 +10638,7 @@ const TimeInput = forwardRef(({ label, labelSize, labelProps, horizontal, iconLe
     }
     const messageEl = message ? jsx("p", { className: helpClass, children: message }) : null;
     if (!insideField) {
-        return (jsxs(Field, { label: label, labelSize: labelSize, labelProps: labelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
+        return (jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
     }
     return (jsxs(Fragment, { children: [content, messageEl] }));
 });
@@ -10983,9 +10895,7 @@ const DateTimeInputBase = forwardRef((props, ref) => {
 DateTimeInputBase.displayName = 'DateTimeInputBase';
 
 /**
- * DateTimeInput is a form input that opens a popover combining a calendar
- * (above) and a time spinner (below). Footer offers Today / Now / Clear / OK.
- * Includes a native `<input type="datetime-local">` fallback for touch devices.
+ * The `DateTimeInput` combines a calendar and a time **wheel spinner** in a single popover — an iOS-style layout.
  *
  * @function
  * @param {DateTimeInputProps} props
@@ -11004,12 +10914,19 @@ DateTimeInputBase.displayName = 'DateTimeInputBase';
 const DateTimeInput = forwardRef(({ label, labelSize, labelProps, horizontal, iconLeft, iconRight, iconLeftName = 'calendar-alt', iconRightName, iconLeftSize, iconRightSize, hasIconsLeft, hasIconsRight, isLoading, isExpanded, controlSize, message, messageColor, fieldClassName, controlClassName, ...baseProps }, ref) => {
     const insideField = useInsideField();
     const insideControl = useInsideControl();
+    const { controlId, fieldLabelProps } = useAutoLabelId({
+        label,
+        id: baseProps.id,
+        labelProps,
+        // Inline mode renders a bare picker with no input to label.
+        rendersLabel: !insideField && !baseProps.inline,
+    });
     const helpClass = usePrefixedClassNames('help', {
         [`is-${messageColor}`]: !!messageColor,
     });
     // The right-side launcher is on by default; suppress it while the Control
     // shows its loading spinner (also on the right) unless explicitly set.
-    let content = (jsx(DateTimeInputBase, { ref: ref, ...baseProps, triggerIcon: baseProps.triggerIcon ?? !isLoading }));
+    let content = (jsx(DateTimeInputBase, { ref: ref, id: controlId, ...baseProps, triggerIcon: baseProps.triggerIcon ?? !isLoading }));
     // Inline mode renders a bare picker with no input, so the Control's
     // icon-left container has nothing to anchor to. Skip the Control wrap.
     if (!insideControl && !baseProps.inline) {
@@ -11017,14 +10934,14 @@ const DateTimeInput = forwardRef(({ label, labelSize, labelProps, horizontal, ic
     }
     const messageEl = message ? jsx("p", { className: helpClass, children: message }) : null;
     if (!insideField) {
-        return (jsxs(Field, { label: label, labelSize: labelSize, labelProps: labelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
+        return (jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
     }
     return (jsxs(Fragment, { children: [content, messageEl] }));
 });
 DateTimeInput.displayName = 'DateTimeInput';
 
 /**
- * Bulma Cell component for CSS Grid layouts.
+ * The `Cell` component provides a single Bulma grid cell for use inside the [`Grid`](./grid.md) component.
  *
  * @function
  * @param {CellProps} props - Props for the Cell component.
@@ -11052,7 +10969,7 @@ const Cell = ({ colStart, colFromEnd, colSpan, rowStart, rowFromEnd, rowSpan, cl
 };
 
 /**
- * Bulma Grid component for CSS Grid layouts, supports both fixed and responsive grid modes.
+ * The `Grid` component provides Bulma's advanced CSS Grid layout for complex, modern layouts.
  *
  * @function
  * @param {GridProps} props - Props for the Grid component.
@@ -11774,17 +11691,16 @@ const Theme = ({ bulmaVars = {}, children, className, isRoot = false, colorMode,
 };
 
 /**
- * Container component for Bulma.
- * Adds optional responsive, fluid, and color support, including is-max-* and breakpoint classes.
+ * The `Container` component provides a responsive and flexible layout wrapper for your Bulma React UI.
  *
  * @function
  * @param {ContainerProps} props - Props for the Container component.
  * @returns {JSX.Element} The rendered container.
  * @see {@link https://bulma.io/documentation/layout/container/ | Bulma Container documentation}
  */
-const Container = ({ className, textColor, bgColor, fluid, widescreen, fullhd, breakpoint, isMax, children, ...props }) => {
+const Container = ({ className, textColor, color, bgColor, fluid, widescreen, fullhd, breakpoint, isMax, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
-        color: textColor,
+        color: textColor ?? color,
         backgroundColor: bgColor,
         ...props,
     });
@@ -11815,7 +11731,7 @@ const Container = ({ className, textColor, bgColor, fluid, widescreen, fullhd, b
 };
 
 /**
- * Bulma Footer component.
+ * The `Footer` component provides a semantic and accessible site footer for your Bulma React UI.
  *
  * @function
  * @param {FooterProps} props - Props for the Footer component.
@@ -11840,7 +11756,7 @@ const Footer = ({ as = 'footer', className, children, color, bgColor, textColor,
 };
 
 /**
- * Bulma Hero component root.
+ * The `Hero` component provides a responsive, flexible, and visually striking section for your Bulma React UI.
  *
  * @function
  * @param {HeroProps} props - Props for the Hero component.
@@ -11848,6 +11764,7 @@ const Footer = ({ as = 'footer', className, children, color, bgColor, textColor,
  * @see {@link https://bulma.io/documentation/layout/hero/ | Bulma Hero documentation}
  */
 const HeroComponent = ({ className, color, size, bgColor, fullheightWithNavbar, children, ...props }) => {
+    warnUnstyledColor('Hero', color, ['inherit', 'current']);
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         backgroundColor: bgColor,
         ...props,
@@ -11861,7 +11778,7 @@ const HeroComponent = ({ className, color, size, bgColor, fullheightWithNavbar,
     return (jsx("section", { className: heroClasses, ...rest, children: children }));
 };
 /**
- * Bulma Hero head section.
+ * Top bar for navigation or branding.
  *
  * @function
  * @param {HeroHeadProps} props - Props for the HeroHead component.
@@ -11878,7 +11795,7 @@ const HeroHead = ({ className, children, color, bgColor, textColor, ...props })
     return (jsx("div", { className: heroHeadClasses, ...rest, children: children }));
 };
 /**
- * Bulma Hero body section.
+ * Main content area, vertically centered by default.
  *
  * @function
  * @param {HeroBodyProps} props - Props for the HeroBody component.
@@ -11895,7 +11812,7 @@ const HeroBody = ({ className, children, color, bgColor, textColor, ...props })
     return (jsx("div", { className: heroBodyClasses, ...rest, children: children }));
 };
 /**
- * Bulma Hero foot section.
+ * Bottom bar for tabs or actions.
  *
  * @function
  * @param {HeroFootProps} props - Props for the HeroFoot component.
@@ -11919,7 +11836,7 @@ const Hero = withSubComponents(HeroComponent, {
 }, 'Hero');
 
 /**
- * Bulma Level component for horizontal layouts.
+ * The `Level` component provides a flexible horizontal layout for your Bulma React UI, perfect for aligning items on the left and right, distributing items evenly, or centering statistics and controls.
  *
  * @function
  * @param {LevelProps} props - Props for the Level component.
@@ -11939,7 +11856,7 @@ const LevelComponent = ({ isMobile, className, children, color, bgColor, textCol
     return (jsx("nav", { className: levelClasses, ...rest, children: children }));
 };
 /**
- * Bulma Level left section.
+ * Left-aligned content.
  *
  * @function
  * @param {LevelLeftProps} props - Props for the LevelLeft component.
@@ -11956,7 +11873,7 @@ const LevelLeft = ({ className, children, color, bgColor, textColor, ...props })
     return (jsx("div", { className: levelLeftClasses, ...rest, children: children }));
 };
 /**
- * Bulma Level right section.
+ * Right-aligned content.
  *
  * @function
  * @param {LevelRightProps} props - Props for the LevelRight component.
@@ -11973,7 +11890,7 @@ const LevelRight = ({ className, children, color, bgColor, textColor, ...props }
     return (jsx("div", { className: levelRightClasses, ...rest, children: children }));
 };
 /**
- * Bulma Level item section.
+ * Individual item, can be rendered as `div`, `p`, or `a`.
  *
  * @function
  * @param {LevelItemProps} props - Props for the LevelItem component.
@@ -12003,7 +11920,7 @@ const Level = withSubComponents(LevelComponent, {
 }, 'Level');
 
 /**
- * Bulma Media component root.
+ * The `Media` component implements Bulma’s powerful media object layout for React.
  *
  * @function
  * @param {MediaProps} props - Props for the Media component.
@@ -12022,7 +11939,7 @@ const MediaComponent = ({ as = 'article', className, children, color, bgColor, t
     return (jsx(Tag, { className: mediaClasses, ...rest, children: children }));
 };
 /**
- * Bulma Media left section.
+ * For avatars, thumbnails, icons (renders as `figure` or `div`)
  *
  * @function
  * @param {MediaLeftProps} props - Props for the MediaLeft component.
@@ -12040,7 +11957,7 @@ const MediaLeft = ({ as = 'figure', className, children, color, bgColor, textCol
     return (jsx(Tag, { className: mediaLeftClasses, ...rest, children: children }));
 };
 /**
- * Bulma Media content section.
+ * Main content (renders as `div`)
  *
  * @function
  * @param {MediaContentProps} props - Props for the MediaContent component.
@@ -12057,7 +11974,7 @@ const MediaContent = ({ className, children, color, bgColor, textColor, ...props
     return (jsx("div", { className: mediaContentClasses, ...rest, children: children }));
 };
 /**
- * Bulma Media right section.
+ * Actions or controls (renders as `div`)
  *
  * @function
  * @param {MediaRightProps} props - Props for the MediaRight component.
@@ -12081,7 +11998,7 @@ const Media = withSubComponents(MediaComponent, {
 }, 'Media');
 
 /**
- * Bulma Section component for general layout.
+ * The `Section` component provides vertical spacing and visual separation for your Bulma React UI.
  *
  * @function
  * @param {SectionProps} props - Props for the Section component.