@allxsmith/bestax-bulma 5.9.1 → 5.11.0

package/dist/index.esm.js

@@ -244,6 +244,22 @@ const validColorShades = [
     'bold',
     'on-scheme',
 ];
+/**
+ * Valid Bulma scheme color names for scheme-aware backgrounds.
+ *
+ * Bulma ships no `has-background-scheme-*` helper classes, so these values
+ * never emit a class — components render them as a dark-mode-safe inline
+ * `background-color: var(--bulma-<value>)` style instead.
+ * @example 'scheme-main', 'scheme-main-bis', 'scheme-invert'
+ */
+const validSchemeColors = [
+    'scheme-main',
+    'scheme-main-bis',
+    'scheme-main-ter',
+    'scheme-invert',
+    'scheme-invert-bis',
+    'scheme-invert-ter',
+];
 /**
  * Valid Bulma size classes for margins and paddings.
  * @example '0', '1', 'auto'
@@ -435,6 +451,10 @@ const createBulmaClassHelpers = (classPrefix, viewport) => {
 /**
  * A hook that generates Bulma text and background color helper classes.
  *
+ * Scheme background values (`scheme-main`, `scheme-main-bis`, …) are dropped
+ * from class emission — Bulma ships no `has-background-scheme-*` classes; use
+ * {@link useColorStyles} to render them as an inline style.
+ *
  * @function useColorClasses
  * @param props - Color-related Bulma helper props.
  * @returns A space-separated string of color helper classes.
@@ -471,6 +491,38 @@ const useColorClasses = (props) => {
         return classNames(classes);
     }, [classPrefix, color, colorShade, backgroundColor, backgroundColorShade]);
 };
+/**
+ * A hook that generates inline styles for scheme-aware color props.
+ *
+ * When `backgroundColor` is one of the scheme color names in
+ * `validSchemeColors`, returns `{ backgroundColor: 'var(--bulma-<value>)' }` —
+ * an inline style that tracks Bulma's scheme CSS variables, so it adapts to
+ * light/dark mode with no bestax-shipped CSS. For every other input it
+ * returns `undefined` (never `{}`), so components that don't use scheme
+ * values produce identical DOM to before.
+ *
+ * `backgroundColorShade` is ignored for scheme values — Bulma defines no
+ * shaded scheme variables. Only the background is set: the `scheme-invert*`
+ * values do not change text color, so pair them with a contrasting
+ * foreground.
+ *
+ * @function useColorStyles
+ * @param props - Color-related Bulma helper props (scheme-aware).
+ * @returns An inline style object for scheme backgrounds, or `undefined`.
+ * @example
+ * const colorStyles = useColorStyles({ backgroundColor: 'scheme-main-bis' });
+ * // colorStyles: { backgroundColor: 'var(--bulma-scheme-main-bis)' }
+ */
+const useColorStyles = (props) => {
+    const { backgroundColor } = props;
+    return useMemo(() => {
+        if (backgroundColor &&
+            validSchemeColors.includes(backgroundColor)) {
+            return { backgroundColor: `var(--bulma-${backgroundColor})` };
+        }
+        return undefined;
+    }, [backgroundColor]);
+};
 
 /**
  * A hook that generates Bulma margin and padding helper classes.
@@ -841,16 +893,23 @@ const useOtherClasses = (props) => {
  * useTypographyClasses, useVisibilityClasses, useFlexboxClasses, and
  * useOtherClasses), which can also be used individually.
  *
+ * Scheme background values (`backgroundColor: 'scheme-main-bis'`, …) emit no
+ * class; they are returned as `bulmaHelperStyles` — a dark-mode-safe inline
+ * `background-color: var(--bulma-scheme-*)` style (`undefined` for all other
+ * inputs). Merge it with a user `style` prop via `mergeBulmaStyles`.
+ *
  * @function useBulmaClasses
- * @param props - Combination of BulmaClassesProps and additional props.
- * @returns An object containing the Bulma helper classes and unhandled props.
+ * @param props - Combination of BulmaClassesPropsWithScheme and additional props.
+ * @returns An object containing the Bulma helper classes, optional helper
+ * styles, and unhandled props.
  * @example
- * const { bulmaHelperClasses, rest } = useBulmaClasses({
+ * const { bulmaHelperClasses, bulmaHelperStyles, rest } = useBulmaClasses({
  *   color: 'primary',
- *   textSize: '3',
+ *   backgroundColor: 'scheme-main-bis',
  *   className: 'custom-class'
  * });
- * // bulmaHelperClasses: 'has-text-primary is-size-3'
+ * // bulmaHelperClasses: 'has-text-primary'
+ * // bulmaHelperStyles: { backgroundColor: 'var(--bulma-scheme-main-bis)' }
  * // rest: { className: 'custom-class' }
  */
 const useBulmaClasses = (props) => {
@@ -861,6 +920,7 @@ const useBulmaClasses = (props) => {
         backgroundColor,
         backgroundColorShade,
     });
+    const bulmaHelperStyles = useColorStyles({ backgroundColor });
     const spacingClasses = useSpacingClasses({
         m,
         mt,
@@ -948,7 +1008,7 @@ const useBulmaClasses = (props) => {
         flexboxClasses,
         otherClasses,
     ]);
-    return { bulmaHelperClasses, rest };
+    return { bulmaHelperClasses, bulmaHelperStyles, rest };
 };
 
 /**
@@ -1411,6 +1471,23 @@ const Breadcrumb = ({ className, alignment, separator, size, children, ...props
     return (jsx("nav", { className: breadcrumbClasses, "aria-label": "breadcrumbs", ...rest, children: jsx("ul", { children: children }) }));
 };
 
+/**
+ * Merges helper-emitted inline styles (e.g., `bulmaHelperStyles` from
+ * `useBulmaClasses`) with a user-supplied `style` prop.
+ *
+ * The user's `style` wins on conflicting properties, and when both inputs are
+ * absent the result is `undefined` — so components that receive neither
+ * render with no `style` attribute at all, exactly as before.
+ *
+ * @function mergeBulmaStyles
+ * @param helperStyles - Inline styles emitted by the Bulma helper hooks.
+ * @param style - The component consumer's `style` prop.
+ * @returns The merged style object, or `undefined` when both are absent.
+ * @example
+ * <section style={mergeBulmaStyles(bulmaHelperStyles, style)} />
+ */
+const mergeBulmaStyles = (helperStyles, style) => helperStyles || style ? { ...helperStyles, ...style } : undefined;
+
 /**
  * Wrap each footer item in a `.card-footer-item` span.
  * @param {CardProps['footer']} footer - Footer content (single node or array).
@@ -1449,9 +1526,9 @@ const hasCompoundComponents = (children) => {
  * @returns {JSX.Element} The rendered card element.
  * @see {@link https://bulma.io/documentation/components/card/ | Bulma Card documentation}
  */
-const CardComponent = ({ className, children, textColor, color, 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, style, ...props }) => {
     const { classPrefix } = useConfig();
-    const { bulmaHelperClasses, rest } = useBulmaClasses({
+    const { bulmaHelperClasses, bulmaHelperStyles, rest } = useBulmaClasses({
         color: textColor ?? color,
         backgroundColor: bgColor,
         ...props,
@@ -1470,7 +1547,7 @@ const CardComponent = ({ className, children, textColor, color, bgColor, hasShad
                         'is-centered': headerCentered,
                     }), children: header })), headerIcon] }));
     };
-    return (jsxs("div", { className: cardClasses, ...rest, children: [renderHeader(header, headerIcon, headerCentered, classPrefix), image && (jsx("div", { className: prefixedClassNames(classPrefix, 'card-image'), children: typeof image === 'string' ? (jsx("figure", { className: prefixedClassNames(classPrefix, 'image'), children: jsx("img", { src: image, alt: imageAlt ?? 'Card image' }) })) : (image) })), typeof children !== 'undefined' &&
+    return (jsxs("div", { className: cardClasses, style: mergeBulmaStyles(bulmaHelperStyles, style), ...rest, children: [renderHeader(header, headerIcon, headerCentered, classPrefix), image && (jsx("div", { className: prefixedClassNames(classPrefix, 'card-image'), children: typeof image === 'string' ? (jsx("figure", { className: prefixedClassNames(classPrefix, 'image'), children: jsx("img", { src: image, alt: imageAlt ?? 'Card image' }) })) : (image) })), typeof children !== 'undefined' &&
                 children !== null &&
                 children !== '' &&
                 !hasCompoundComponents(children) && (jsx("div", { className: prefixedClassNames(classPrefix, 'card-content'), children: children })), typeof children !== 'undefined' &&
@@ -1488,14 +1565,19 @@ const CardComponent = ({ className, children, textColor, color, bgColor, hasShad
  * @param {CardHeaderProps} props - Props for the CardHeader component.
  * @returns {JSX.Element} The rendered card header.
  */
-const CardHeader = ({ className, children, centered, ...props }) => {
+const CardHeader = ({ className, children, centered, color, bgColor, textColor, ...props }) => {
     const { classPrefix } = useConfig();
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor ?? color,
+        backgroundColor: bgColor,
+        ...props,
+    });
     // Check if children contains a CardHeaderTitle component
     const hasHeaderTitle = React.Children.toArray(children).some(child => React.isValidElement(child) &&
         typeof child.type === 'function' &&
         child.type === CardHeaderTitle);
     const headerClasses = usePrefixedClassNames('card-header');
-    return (jsx("header", { className: classNames(headerClasses, className), ...props, children: hasHeaderTitle ? (children) : (jsx("div", { className: classNames(prefixedClassNames(classPrefix, 'card-header-title', {
+    return (jsx("header", { className: classNames(headerClasses, bulmaHelperClasses, className), ...rest, children: hasHeaderTitle ? (children) : (jsx("div", { className: classNames(prefixedClassNames(classPrefix, 'card-header-title', {
                 'is-centered': centered,
             }), className), children: children })) }));
 };
@@ -1506,9 +1588,16 @@ const CardHeader = ({ className, children, centered, ...props }) => {
  * @param {CardHeaderTitleProps} props - Props for the CardHeaderTitle component.
  * @returns {JSX.Element} The rendered card header title.
  */
-const CardHeaderTitle = ({ className, children, centered, ...props }) => (jsx("div", { className: classNames(usePrefixedClassNames('card-header-title', {
-        'is-centered': centered,
-    }), className), ...props, children: children }));
+const CardHeaderTitle = ({ className, children, centered, color, bgColor, textColor, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor ?? color,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    return (jsx("div", { className: classNames(usePrefixedClassNames('card-header-title', {
+            'is-centered': centered,
+        }), bulmaHelperClasses, className), ...rest, children: children }));
+};
 /**
  * Card header icon compound component. Renders a `.card-header-icon` button.
  *
@@ -1516,7 +1605,14 @@ const CardHeaderTitle = ({ className, children, centered, ...props }) => (jsx("d
  * @param {CardHeaderIconProps} props - Props for the CardHeaderIcon component.
  * @returns {JSX.Element} The rendered card header icon button.
  */
-const CardHeaderIcon = ({ className, children, ...props }) => (jsx("button", { className: classNames(usePrefixedClassNames('card-header-icon'), className), "aria-label": props['aria-label'] || 'more options', ...props, children: children }));
+const CardHeaderIcon = ({ className, children, color, bgColor, textColor, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor ?? color,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    return (jsx("button", { className: classNames(usePrefixedClassNames('card-header-icon'), bulmaHelperClasses, className), "aria-label": props['aria-label'] || 'more options', ...rest, children: children }));
+};
 /**
  * Card image compound component. Wraps children in a `.card-image` element.
  *
@@ -1524,7 +1620,14 @@ const CardHeaderIcon = ({ className, children, ...props }) => (jsx("button", { c
  * @param {CardImageProps} props - Props for the CardImage component.
  * @returns {JSX.Element} The rendered card image container.
  */
-const CardImage = ({ className, children, ...props }) => (jsx("div", { className: classNames(usePrefixedClassNames('card-image'), className), ...props, children: children }));
+const CardImage = ({ className, children, color, bgColor, textColor, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor ?? color,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    return (jsx("div", { className: classNames(usePrefixedClassNames('card-image'), bulmaHelperClasses, className), ...rest, children: children }));
+};
 /**
  * Card content compound component. Wraps children in a `.card-content` element.
  *
@@ -1532,7 +1635,14 @@ const CardImage = ({ className, children, ...props }) => (jsx("div", { className
  * @param {CardContentProps} props - Props for the CardContent component.
  * @returns {JSX.Element} The rendered card content container.
  */
-const CardContent = ({ className, children, ...props }) => (jsx("div", { className: classNames(usePrefixedClassNames('card-content'), className), ...props, children: children }));
+const CardContent = ({ className, children, color, bgColor, textColor, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor ?? color,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    return (jsx("div", { className: classNames(usePrefixedClassNames('card-content'), bulmaHelperClasses, className), ...rest, children: children }));
+};
 /**
  * Card footer compound component. Wraps children in a `.card-footer` element.
  *
@@ -1540,7 +1650,14 @@ const CardContent = ({ className, children, ...props }) => (jsx("div", { classNa
  * @param {CardFooterProps} props - Props for the CardFooter component.
  * @returns {JSX.Element} The rendered card footer.
  */
-const CardFooter = ({ className, children, ...props }) => (jsx("footer", { className: classNames(usePrefixedClassNames('card-footer'), className), ...props, children: children }));
+const CardFooter = ({ className, children, color, bgColor, textColor, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor ?? color,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    return (jsx("footer", { className: classNames(usePrefixedClassNames('card-footer'), bulmaHelperClasses, className), ...rest, children: children }));
+};
 /**
  * Card footer item compound component. Wraps children in a `.card-footer-item` span.
  *
@@ -1548,7 +1665,14 @@ const CardFooter = ({ className, children, ...props }) => (jsx("footer", { class
  * @param {CardFooterItemProps} props - Props for the CardFooterItem component.
  * @returns {JSX.Element} The rendered card footer item.
  */
-const CardFooterItem = ({ className, children, ...props }) => (jsx("span", { className: classNames(usePrefixedClassNames('card-footer-item'), className), ...props, children: children }));
+const CardFooterItem = ({ className, children, color, bgColor, textColor, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor ?? color,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    return (jsx("span", { className: classNames(usePrefixedClassNames('card-footer-item'), bulmaHelperClasses, className), ...rest, children: children }));
+};
 // Attach nested Title and Icon components to CardHeader
 const CardHeaderCompound = withSubComponents(CardHeader, {
     Title: CardHeaderTitle,
@@ -2641,7 +2765,7 @@ function useTabsContext() {
  *   </Tabs.Content>
  * </Tabs>
  */
-const TabsComponent = ({ align, size, fullwidth, boxed, toggle, rounded, color, value, onChange, defaultValue = 0, vertical, side, expanded, className, children, ...props }) => {
+const TabsComponent = ({ align, size, isFullwidth, isFullWidth, 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
@@ -2660,7 +2784,7 @@ const TabsComponent = ({ align, size, fullwidth, boxed, toggle, rounded, color,
         [`is-${align}`]: align,
         [`is-${size}`]: size,
         [`is-${color}`]: color,
-        'is-fullwidth': fullwidth,
+        'is-fullwidth': isFullwidth ?? isFullWidth ?? fullwidth,
         'is-boxed': boxed,
         'is-toggle': toggle,
         'is-toggle-rounded': rounded,
@@ -3350,9 +3474,10 @@ const Steps = withSubComponents(StepsComponent, { Step }, 'Steps');
  *   <div>Panel content</div>
  * </Sidebar>
  */
-const SidebarComponent = forwardRef(({ isOpen, onClose, position = 'left', width = '260px', fullWidth = false, overlay = true, overlayClose = true, escapeClose = true, canCancel = true, children, inline = false, className, style, ...props }, ref) => {
+const SidebarComponent = forwardRef(({ isOpen, onClose, position = 'left', width = '260px', isFullwidth, fullWidth, overlay = true, overlayClose = true, escapeClose = true, canCancel = true, children, inline = false, className, style, ...props }, ref) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
     const sidebarRef = useRef(null);
+    const resolvedFullwidth = isFullwidth ?? fullWidth ?? false;
     // Close handler
     const handleClose = useCallback(() => {
         if (canCancel && onClose) {
@@ -3419,7 +3544,7 @@ const SidebarComponent = forwardRef(({ isOpen, onClose, position = 'left', width
     const sidebarClasses = usePrefixedClassNames('sidebar', {
         'is-active': isOpen,
         [`is-${position}`]: position,
-        'is-fullwidth': fullWidth,
+        'is-fullwidth': resolvedFullwidth,
     });
     const backgroundClass = usePrefixedClassNames('sidebar-background', {
         'is-active': isOpen,
@@ -3429,7 +3554,7 @@ const SidebarComponent = forwardRef(({ isOpen, onClose, position = 'left', width
     // Custom style for width
     const sidebarStyle = {
         ...style,
-        '--bulma-sidebar-width': fullWidth ? '100%' : width,
+        '--bulma-sidebar-width': resolvedFullwidth ? '100%' : width,
     };
     const sidebarContent = (jsxs(Fragment, { children: [overlay && (jsx("div", { className: backgroundClass, onClick: handleOverlayClick, "aria-hidden": "true" })), jsx("aside", { ref: combinedRef, className: combinedClasses, style: sidebarStyle, role: "dialog", "aria-modal": overlay ? 'true' : undefined, "aria-hidden": !isOpen, tabIndex: -1, ...rest, children: jsx("div", { className: contentClass, children: children }) })] }));
     if (inline) {
@@ -3997,7 +4122,7 @@ const validButtonColors = [...validColors, 'text', 'ghost'];
  * @returns {JSX.Element} The rendered button or anchor element.
  * @see {@link https://bulma.io/documentation/elements/button/ | Bulma Button documentation}
  */
-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 Button = ({ color, size, isLight, isRounded, isLoading, isStatic, isFullwidth, 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,
         backgroundColor: bgColor,
@@ -4018,7 +4143,7 @@ const Button = ({ color, size, isLight, isRounded, isLoading, isStatic, isFullWi
         'is-focused': isFocused,
         'is-active': isActive,
         'is-inverted': isInverted,
-        'is-fullwidth': isFullWidth,
+        'is-fullwidth': isFullwidth ?? isFullWidth,
     });
     // Combine prefixed Bulma classes with unprefixed user className and prefixed helper classes
     const buttonClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
@@ -4520,11 +4645,11 @@ const Block = ({ className, textColor, color, bgColor, children, ...props }) =>
  * @returns {JSX.Element} The rendered box element.
  * @see {@link https://bulma.io/documentation/elements/box/ | Bulma Box documentation}
  */
-const Box = ({ className, textColor, color, bgColor, hasShadow = true, children, ...props }) => {
+const Box = ({ className, textColor, color, bgColor, hasShadow = true, children, style, ...props }) => {
     /**
      * Generates Bulma helper classes and separates out remaining props.
      */
-    const { bulmaHelperClasses, rest } = useBulmaClasses({
+    const { bulmaHelperClasses, bulmaHelperStyles, rest } = useBulmaClasses({
         color: textColor ?? color,
         backgroundColor: bgColor,
         ...props,
@@ -4533,7 +4658,7 @@ const Box = ({ className, textColor, color, bgColor, hasShadow = true, children,
         'is-shadowless': !hasShadow,
     });
     const boxClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return (jsx("div", { className: boxClasses, ...rest, children: children }));
+    return (jsx("div", { className: boxClasses, style: mergeBulmaStyles(bulmaHelperStyles, style), ...rest, children: children }));
 };
 
 /**
@@ -5234,8 +5359,11 @@ const SubTitle = ({ className, size, as = 'h1', hasSkeleton, textColor, bgColor,
     });
     // Validate 'as' prop at runtime
     const element = validSubTitleElements.includes(as) ? as : 'h1';
-    // Validate 'size' prop at runtime
-    const validSize = size && validSubTitleSizes.includes(size) ? size : undefined;
+    // Validate 'size' prop at runtime (numeric sizes normalize to strings)
+    const normalized = size == null ? undefined : String(size);
+    const validSize = normalized && validSubTitleSizes.includes(normalized)
+        ? normalized
+        : undefined;
     const bulmaClasses = usePrefixedClassNames('subtitle', {
         [`is-${validSize}`]: validSize,
         'has-skeleton': hasSkeleton,
@@ -5395,7 +5523,7 @@ const Th = ({ className, isAligned, width, color, children, ...props }) => {
  * @returns {JSX.Element} The rendered table element.
  * @see {@link https://bulma.io/documentation/elements/table/ | Bulma Table documentation}
  */
-const TableComponent = ({ className, isBordered, isStriped, isNarrow, isHoverable, isFullwidth, isResponsive, children, ...props }) => {
+const TableComponent = ({ className, isBordered, isStriped, isNarrow, isHoverable, isFullwidth, isFullWidth, isResponsive, children, ...props }) => {
     /**
      * Generates Bulma helper classes and separates out remaining props.
      */
@@ -5405,7 +5533,7 @@ const TableComponent = ({ className, isBordered, isStriped, isNarrow, isHoverabl
         'is-striped': isStriped,
         'is-narrow': isNarrow,
         'is-hoverable': isHoverable,
-        'is-fullwidth': isFullwidth,
+        'is-fullwidth': isFullwidth ?? isFullWidth,
     });
     const containerClass = usePrefixedClassNames('table-container');
     const tableClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
@@ -5445,7 +5573,7 @@ const validTagSizes = ['normal', 'medium', 'large'];
  * @returns {JSX.Element} The rendered tag element.
  * @see {@link https://bulma.io/documentation/elements/tag/ | Bulma Tag documentation}
  */
-const Tag = ({ className, color, size, isRounded, isDelete, isHoverable, onDelete, children, ...props }) => {
+const Tag = ({ className, color, size, isLight, isRounded, isDelete, isHoverable, onDelete, children, ...props }) => {
     /**
      * Generates Bulma helper classes and separates out remaining props.
      */
@@ -5453,6 +5581,7 @@ const Tag = ({ className, color, size, isRounded, isDelete, isHoverable, onDelet
     const bulmaClasses = usePrefixedClassNames('tag', {
         [`is-${color}`]: color && validTagColors.includes(color),
         [`is-${size}`]: size && size !== 'normal' && validTagSizes.includes(size),
+        'is-light': isLight,
         'is-rounded': isRounded,
         'is-delete': isDelete,
         'is-hoverable': isHoverable,
@@ -5507,8 +5636,11 @@ const Title = ({ className, size, isSpaced, as = 'h1', hasSkeleton, textColor, b
     });
     // Validate 'as' prop at runtime
     const element = validTitleElements.includes(as) ? as : 'h1';
-    // Validate 'size' prop at runtime
-    const validSize = size && validTitleSizes.includes(size) ? size : undefined;
+    // Validate 'size' prop at runtime (numeric sizes normalize to strings)
+    const normalized = size == null ? undefined : String(size);
+    const validSize = normalized && validTitleSizes.includes(normalized)
+        ? normalized
+        : undefined;
     const bulmaClasses = usePrefixedClassNames('title', {
         [`is-${validSize}`]: validSize,
         'is-spaced': isSpaced,
@@ -5991,7 +6123,7 @@ const Checkboxes = withSubComponents(CheckboxesComponent, { Checkbox }, 'Checkbo
  */
 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) => {
+label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, color, size, isBoxed, isFullwidth, isFullWidth, isRight, isCentered, hasName, buttonLabel, iconLeft, iconRight, className, inputClassName, fileName, ...props }, ref) => {
     const insideField = useInsideField();
     const { controlId, fieldLabelProps } = useAutoLabelId({
         label,
@@ -6020,7 +6152,7 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
         [`is-${color}`]: !!color,
         [`is-${size}`]: !!size,
         'is-boxed': isBoxed,
-        'is-fullwidth': isFullwidth,
+        'is-fullwidth': isFullwidth ?? isFullWidth,
         'has-name': hasName,
     });
     const fileClass = classNames(mainClass, bulmaHelperClasses, alignmentClass, className);
@@ -6861,6 +6993,8 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
     return (jsxs(Fragment, { children: [numberinputElement, messageEl] }));
 });
 Numberinput.displayName = 'Numberinput';
+/** @deprecated Use `Numberinput` — same component. */
+const NumberInput = Numberinput;
 
 /**
  * Default star icon component.
@@ -7688,6 +7822,8 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
     return (jsxs(Fragment, { children: [taginputElement, messageEl] }));
 });
 Taginput.displayName = 'Taginput';
+/** @deprecated Use `Taginput` — same component. */
+const TagInput = Taginput;
 
 /**
  * Bulma Input component with full Bulma helper class support.
@@ -7728,7 +7864,7 @@ InputBase.displayName = 'InputBase';
  * @returns {JSX.Element} The rendered select element.
  * @see {@link https://bulma.io/documentation/form/select/ | Bulma Select documentation}
  */
-const SelectBase = forwardRef(({ color, size, isRounded, isLoading, isActive, isHovered, isFocused, isFullwidth, className, disabled, children, multiple, multipleSize, ...props }, ref) => {
+const SelectBase = forwardRef(({ color, size, isRounded, isLoading, isActive, isHovered, isFocused, isFullwidth, isFullWidth, className, disabled, children, multiple, multipleSize, ...props }, ref) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color,
         ...props,
@@ -7741,7 +7877,7 @@ const SelectBase = forwardRef(({ color, size, isRounded, isLoading, isActive, is
         'is-loading': isLoading,
         'is-active': isActive,
         'is-multiple': !!multiple,
-        'is-fullwidth': isFullwidth,
+        'is-fullwidth': isFullwidth ?? isFullWidth,
     });
     const selectClass = classNames(mainClass, bulmaHelperClasses, className);
     // is-hovered / is-focused belong on the inner <select> element, not the wrapper.
@@ -11114,6 +11250,12 @@ const bulmaCssVars = [
     // scheme
     '--bulma-scheme-h',
     '--bulma-scheme-s',
+    '--bulma-scheme-main',
+    '--bulma-scheme-main-bis',
+    '--bulma-scheme-main-ter',
+    '--bulma-scheme-invert',
+    '--bulma-scheme-invert-bis',
+    '--bulma-scheme-invert-ter',
     '--bulma-light-l',
     '--bulma-light-invert-l',
     '--bulma-dark-l',
@@ -11797,8 +11939,8 @@ const Theme = ({ bulmaVars = {}, children, className, isRoot = false, colorMode,
  * @returns {JSX.Element} The rendered container.
  * @see {@link https://bulma.io/documentation/layout/container/ | Bulma Container documentation}
  */
-const Container = ({ className, textColor, color, bgColor, fluid, widescreen, fullhd, breakpoint, isMax, children, ...props }) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses({
+const Container = ({ className, textColor, color, bgColor, fluid, widescreen, fullhd, breakpoint, isMax, children, style, ...props }) => {
+    const { bulmaHelperClasses, bulmaHelperStyles, rest } = useBulmaClasses({
         color: textColor ?? color,
         backgroundColor: bgColor,
         ...props,
@@ -11826,7 +11968,7 @@ const Container = ({ className, textColor, color, bgColor, fluid, widescreen, fu
     });
     const prefixedBreakpointClass = usePrefixedClassNames(breakpointClass || '');
     const containerClasses = classNames(mainClass, containerModifiers, prefixedBreakpointClass, className, bulmaHelperClasses);
-    return (jsx("div", { className: containerClasses, ...rest, children: children }));
+    return (jsx("div", { className: containerClasses, style: mergeBulmaStyles(bulmaHelperStyles, style), ...rest, children: children }));
 };
 
 /**
@@ -11842,8 +11984,8 @@ const Container = ({ className, textColor, color, bgColor, fluid, widescreen, fu
  *   <div className="content has-text-centered">...</div>
  * </Footer>
  */
-const Footer = ({ as = 'footer', className, children, color, bgColor, textColor, ...props }) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses({
+const Footer = ({ as = 'footer', className, children, color, bgColor, textColor, style, ...props }) => {
+    const { bulmaHelperClasses, bulmaHelperStyles, rest } = useBulmaClasses({
         color: textColor ?? color,
         backgroundColor: bgColor,
         ...props,
@@ -11851,7 +11993,7 @@ const Footer = ({ as = 'footer', className, children, color, bgColor, textColor,
     const Tag = as;
     const mainClass = usePrefixedClassNames('footer');
     const footerClasses = classNames(mainClass, bulmaHelperClasses, className);
-    return (jsx(Tag, { className: footerClasses, ...rest, children: children }));
+    return (jsx(Tag, { className: footerClasses, style: mergeBulmaStyles(bulmaHelperStyles, style), ...rest, children: children }));
 };
 
 /**
@@ -11862,9 +12004,9 @@ const Footer = ({ as = 'footer', className, children, color, bgColor, textColor,
  * @returns {JSX.Element} The rendered hero.
  * @see {@link https://bulma.io/documentation/layout/hero/ | Bulma Hero documentation}
  */
-const HeroComponent = ({ className, color, size, bgColor, fullheightWithNavbar, children, ...props }) => {
+const HeroComponent = ({ className, color, size, bgColor, fullheightWithNavbar, children, style, ...props }) => {
     warnUnstyledColor('Hero', color, ['inherit', 'current']);
-    const { bulmaHelperClasses, rest } = useBulmaClasses({
+    const { bulmaHelperClasses, bulmaHelperStyles, rest } = useBulmaClasses({
         backgroundColor: bgColor,
         ...props,
     });
@@ -11874,7 +12016,7 @@ const HeroComponent = ({ className, color, size, bgColor, fullheightWithNavbar,
         'is-fullheight-with-navbar': fullheightWithNavbar || size === 'fullheight-with-navbar',
     });
     const heroClasses = classNames(mainClass, bulmaHelperClasses, className);
-    return (jsx("section", { className: heroClasses, ...rest, children: children }));
+    return (jsx("section", { className: heroClasses, style: mergeBulmaStyles(bulmaHelperStyles, style), ...rest, children: children }));
 };
 /**
  * Top bar for navigation or branding.
@@ -11883,15 +12025,15 @@ const HeroComponent = ({ className, color, size, bgColor, fullheightWithNavbar,
  * @param {HeroHeadProps} props - Props for the HeroHead component.
  * @returns {JSX.Element} The rendered hero head.
  */
-const HeroHead = ({ className, children, color, bgColor, textColor, ...props }) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses({
+const HeroHead = ({ className, children, color, bgColor, textColor, style, ...props }) => {
+    const { bulmaHelperClasses, bulmaHelperStyles, rest } = useBulmaClasses({
         color: textColor ?? color,
         backgroundColor: bgColor,
         ...props,
     });
     const mainClass = usePrefixedClassNames('hero-head');
     const heroHeadClasses = classNames(mainClass, bulmaHelperClasses, className);
-    return (jsx("div", { className: heroHeadClasses, ...rest, children: children }));
+    return (jsx("div", { className: heroHeadClasses, style: mergeBulmaStyles(bulmaHelperStyles, style), ...rest, children: children }));
 };
 /**
  * Main content area, vertically centered by default.
@@ -11900,15 +12042,15 @@ const HeroHead = ({ className, children, color, bgColor, textColor, ...props })
  * @param {HeroBodyProps} props - Props for the HeroBody component.
  * @returns {JSX.Element} The rendered hero body.
  */
-const HeroBody = ({ className, children, color, bgColor, textColor, ...props }) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses({
+const HeroBody = ({ className, children, color, bgColor, textColor, style, ...props }) => {
+    const { bulmaHelperClasses, bulmaHelperStyles, rest } = useBulmaClasses({
         color: textColor ?? color,
         backgroundColor: bgColor,
         ...props,
     });
     const mainClass = usePrefixedClassNames('hero-body');
     const heroBodyClasses = classNames(mainClass, bulmaHelperClasses, className);
-    return (jsx("div", { className: heroBodyClasses, ...rest, children: children }));
+    return (jsx("div", { className: heroBodyClasses, style: mergeBulmaStyles(bulmaHelperStyles, style), ...rest, children: children }));
 };
 /**
  * Bottom bar for tabs or actions.
@@ -11917,15 +12059,15 @@ const HeroBody = ({ className, children, color, bgColor, textColor, ...props })
  * @param {HeroFootProps} props - Props for the HeroFoot component.
  * @returns {JSX.Element} The rendered hero foot.
  */
-const HeroFoot = ({ className, children, color, bgColor, textColor, ...props }) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses({
+const HeroFoot = ({ className, children, color, bgColor, textColor, style, ...props }) => {
+    const { bulmaHelperClasses, bulmaHelperStyles, rest } = useBulmaClasses({
         color: textColor ?? color,
         backgroundColor: bgColor,
         ...props,
     });
     const mainClass = usePrefixedClassNames('hero-foot');
     const heroFootClasses = classNames(mainClass, bulmaHelperClasses, className);
-    return (jsx("div", { className: heroFootClasses, ...rest, children: children }));
+    return (jsx("div", { className: heroFootClasses, style: mergeBulmaStyles(bulmaHelperStyles, style), ...rest, children: children }));
 };
 // Attach subcomponents
 const Hero = withSubComponents(HeroComponent, {
@@ -12104,8 +12246,8 @@ const Media = withSubComponents(MediaComponent, {
  * @returns {JSX.Element} The rendered section.
  * @see {@link https://bulma.io/documentation/layout/section/ | Bulma Section documentation}
  */
-const Section = ({ size, className, children, color, bgColor, textColor, ...props }) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses({
+const Section = ({ size, className, children, color, bgColor, textColor, style, ...props }) => {
+    const { bulmaHelperClasses, bulmaHelperStyles, rest } = useBulmaClasses({
         color: textColor ?? color,
         backgroundColor: bgColor,
         ...props,
@@ -12115,8 +12257,8 @@ const Section = ({ size, className, children, color, bgColor, textColor, ...prop
         [`is-${size}`]: size,
     });
     const sectionClasses = classNames(mainClass, sectionModifiers, className, bulmaHelperClasses);
-    return (jsx("section", { className: sectionClasses, ...rest, children: children }));
+    return (jsx("section", { className: sectionClasses, style: mergeBulmaStyles(bulmaHelperStyles, style), ...rest, children: children }));
 };
 
-export { Autocomplete, Avatar, Avatars, Badge, Block, Box, Breadcrumb, Button, Buttons, Card, Carousel, CarouselItem, Cell, Checkbox, Checkboxes, Code, Collapse, Column, Columns, ConfigProvider, Container, Content, Control, DateInput, DateInputBase, DateTimeInput, DateTimeInputBase, Delete, Dialog, DialogContainer, Divider, Dropdown, DropdownDivider, DropdownItem, Emphasis, Field, FieldBody, FieldLabel, Figure, File, Footer, Grid, Hero, HeroBody, HeroFoot, HeroHead, Icon, IconText, Image, Input, InputBase, Level, LevelItem, LevelLeft, LevelRight, Link, LinkButton, ListItem, Loading, Media, MediaContent, MediaLeft, MediaRight, Menu, MenuItem, MenuLabel, MenuList, Message, Modal, Navbar, NavbarBrand, NavbarBurger, NavbarDivider, NavbarDropdown, NavbarDropdownMenu, NavbarEnd, NavbarItem, NavbarLink, NavbarMenu, NavbarStart, Notification, NotificationContainer, Numberinput, OrderedList, Pagination, PaginationEllipsis, PaginationLink, PaginationList, PaginationNext, PaginationPrevious, Panel, PanelBlock, PanelButtonBlock, PanelCheckboxBlock, PanelHeading, PanelIcon, PanelInputBlock, PanelTabs, Paragraph, Pre, Progress, Radio, Radios, Rate, Reveal, Section, Select, SelectBase, Sidebar, Skeleton, Slider, Span, Step, Steps, Strong, SubTitle, Switch, Tab, TabContentItem, TabItem, TabList, Table, Tabs, TabsContent, Tag, Taginput, Tags, Tbody, Td, TextArea, TextAreaBase, Tfoot, Th, Thead, Theme, TimeInput, TimeInputBase, Title, Toast, ToastContainer, Tooltip, Tr, UnorderedList, __test_exports__, checkboxColors, checkboxSizes, classNames, createPrefixedClassNames, dialog, isBrowser$1 as isBrowser, notification, prefixedClassNames, radioColors, radioSizes, switchColors, switchSizes, toast, useBulmaClasses, useClassPrefix, useColorClasses, useConfig, useFlexboxClasses, useIconLibrary, useInsideControl, useInsideField, useOtherClasses, usePrefixedClass, usePrefixedClassNames, useSpacingClasses, useTypographyClasses, useVisibilityClasses, validAlignContents, validAlignItems, validAlignSelfs, validAlignments$1 as validAlignments, validColorShades, validColors, validDisplays, validFlexDirections, validFlexGrowShrink, validFlexWraps, validFontFamilies, validJustifyContents, validSizes$1 as validSizes, validTableColors, validTextSizes, validTextTransforms, validTextWeights, validViewports, validVisibilities };
+export { Autocomplete, Avatar, Avatars, Badge, Block, Box, Breadcrumb, Button, Buttons, Card, Carousel, CarouselItem, Cell, Checkbox, Checkboxes, Code, Collapse, Column, Columns, ConfigProvider, Container, Content, Control, DateInput, DateInputBase, DateTimeInput, DateTimeInputBase, Delete, Dialog, DialogContainer, Divider, Dropdown, DropdownDivider, DropdownItem, Emphasis, Field, FieldBody, FieldLabel, Figure, File, Footer, Grid, Hero, HeroBody, HeroFoot, HeroHead, Icon, IconText, Image, Input, InputBase, Level, LevelItem, LevelLeft, LevelRight, Link, LinkButton, ListItem, Loading, Media, MediaContent, MediaLeft, MediaRight, Menu, MenuItem, MenuLabel, MenuList, Message, Modal, Navbar, NavbarBrand, NavbarBurger, NavbarDivider, NavbarDropdown, NavbarDropdownMenu, NavbarEnd, NavbarItem, NavbarLink, NavbarMenu, NavbarStart, Notification, NotificationContainer, NumberInput, Numberinput, OrderedList, Pagination, PaginationEllipsis, PaginationLink, PaginationList, PaginationNext, PaginationPrevious, Panel, PanelBlock, PanelButtonBlock, PanelCheckboxBlock, PanelHeading, PanelIcon, PanelInputBlock, PanelTabs, Paragraph, Pre, Progress, Radio, Radios, Rate, Reveal, Section, Select, SelectBase, Sidebar, Skeleton, Slider, Span, Step, Steps, Strong, SubTitle, Switch, Tab, TabContentItem, TabItem, TabList, Table, Tabs, TabsContent, Tag, TagInput, Taginput, Tags, Tbody, Td, TextArea, TextAreaBase, Tfoot, Th, Thead, Theme, TimeInput, TimeInputBase, Title, Toast, ToastContainer, Tooltip, Tr, UnorderedList, __test_exports__, checkboxColors, checkboxSizes, classNames, createPrefixedClassNames, dialog, isBrowser$1 as isBrowser, mergeBulmaStyles, notification, prefixedClassNames, radioColors, radioSizes, switchColors, switchSizes, toast, useBulmaClasses, useClassPrefix, useColorClasses, useColorStyles, useConfig, useFlexboxClasses, useIconLibrary, useInsideControl, useInsideField, useOtherClasses, usePrefixedClass, usePrefixedClassNames, useSpacingClasses, useTypographyClasses, useVisibilityClasses, validAlignContents, validAlignItems, validAlignSelfs, validAlignments$1 as validAlignments, validColorShades, validColors, validDisplays, validFlexDirections, validFlexGrowShrink, validFlexWraps, validFontFamilies, validJustifyContents, validSchemeColors, validSizes$1 as validSizes, validTableColors, validTextSizes, validTextTransforms, validTextWeights, validViewports, validVisibilities };
 //# sourceMappingURL=index.esm.js.map