@allxsmith/bestax-bulma 5.24.0 → 5.26.0

package/dist/types/columns/Columns.d.ts

@@ -10,7 +10,7 @@ export type BulmaGapSize = BulmaGapValue;
 /**
  * Props for the Columns component.
  */
-export interface ColumnsProps extends React.HTMLAttributes<HTMLDivElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+export interface ColumnsProps extends React.HTMLAttributes<HTMLDivElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'columnGap' | 'rowGap'> {
     /** Additional CSS classes for the columns container. */
     className?: string;
     /** Text color. */
@@ -31,7 +31,15 @@ export interface ColumnsProps extends React.HTMLAttributes<HTMLDivElement>, Omit
     isMobile?: boolean;
     /** Apply columns layout on desktop and up. */
     isDesktop?: boolean;
-    /** Gap size for all breakpoints. Same scale as `Grid`'s `gap` prop; wins over `gapSize` if both are set. */
+    /**
+     * Gap size for all breakpoints, the columns gutter (`is-<value>`). Whole
+     * steps of the same scale as `Grid`'s `gap` prop; wins over `gapSize` if
+     * both are set.
+     *
+     * This is not the `gap` helper prop other components take, which renders
+     * `is-gap-<value>`: on `Columns` the gutter is padding inside each column,
+     * so the helper's CSS `gap` would add to it rather than replace it.
+     */
     gap?: BulmaGapValue;
     /** Gap size for mobile. Wins over `gapSizeMobile` if both are set. */
     gapMobile?: BulmaGapValue;

package/dist/types/grid/Grid.d.ts

@@ -1,8 +1,12 @@
 import React from 'react';
 import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses.js';
+import type { BulmaGapStep } from '../helpers/bulmaClassHelpers.js';
 /**
- * Allowed gap values for Bulma's 0-8 spacing scale, shared by `Grid` and
- * `Columns`. Accepts the value as a number or a numeric string.
+ * The whole steps of Bulma's 0-8 gap scale, as `Columns` takes them. Accepts
+ * the value as a number or a numeric string.
+ *
+ * `Grid`'s gap props and the shared `gap`, `columnGap` and `rowGap` helper
+ * props take the half steps as well, as `BulmaGapStep`.
  */
 export type BulmaGapValue = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8';
 /**
@@ -23,12 +27,16 @@ export type BulmaFixedGridColsProp = BulmaFixedGridCols | 'auto';
 export interface GridProps extends React.HTMLAttributes<HTMLDivElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
     /** Use a fixed grid layout (`.fixed-grid > .grid`). */
     isFixed?: boolean;
-    /** Main gap for grid (Bulma `is-gap-X`). */
-    gap?: BulmaGapValue;
-    /** Column gap for grid (`is-column-gap-X`). */
-    columnGap?: BulmaGapValue;
-    /** Row gap for grid (`is-row-gap-X`). */
-    rowGap?: BulmaGapValue;
+    /**
+     * Main gap for grid (Bulma `is-gap-X`), a whole or half step of Bulma's gap
+     * scale. The same values and class as the `gap` helper prop on every other
+     * component.
+     */
+    gap?: BulmaGapStep;
+    /** Column gap for grid (`is-column-gap-X`), on the same scale as `gap`. */
+    columnGap?: BulmaGapStep;
+    /** Row gap for grid (`is-row-gap-X`), on the same scale as `gap`. */
+    rowGap?: BulmaGapStep;
     /** Minimum column width for the grid (`is-col-min-X`). */
     minCol?: BulmaMinColValue;
     /** For fixed grids: explicit column count (`has-X-cols`), or `'auto'` for auto-count. */

package/dist/types/helpers/Theme.d.ts

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
 import { BulmaClassesProps } from './useBulmaClasses.js';
-import { validRadii } from './bulmaClassHelpers.js';
+import { validRadii, type BulmaGapStep } from './bulmaClassHelpers.js';
 declare const bulmaCssVars: readonly ["--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", "--bulma-dark-invert-l", "--bulma-soft-l", "--bulma-bold-l", "--bulma-soft-invert-l", "--bulma-bold-invert-l", "--bulma-hover-background-l-delta", "--bulma-active-background-l-delta", "--bulma-hover-border-l-delta", "--bulma-active-border-l-delta", "--bulma-hover-color-l-delta", "--bulma-active-color-l-delta", "--bulma-hover-shadow-a-delta", "--bulma-active-shadow-a-delta", "--bulma-primary-h", "--bulma-primary-s", "--bulma-primary-l", "--bulma-link-h", "--bulma-link-s", "--bulma-link-l", "--bulma-info-h", "--bulma-info-s", "--bulma-info-l", "--bulma-success-h", "--bulma-success-s", "--bulma-success-l", "--bulma-warning-h", "--bulma-warning-s", "--bulma-warning-l", "--bulma-danger-h", "--bulma-danger-s", "--bulma-danger-l", "--bulma-shadow-h", "--bulma-shadow-s", "--bulma-shadow-l", "--bulma-shadow", "--bulma-family-primary", "--bulma-family-secondary", "--bulma-family-code", "--bulma-size-small", "--bulma-size-normal", "--bulma-size-medium", "--bulma-size-large", "--bulma-weight-light", "--bulma-weight-normal", "--bulma-weight-medium", "--bulma-weight-semibold", "--bulma-weight-bold", "--bulma-weight-extrabold", "--bulma-block-spacing", "--bulma-duration", "--bulma-easing", "--bulma-radius-small", "--bulma-radius", "--bulma-radius-medium", "--bulma-radius-large", "--bulma-radius-rounded", "--bulma-speed", "--bulma-arrow-color", "--bulma-loading-color", "--bulma-burger-h", "--bulma-burger-s", "--bulma-burger-l", "--bulma-burger-border-radius", "--bulma-burger-gap", "--bulma-burger-item-height", "--bulma-burger-item-width", "--bulma-body-background-color", "--bulma-body-size", "--bulma-body-min-width", "--bulma-body-rendering", "--bulma-body-family", "--bulma-body-overflow-x", "--bulma-body-overflow-y", "--bulma-body-color", "--bulma-body-font-size", "--bulma-body-weight", "--bulma-body-line-height", "--bulma-code-family", "--bulma-code-padding", "--bulma-code-weight", "--bulma-code-size", "--bulma-small-font-size", "--bulma-hr-background-color", "--bulma-hr-height", "--bulma-hr-margin", "--bulma-strong-color", "--bulma-strong-weight", "--bulma-pre-font-size", "--bulma-pre-padding", "--bulma-pre-code-font-size", "--bulma-skeleton-background", "--bulma-skeleton-radius", "--bulma-skeleton-block-min-height", "--bulma-skeleton-lines-gap", "--bulma-skeleton-line-height", "--bulma-breadcrumb-item-color", "--bulma-breadcrumb-item-hover-color", "--bulma-breadcrumb-item-active-color", "--bulma-breadcrumb-item-padding-vertical", "--bulma-breadcrumb-item-padding-horizontal", "--bulma-breadcrumb-item-separator-color", "--bulma-card-color", "--bulma-card-background-color", "--bulma-card-shadow", "--bulma-card-radius", "--bulma-card-header-background-color", "--bulma-card-header-color", "--bulma-card-header-padding", "--bulma-card-header-shadow", "--bulma-card-header-weight", "--bulma-card-content-background-color", "--bulma-card-content-padding", "--bulma-card-footer-background-color", "--bulma-card-footer-border-top", "--bulma-card-footer-padding", "--bulma-card-media-margin", "--bulma-dropdown-menu-min-width", "--bulma-dropdown-content-background-color", "--bulma-dropdown-content-offset", "--bulma-dropdown-content-padding-bottom", "--bulma-dropdown-content-padding-top", "--bulma-dropdown-content-radius", "--bulma-dropdown-content-shadow", "--bulma-dropdown-content-z", "--bulma-dropdown-item-h", "--bulma-dropdown-item-s", "--bulma-dropdown-item-l", "--bulma-dropdown-item-background-l", "--bulma-dropdown-item-background-l-delta", "--bulma-dropdown-item-hover-background-l-delta", "--bulma-dropdown-item-active-background-l-delta", "--bulma-dropdown-item-color-l", "--bulma-dropdown-item-selected-h", "--bulma-dropdown-item-selected-s", "--bulma-dropdown-item-selected-l", "--bulma-dropdown-item-selected-background-l", "--bulma-dropdown-item-selected-color-l", "--bulma-dropdown-divider-background-color", "--bulma-menu-item-h", "--bulma-menu-item-s", "--bulma-menu-item-l", "--bulma-menu-item-background-l", "--bulma-menu-item-background-l-delta", "--bulma-menu-item-hover-background-l-delta", "--bulma-menu-item-active-background-l-delta", "--bulma-menu-item-color-l", "--bulma-menu-item-radius", "--bulma-menu-item-selected-h", "--bulma-menu-item-selected-s", "--bulma-menu-item-selected-l", "--bulma-menu-item-selected-background-l", "--bulma-menu-item-selected-color-l", "--bulma-menu-list-border-left", "--bulma-menu-list-line-height", "--bulma-menu-list-link-padding", "--bulma-menu-nested-list-margin", "--bulma-menu-nested-list-padding-left", "--bulma-menu-label-color", "--bulma-menu-label-font-size", "--bulma-menu-label-letter-spacing", "--bulma-menu-label-spacing", "--bulma-message-h", "--bulma-message-s", "--bulma-message-background-l", "--bulma-message-border-l", "--bulma-message-border-l-delta", "--bulma-message-border-style", "--bulma-message-border-width", "--bulma-message-color-l", "--bulma-message-radius", "--bulma-message-header-weight", "--bulma-message-header-padding", "--bulma-message-header-radius", "--bulma-message-header-body-border-width", "--bulma-message-header-background-l", "--bulma-message-header-color-l", "--bulma-message-body-border-width", "--bulma-message-body-color", "--bulma-message-body-padding", "--bulma-message-body-radius", "--bulma-message-body-pre-code-background-color", "--bulma-modal-z", "--bulma-modal-background-background-color", "--bulma-modal-content-width", "--bulma-modal-content-margin-mobile", "--bulma-modal-content-spacing-mobile", "--bulma-modal-content-spacing-tablet", "--bulma-modal-close-dimensions", "--bulma-modal-close-right", "--bulma-modal-close-top", "--bulma-modal-card-spacing", "--bulma-modal-card-head-background-color", "--bulma-modal-card-head-padding", "--bulma-modal-card-head-radius", "--bulma-modal-card-title-color", "--bulma-modal-card-title-line-height", "--bulma-modal-card-title-size", "--bulma-modal-card-foot-background-color", "--bulma-modal-card-foot-radius", "--bulma-modal-card-body-background-color", "--bulma-modal-card-body-padding", "--bulma-navbar-h", "--bulma-navbar-s", "--bulma-navbar-l", "--bulma-navbar-background-color", "--bulma-navbar-box-shadow-size", "--bulma-navbar-box-shadow-color", "--bulma-navbar-padding-vertical", "--bulma-navbar-padding-horizontal", "--bulma-navbar-z", "--bulma-navbar-fixed-z", "--bulma-navbar-item-background-a", "--bulma-navbar-item-background-l", "--bulma-navbar-item-background-l-delta", "--bulma-navbar-item-hover-background-l-delta", "--bulma-navbar-item-active-background-l-delta", "--bulma-navbar-item-color-l", "--bulma-navbar-item-selected-h", "--bulma-navbar-item-selected-s", "--bulma-navbar-item-selected-l", "--bulma-navbar-item-selected-background-l", "--bulma-navbar-item-selected-color-l", "--bulma-navbar-item-img-max-height", "--bulma-navbar-burger-color", "--bulma-navbar-tab-hover-background-color", "--bulma-navbar-tab-hover-border-bottom-color", "--bulma-navbar-tab-active-color", "--bulma-navbar-tab-active-background-color", "--bulma-navbar-tab-active-border-bottom-color", "--bulma-navbar-tab-active-border-bottom-style", "--bulma-navbar-tab-active-border-bottom-width", "--bulma-navbar-dropdown-background-color", "--bulma-navbar-dropdown-border-l", "--bulma-navbar-dropdown-border-color", "--bulma-navbar-dropdown-border-style", "--bulma-navbar-dropdown-border-width", "--bulma-navbar-dropdown-offset", "--bulma-navbar-dropdown-arrow", "--bulma-navbar-dropdown-radius", "--bulma-navbar-dropdown-z", "--bulma-navbar-dropdown-boxed-radius", "--bulma-navbar-dropdown-boxed-shadow", "--bulma-navbar-dropdown-item-h", "--bulma-navbar-dropdown-item-s", "--bulma-navbar-dropdown-item-l", "--bulma-navbar-dropdown-item-background-l", "--bulma-navbar-dropdown-item-color-l", "--bulma-navbar-divider-background-l", "--bulma-navbar-divider-height", "--bulma-navbar-bottom-box-shadow-size", "--bulma-pagination-margin", "--bulma-pagination-min-width", "--bulma-pagination-item-h", "--bulma-pagination-item-s", "--bulma-pagination-item-l", "--bulma-pagination-item-background-l-delta", "--bulma-pagination-item-hover-background-l-delta", "--bulma-pagination-item-active-background-l-delta", "--bulma-pagination-item-border-style", "--bulma-pagination-item-border-width", "--bulma-pagination-item-border-l", "--bulma-pagination-item-border-l-delta", "--bulma-pagination-item-hover-border-l-delta", "--bulma-pagination-item-active-border-l-delta", "--bulma-pagination-item-focus-border-l-delta", "--bulma-pagination-item-color-l", "--bulma-pagination-item-font-size", "--bulma-pagination-item-margin", "--bulma-pagination-item-padding-left", "--bulma-pagination-item-padding-right", "--bulma-pagination-item-outer-shadow-h", "--bulma-pagination-item-outer-shadow-s", "--bulma-pagination-item-outer-shadow-l", "--bulma-pagination-item-outer-shadow-a", "--bulma-pagination-nav-padding-left", "--bulma-pagination-nav-padding-right", "--bulma-pagination-disabled-color", "--bulma-pagination-disabled-background-color", "--bulma-pagination-disabled-border-color", "--bulma-pagination-current-color", "--bulma-pagination-current-background-color", "--bulma-pagination-current-border-color", "--bulma-pagination-ellipsis-color", "--bulma-pagination-shadow-inset", "--bulma-pagination-selected-item-h", "--bulma-pagination-selected-item-s", "--bulma-pagination-selected-item-l", "--bulma-pagination-selected-item-background-l", "--bulma-pagination-selected-item-border-l", "--bulma-pagination-selected-item-color-l", "--bulma-panel-margin", "--bulma-panel-item-border", "--bulma-panel-radius", "--bulma-panel-shadow", "--bulma-panel-heading-line-height", "--bulma-panel-heading-padding", "--bulma-panel-heading-radius", "--bulma-panel-heading-size", "--bulma-panel-heading-weight", "--bulma-panel-tabs-font-size", "--bulma-panel-tab-border-bottom-color", "--bulma-panel-tab-border-bottom-style", "--bulma-panel-tab-border-bottom-width", "--bulma-panel-tab-active-color", "--bulma-panel-list-item-color", "--bulma-panel-list-item-hover-color", "--bulma-panel-block-color", "--bulma-panel-block-hover-background-color", "--bulma-panel-block-active-border-left-color", "--bulma-panel-block-active-color", "--bulma-panel-block-active-icon-color", "--bulma-panel-icon-color", "--bulma-tabs-border-bottom-color", "--bulma-tabs-border-bottom-style", "--bulma-tabs-border-bottom-width", "--bulma-tabs-link-color", "--bulma-tabs-link-hover-border-bottom-color", "--bulma-tabs-link-hover-color", "--bulma-tabs-link-active-border-bottom-color", "--bulma-tabs-link-active-color", "--bulma-tabs-link-padding", "--bulma-tabs-boxed-link-radius", "--bulma-tabs-boxed-link-hover-background-color", "--bulma-tabs-boxed-link-hover-border-bottom-color", "--bulma-tabs-boxed-link-active-background-color", "--bulma-tabs-boxed-link-active-border-color", "--bulma-tabs-boxed-link-active-border-bottom-color", "--bulma-tabs-toggle-link-border-color", "--bulma-tabs-toggle-link-border-style", "--bulma-tabs-toggle-link-border-width", "--bulma-tabs-toggle-link-hover-background-color", "--bulma-tabs-toggle-link-hover-border-color", "--bulma-tabs-toggle-link-radius", "--bulma-tabs-toggle-link-active-background-color", "--bulma-tabs-toggle-link-active-border-color", "--bulma-tabs-toggle-link-active-color", "--bulma-box-background-color", "--bulma-box-color", "--bulma-box-radius", "--bulma-box-shadow", "--bulma-box-padding", "--bulma-box-link-hover-shadow", "--bulma-box-link-active-shadow", "--bulma-content-heading-color", "--bulma-content-heading-weight", "--bulma-content-heading-line-height", "--bulma-content-block-margin-bottom", "--bulma-content-blockquote-background-color", "--bulma-content-blockquote-border-left", "--bulma-content-blockquote-padding", "--bulma-content-pre-padding", "--bulma-content-table-cell-border", "--bulma-content-table-cell-border-width", "--bulma-content-table-cell-padding", "--bulma-content-table-cell-heading-color", "--bulma-content-table-head-cell-border-width", "--bulma-content-table-head-cell-color", "--bulma-content-table-body-last-row-cell-border-bottom-width", "--bulma-content-table-foot-cell-border-width", "--bulma-content-table-foot-cell-color", "--bulma-delete-dimensions", "--bulma-delete-background-l", "--bulma-delete-background-alpha", "--bulma-delete-color", "--bulma-icon-dimensions", "--bulma-icon-dimensions-small", "--bulma-icon-dimensions-medium", "--bulma-icon-dimensions-large", "--bulma-icon-text-spacing", "--bulma-notification-h", "--bulma-notification-s", "--bulma-notification-background-l", "--bulma-notification-color-l", "--bulma-notification-code-background-color", "--bulma-notification-radius", "--bulma-notification-padding", "--bulma-progress-border-radius", "--bulma-progress-bar-background-color", "--bulma-progress-value-background-color", "--bulma-progress-indeterminate-duration", "--bulma-table-color", "--bulma-table-background-color", "--bulma-table-cell-border-color", "--bulma-table-cell-border-style", "--bulma-table-cell-border-width", "--bulma-table-cell-padding", "--bulma-table-cell-heading-color", "--bulma-table-cell-text-align", "--bulma-table-head-cell-border-width", "--bulma-table-head-cell-color", "--bulma-table-foot-cell-border-width", "--bulma-table-foot-cell-color", "--bulma-table-head-background-color", "--bulma-table-body-background-color", "--bulma-table-foot-background-color", "--bulma-table-row-hover-background-color", "--bulma-table-row-active-background-color", "--bulma-table-row-active-color", "--bulma-table-striped-row-even-background-color", "--bulma-table-striped-row-even-hover-background-color", "--bulma-tag-h", "--bulma-tag-s", "--bulma-tag-background-l", "--bulma-tag-background-l-delta", "--bulma-tag-hover-background-l-delta", "--bulma-tag-active-background-l-delta", "--bulma-tag-color-l", "--bulma-tag-radius", "--bulma-tag-delete-margin", "--bulma-title-color", "--bulma-title-family", "--bulma-title-size", "--bulma-title-weight", "--bulma-title-line-height", "--bulma-title-strong-color", "--bulma-title-strong-weight", "--bulma-title-sub-size", "--bulma-title-sup-size", "--bulma-subtitle-color", "--bulma-subtitle-family", "--bulma-subtitle-size", "--bulma-subtitle-weight", "--bulma-subtitle-line-height", "--bulma-subtitle-strong-color", "--bulma-subtitle-strong-weight", "--bulma-control-radius", "--bulma-control-radius-small", "--bulma-control-border-width", "--bulma-control-height", "--bulma-control-line-height", "--bulma-control-padding-vertical", "--bulma-control-padding-horizontal", "--bulma-control-size", "--bulma-control-focus-shadow-l", "--bulma-file-radius", "--bulma-file-name-border-color", "--bulma-file-name-border-style", "--bulma-file-name-border-width", "--bulma-file-name-max-width", "--bulma-file-h", "--bulma-file-s", "--bulma-file-background-l", "--bulma-file-background-l-delta", "--bulma-file-hover-background-l-delta", "--bulma-file-active-background-l-delta", "--bulma-file-border-l", "--bulma-file-border-l-delta", "--bulma-file-hover-border-l-delta", "--bulma-file-active-border-l-delta", "--bulma-file-cta-color-l", "--bulma-file-name-color-l", "--bulma-file-color-l-delta", "--bulma-file-hover-color-l-delta", "--bulma-file-active-color-l-delta", "--bulma-input-h", "--bulma-input-s", "--bulma-input-l", "--bulma-input-border-style", "--bulma-input-border-l", "--bulma-input-border-l-delta", "--bulma-input-hover-border-l-delta", "--bulma-input-active-border-l-delta", "--bulma-input-focus-h", "--bulma-input-focus-s", "--bulma-input-focus-l", "--bulma-input-focus-shadow-size", "--bulma-input-focus-shadow-alpha", "--bulma-input-color-l", "--bulma-input-background-l", "--bulma-input-background-l-delta", "--bulma-input-height", "--bulma-input-shadow", "--bulma-input-placeholder-color", "--bulma-input-disabled-color", "--bulma-input-disabled-background-color", "--bulma-input-disabled-border-color", "--bulma-input-disabled-placeholder-color", "--bulma-input-arrow", "--bulma-input-icon-color", "--bulma-input-icon-hover-color", "--bulma-input-icon-focus-color", "--bulma-input-radius", "--bulma-column-gap", "--bulma-grid-gap", "--bulma-grid-column-count", "--bulma-grid-column-min", "--bulma-grid-cell-column-span", "--bulma-grid-cell-column-start", "--bulma-footer-background-color", "--bulma-footer-color", "--bulma-footer-padding", "--bulma-hero-body-padding", "--bulma-hero-body-padding-tablet", "--bulma-hero-body-padding-small", "--bulma-hero-body-padding-medium", "--bulma-hero-body-padding-large", "--bulma-media-border-color", "--bulma-media-border-size", "--bulma-media-spacing", "--bulma-media-spacing-large", "--bulma-media-content-spacing", "--bulma-media-level-1-spacing", "--bulma-media-level-1-content-spacing", "--bulma-media-level-2-spacing", "--bulma-section-padding", "--bulma-section-padding-desktop", "--bulma-section-padding-medium", "--bulma-section-padding-large"];
 /** A single Bulma CSS variable key from the `bulmaCssVars` tuple. */
 type BulmaVarKey = (typeof bulmaCssVars)[number];
@@ -90,6 +90,22 @@ export interface ThemeProps extends Omit<BulmaClassesProps, 'color' | 'backgroun
      * it is on every other component.
      */
     radius?: (typeof validRadii)[number];
+    /**
+     * Column gap helper, as on every other component: a gap step adds
+     * `is-column-gap-<step>` to the wrapper div, which spaces the wrapper's own
+     * children when it is a flex or grid container. Under `isRoot` there is no
+     * wrapper, so it does nothing, and says so in development.
+     *
+     * It does not set `--bulma-column-gap`, the variable `Columns` reads for
+     * its gutters; set that through `bulmaVars`
+     * (`bulmaVars={{ '--bulma-column-gap': '1rem' }}`). Before `columnGap` was
+     * a helper prop, untyped JavaScript could pass it to Theme as that
+     * variable. A string that is not a gap step (`'1rem'`) still sets it, but
+     * that route is deprecated and logs a warning in development. A gap step
+     * does not: `columnGap="0"` used to zero the gutters inside the Theme, and
+     * now adds `is-column-gap-0` to the wrapper instead.
+     */
+    columnGap?: BulmaGapStep;
     schemeH?: string;
     schemeS?: string;
     lightL?: string;

package/dist/types/helpers/bulmaClassHelpers.d.ts

@@ -22,6 +22,24 @@ export declare const validSchemeColors: readonly ["scheme-main", "scheme-main-bi
  * @example '0', '1', 'auto'
  */
 export declare const validSizes: readonly ["0", "1", "2", "3", "4", "5", "6", "auto"];
+/**
+ * Valid Bulma gap steps, taken by `gap`, `columnGap` and `rowGap`. Each whole
+ * step is 0.5rem, so `2` is 1rem and `8` is 4rem, and the half steps sit
+ * between them. They render `is-gap-<value>`, `is-column-gap-<value>` and
+ * `is-row-gap-<value>`.
+ *
+ * This is a different scale from `validSizes`: `gap="2"` is 1rem where
+ * `m="2"` is 0.5rem.
+ * @example '0', '0.5', '2', '8'
+ */
+export declare const validGaps: readonly ["0", "0.5", "1", "1.5", "2", "2.5", "3", "3.5", "4", "4.5", "5", "5.5", "6", "6.5", "7", "7.5", "8"];
+/**
+ * A gap step as `gap`, `columnGap` and `rowGap` take it: a value from
+ * `validGaps`, or the same step written as a number (`gap={2}`,
+ * `gap={1.5}`). `Grid` took its gaps as numbers before the gap helpers were
+ * shared, so every gap prop still does.
+ */
+export type BulmaGapStep = '0' | '0.5' | '1' | '1.5' | '2' | '2.5' | '3' | '3.5' | '4' | '4.5' | '5' | '5.5' | '6' | '6.5' | '7' | '7.5' | '8' | 0 | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 4.5 | 5 | 5.5 | 6 | 6.5 | 7 | 7.5 | 8;
 /**
  * Valid Bulma text size classes.
  * @example '1', '2', '3'

package/dist/types/helpers/useBulmaClasses.d.ts

@@ -1,5 +1,5 @@
 import { type CSSProperties } from 'react';
-import { BulmaDisplayProps, BulmaViewportProps } from './bulmaClassHelpers.js';
+import { BulmaDisplayProps, BulmaViewportProps, type BulmaGapStep } from './bulmaClassHelpers.js';
 import { BulmaColorProps, BulmaColorPropsWithScheme } from './useColorClasses.js';
 import { BulmaSpacingProps } from './useSpacingClasses.js';
 import { BulmaTypographyProps } from './useTypographyClasses.js';
@@ -50,8 +50,8 @@ export declare const useBulmaClasses: <T extends object>(props: BulmaClassesProp
     bulmaHelperStyles?: CSSProperties;
     rest: Omit<T, keyof BulmaClassesProps>;
 };
-export { validColors, validColorShades, validSchemeColors, validSizes, validTextSizes, validAlignments, validTextTransforms, validTextWeights, validFontFamilies, validDisplays, validVisibilities, validFlexDirections, validFlexWraps, validJustifyContents, validAlignContents, validAlignItems, validAlignSelfs, validFlexGrowShrink, validViewports, validFloats, validOverflows, validAxisOverflows, validInteractions, validCursors, validRadii, validShadows, validResponsives, validPositions, validAspectRatios, } from './bulmaClassHelpers.js';
-export type { BulmaViewportProps, BulmaDisplayProps };
+export { validColors, validColorShades, validSchemeColors, validSizes, validGaps, validTextSizes, validAlignments, validTextTransforms, validTextWeights, validFontFamilies, validDisplays, validVisibilities, validFlexDirections, validFlexWraps, validJustifyContents, validAlignContents, validAlignItems, validAlignSelfs, validFlexGrowShrink, validViewports, validFloats, validOverflows, validAxisOverflows, validInteractions, validCursors, validRadii, validShadows, validResponsives, validPositions, validAspectRatios, } from './bulmaClassHelpers.js';
+export type { BulmaViewportProps, BulmaDisplayProps, BulmaGapStep };
 export * from './useColorClasses.js';
 export * from './useSpacingClasses.js';
 export * from './useTypographyClasses.js';

package/dist/types/helpers/useSpacingClasses.d.ts

@@ -1,6 +1,6 @@
-import { validSizes } from './bulmaClassHelpers.js';
+import { validSizes, type BulmaGapStep } from './bulmaClassHelpers.js';
 /**
- * Props for applying Bulma margin and padding helper classes.
+ * Props for applying Bulma margin, padding and gap helper classes.
  */
 export interface BulmaSpacingProps {
     /** Margin (e.g., '0', '1'). */
@@ -31,9 +31,40 @@ export interface BulmaSpacingProps {
     px?: (typeof validSizes)[number];
     /** Padding vertical (top and bottom). */
     py?: (typeof validSizes)[number];
+    /**
+     * Space between the children of a flex or grid container (`is-gap-<value>`),
+     * on Bulma's gap scale: each whole step is 0.5rem, so `gap="2"` is 1rem, with
+     * half steps such as `"1.5"` between them. Also takes the step as a number.
+     *
+     * It sets the CSS `gap`, which does nothing unless the element lays its
+     * children out as flex or grid, so pair it with `display="flex"` on most
+     * components. The scale is not the margin scale: `m="2"` is 0.5rem.
+     *
+     * `Grid` and `Columns` declare their own `gap`. `Grid`'s renders the same
+     * class; `Columns`' is the columns gutter (`is-<value>`) and takes whole
+     * steps only.
+     */
+    gap?: BulmaGapStep;
+    /**
+     * Space between columns only (`is-column-gap-<value>`), on the same scale as
+     * `gap`. Beside `gap` or `gapless`, it wins on its own axis.
+     */
+    columnGap?: BulmaGapStep;
+    /**
+     * Space between rows only (`is-row-gap-<value>`), on the same scale as
+     * `gap`. Beside `gap` or `gapless`, it wins on its own axis.
+     */
+    rowGap?: BulmaGapStep;
+    /**
+     * Removes the gap between children (`is-gapless`), the shortcut for
+     * `gap="0"`; a valid `gap` wins when both are set. `Columns` is the
+     * exception: its `gap` is its gutter, and there `gapless` is Bulma's gapless
+     * columns modifier, the same as `isGapless`.
+     */
+    gapless?: boolean;
 }
 /**
- * A hook that generates Bulma margin and padding helper classes.
+ * A hook that generates Bulma margin, padding and gap helper classes.
  *
  * @function useSpacingClasses
  * @param props - Spacing-related Bulma helper props.

package/dist/types-cjs/columns/Columns.d.ts

@@ -10,7 +10,7 @@ export type BulmaGapSize = BulmaGapValue;
 /**
  * Props for the Columns component.
  */
-export interface ColumnsProps extends React.HTMLAttributes<HTMLDivElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+export interface ColumnsProps extends React.HTMLAttributes<HTMLDivElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'columnGap' | 'rowGap'> {
     /** Additional CSS classes for the columns container. */
     className?: string;
     /** Text color. */
@@ -31,7 +31,15 @@ export interface ColumnsProps extends React.HTMLAttributes<HTMLDivElement>, Omit
     isMobile?: boolean;
     /** Apply columns layout on desktop and up. */
     isDesktop?: boolean;
-    /** Gap size for all breakpoints. Same scale as `Grid`'s `gap` prop; wins over `gapSize` if both are set. */
+    /**
+     * Gap size for all breakpoints, the columns gutter (`is-<value>`). Whole
+     * steps of the same scale as `Grid`'s `gap` prop; wins over `gapSize` if
+     * both are set.
+     *
+     * This is not the `gap` helper prop other components take, which renders
+     * `is-gap-<value>`: on `Columns` the gutter is padding inside each column,
+     * so the helper's CSS `gap` would add to it rather than replace it.
+     */
     gap?: BulmaGapValue;
     /** Gap size for mobile. Wins over `gapSizeMobile` if both are set. */
     gapMobile?: BulmaGapValue;

package/dist/types-cjs/grid/Grid.d.ts

@@ -1,8 +1,12 @@
 import React from 'react';
 import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses.js';
+import type { BulmaGapStep } from '../helpers/bulmaClassHelpers.js';
 /**
- * Allowed gap values for Bulma's 0-8 spacing scale, shared by `Grid` and
- * `Columns`. Accepts the value as a number or a numeric string.
+ * The whole steps of Bulma's 0-8 gap scale, as `Columns` takes them. Accepts
+ * the value as a number or a numeric string.
+ *
+ * `Grid`'s gap props and the shared `gap`, `columnGap` and `rowGap` helper
+ * props take the half steps as well, as `BulmaGapStep`.
  */
 export type BulmaGapValue = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8';
 /**
@@ -23,12 +27,16 @@ export type BulmaFixedGridColsProp = BulmaFixedGridCols | 'auto';
 export interface GridProps extends React.HTMLAttributes<HTMLDivElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
     /** Use a fixed grid layout (`.fixed-grid > .grid`). */
     isFixed?: boolean;
-    /** Main gap for grid (Bulma `is-gap-X`). */
-    gap?: BulmaGapValue;
-    /** Column gap for grid (`is-column-gap-X`). */
-    columnGap?: BulmaGapValue;
-    /** Row gap for grid (`is-row-gap-X`). */
-    rowGap?: BulmaGapValue;
+    /**
+     * Main gap for grid (Bulma `is-gap-X`), a whole or half step of Bulma's gap
+     * scale. The same values and class as the `gap` helper prop on every other
+     * component.
+     */
+    gap?: BulmaGapStep;
+    /** Column gap for grid (`is-column-gap-X`), on the same scale as `gap`. */
+    columnGap?: BulmaGapStep;
+    /** Row gap for grid (`is-row-gap-X`), on the same scale as `gap`. */
+    rowGap?: BulmaGapStep;
     /** Minimum column width for the grid (`is-col-min-X`). */
     minCol?: BulmaMinColValue;
     /** For fixed grids: explicit column count (`has-X-cols`), or `'auto'` for auto-count. */

package/dist/types-cjs/helpers/Theme.d.ts

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
 import { BulmaClassesProps } from './useBulmaClasses.js';
-import { validRadii } from './bulmaClassHelpers.js';
+import { validRadii, type BulmaGapStep } from './bulmaClassHelpers.js';
 declare const bulmaCssVars: readonly ["--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", "--bulma-dark-invert-l", "--bulma-soft-l", "--bulma-bold-l", "--bulma-soft-invert-l", "--bulma-bold-invert-l", "--bulma-hover-background-l-delta", "--bulma-active-background-l-delta", "--bulma-hover-border-l-delta", "--bulma-active-border-l-delta", "--bulma-hover-color-l-delta", "--bulma-active-color-l-delta", "--bulma-hover-shadow-a-delta", "--bulma-active-shadow-a-delta", "--bulma-primary-h", "--bulma-primary-s", "--bulma-primary-l", "--bulma-link-h", "--bulma-link-s", "--bulma-link-l", "--bulma-info-h", "--bulma-info-s", "--bulma-info-l", "--bulma-success-h", "--bulma-success-s", "--bulma-success-l", "--bulma-warning-h", "--bulma-warning-s", "--bulma-warning-l", "--bulma-danger-h", "--bulma-danger-s", "--bulma-danger-l", "--bulma-shadow-h", "--bulma-shadow-s", "--bulma-shadow-l", "--bulma-shadow", "--bulma-family-primary", "--bulma-family-secondary", "--bulma-family-code", "--bulma-size-small", "--bulma-size-normal", "--bulma-size-medium", "--bulma-size-large", "--bulma-weight-light", "--bulma-weight-normal", "--bulma-weight-medium", "--bulma-weight-semibold", "--bulma-weight-bold", "--bulma-weight-extrabold", "--bulma-block-spacing", "--bulma-duration", "--bulma-easing", "--bulma-radius-small", "--bulma-radius", "--bulma-radius-medium", "--bulma-radius-large", "--bulma-radius-rounded", "--bulma-speed", "--bulma-arrow-color", "--bulma-loading-color", "--bulma-burger-h", "--bulma-burger-s", "--bulma-burger-l", "--bulma-burger-border-radius", "--bulma-burger-gap", "--bulma-burger-item-height", "--bulma-burger-item-width", "--bulma-body-background-color", "--bulma-body-size", "--bulma-body-min-width", "--bulma-body-rendering", "--bulma-body-family", "--bulma-body-overflow-x", "--bulma-body-overflow-y", "--bulma-body-color", "--bulma-body-font-size", "--bulma-body-weight", "--bulma-body-line-height", "--bulma-code-family", "--bulma-code-padding", "--bulma-code-weight", "--bulma-code-size", "--bulma-small-font-size", "--bulma-hr-background-color", "--bulma-hr-height", "--bulma-hr-margin", "--bulma-strong-color", "--bulma-strong-weight", "--bulma-pre-font-size", "--bulma-pre-padding", "--bulma-pre-code-font-size", "--bulma-skeleton-background", "--bulma-skeleton-radius", "--bulma-skeleton-block-min-height", "--bulma-skeleton-lines-gap", "--bulma-skeleton-line-height", "--bulma-breadcrumb-item-color", "--bulma-breadcrumb-item-hover-color", "--bulma-breadcrumb-item-active-color", "--bulma-breadcrumb-item-padding-vertical", "--bulma-breadcrumb-item-padding-horizontal", "--bulma-breadcrumb-item-separator-color", "--bulma-card-color", "--bulma-card-background-color", "--bulma-card-shadow", "--bulma-card-radius", "--bulma-card-header-background-color", "--bulma-card-header-color", "--bulma-card-header-padding", "--bulma-card-header-shadow", "--bulma-card-header-weight", "--bulma-card-content-background-color", "--bulma-card-content-padding", "--bulma-card-footer-background-color", "--bulma-card-footer-border-top", "--bulma-card-footer-padding", "--bulma-card-media-margin", "--bulma-dropdown-menu-min-width", "--bulma-dropdown-content-background-color", "--bulma-dropdown-content-offset", "--bulma-dropdown-content-padding-bottom", "--bulma-dropdown-content-padding-top", "--bulma-dropdown-content-radius", "--bulma-dropdown-content-shadow", "--bulma-dropdown-content-z", "--bulma-dropdown-item-h", "--bulma-dropdown-item-s", "--bulma-dropdown-item-l", "--bulma-dropdown-item-background-l", "--bulma-dropdown-item-background-l-delta", "--bulma-dropdown-item-hover-background-l-delta", "--bulma-dropdown-item-active-background-l-delta", "--bulma-dropdown-item-color-l", "--bulma-dropdown-item-selected-h", "--bulma-dropdown-item-selected-s", "--bulma-dropdown-item-selected-l", "--bulma-dropdown-item-selected-background-l", "--bulma-dropdown-item-selected-color-l", "--bulma-dropdown-divider-background-color", "--bulma-menu-item-h", "--bulma-menu-item-s", "--bulma-menu-item-l", "--bulma-menu-item-background-l", "--bulma-menu-item-background-l-delta", "--bulma-menu-item-hover-background-l-delta", "--bulma-menu-item-active-background-l-delta", "--bulma-menu-item-color-l", "--bulma-menu-item-radius", "--bulma-menu-item-selected-h", "--bulma-menu-item-selected-s", "--bulma-menu-item-selected-l", "--bulma-menu-item-selected-background-l", "--bulma-menu-item-selected-color-l", "--bulma-menu-list-border-left", "--bulma-menu-list-line-height", "--bulma-menu-list-link-padding", "--bulma-menu-nested-list-margin", "--bulma-menu-nested-list-padding-left", "--bulma-menu-label-color", "--bulma-menu-label-font-size", "--bulma-menu-label-letter-spacing", "--bulma-menu-label-spacing", "--bulma-message-h", "--bulma-message-s", "--bulma-message-background-l", "--bulma-message-border-l", "--bulma-message-border-l-delta", "--bulma-message-border-style", "--bulma-message-border-width", "--bulma-message-color-l", "--bulma-message-radius", "--bulma-message-header-weight", "--bulma-message-header-padding", "--bulma-message-header-radius", "--bulma-message-header-body-border-width", "--bulma-message-header-background-l", "--bulma-message-header-color-l", "--bulma-message-body-border-width", "--bulma-message-body-color", "--bulma-message-body-padding", "--bulma-message-body-radius", "--bulma-message-body-pre-code-background-color", "--bulma-modal-z", "--bulma-modal-background-background-color", "--bulma-modal-content-width", "--bulma-modal-content-margin-mobile", "--bulma-modal-content-spacing-mobile", "--bulma-modal-content-spacing-tablet", "--bulma-modal-close-dimensions", "--bulma-modal-close-right", "--bulma-modal-close-top", "--bulma-modal-card-spacing", "--bulma-modal-card-head-background-color", "--bulma-modal-card-head-padding", "--bulma-modal-card-head-radius", "--bulma-modal-card-title-color", "--bulma-modal-card-title-line-height", "--bulma-modal-card-title-size", "--bulma-modal-card-foot-background-color", "--bulma-modal-card-foot-radius", "--bulma-modal-card-body-background-color", "--bulma-modal-card-body-padding", "--bulma-navbar-h", "--bulma-navbar-s", "--bulma-navbar-l", "--bulma-navbar-background-color", "--bulma-navbar-box-shadow-size", "--bulma-navbar-box-shadow-color", "--bulma-navbar-padding-vertical", "--bulma-navbar-padding-horizontal", "--bulma-navbar-z", "--bulma-navbar-fixed-z", "--bulma-navbar-item-background-a", "--bulma-navbar-item-background-l", "--bulma-navbar-item-background-l-delta", "--bulma-navbar-item-hover-background-l-delta", "--bulma-navbar-item-active-background-l-delta", "--bulma-navbar-item-color-l", "--bulma-navbar-item-selected-h", "--bulma-navbar-item-selected-s", "--bulma-navbar-item-selected-l", "--bulma-navbar-item-selected-background-l", "--bulma-navbar-item-selected-color-l", "--bulma-navbar-item-img-max-height", "--bulma-navbar-burger-color", "--bulma-navbar-tab-hover-background-color", "--bulma-navbar-tab-hover-border-bottom-color", "--bulma-navbar-tab-active-color", "--bulma-navbar-tab-active-background-color", "--bulma-navbar-tab-active-border-bottom-color", "--bulma-navbar-tab-active-border-bottom-style", "--bulma-navbar-tab-active-border-bottom-width", "--bulma-navbar-dropdown-background-color", "--bulma-navbar-dropdown-border-l", "--bulma-navbar-dropdown-border-color", "--bulma-navbar-dropdown-border-style", "--bulma-navbar-dropdown-border-width", "--bulma-navbar-dropdown-offset", "--bulma-navbar-dropdown-arrow", "--bulma-navbar-dropdown-radius", "--bulma-navbar-dropdown-z", "--bulma-navbar-dropdown-boxed-radius", "--bulma-navbar-dropdown-boxed-shadow", "--bulma-navbar-dropdown-item-h", "--bulma-navbar-dropdown-item-s", "--bulma-navbar-dropdown-item-l", "--bulma-navbar-dropdown-item-background-l", "--bulma-navbar-dropdown-item-color-l", "--bulma-navbar-divider-background-l", "--bulma-navbar-divider-height", "--bulma-navbar-bottom-box-shadow-size", "--bulma-pagination-margin", "--bulma-pagination-min-width", "--bulma-pagination-item-h", "--bulma-pagination-item-s", "--bulma-pagination-item-l", "--bulma-pagination-item-background-l-delta", "--bulma-pagination-item-hover-background-l-delta", "--bulma-pagination-item-active-background-l-delta", "--bulma-pagination-item-border-style", "--bulma-pagination-item-border-width", "--bulma-pagination-item-border-l", "--bulma-pagination-item-border-l-delta", "--bulma-pagination-item-hover-border-l-delta", "--bulma-pagination-item-active-border-l-delta", "--bulma-pagination-item-focus-border-l-delta", "--bulma-pagination-item-color-l", "--bulma-pagination-item-font-size", "--bulma-pagination-item-margin", "--bulma-pagination-item-padding-left", "--bulma-pagination-item-padding-right", "--bulma-pagination-item-outer-shadow-h", "--bulma-pagination-item-outer-shadow-s", "--bulma-pagination-item-outer-shadow-l", "--bulma-pagination-item-outer-shadow-a", "--bulma-pagination-nav-padding-left", "--bulma-pagination-nav-padding-right", "--bulma-pagination-disabled-color", "--bulma-pagination-disabled-background-color", "--bulma-pagination-disabled-border-color", "--bulma-pagination-current-color", "--bulma-pagination-current-background-color", "--bulma-pagination-current-border-color", "--bulma-pagination-ellipsis-color", "--bulma-pagination-shadow-inset", "--bulma-pagination-selected-item-h", "--bulma-pagination-selected-item-s", "--bulma-pagination-selected-item-l", "--bulma-pagination-selected-item-background-l", "--bulma-pagination-selected-item-border-l", "--bulma-pagination-selected-item-color-l", "--bulma-panel-margin", "--bulma-panel-item-border", "--bulma-panel-radius", "--bulma-panel-shadow", "--bulma-panel-heading-line-height", "--bulma-panel-heading-padding", "--bulma-panel-heading-radius", "--bulma-panel-heading-size", "--bulma-panel-heading-weight", "--bulma-panel-tabs-font-size", "--bulma-panel-tab-border-bottom-color", "--bulma-panel-tab-border-bottom-style", "--bulma-panel-tab-border-bottom-width", "--bulma-panel-tab-active-color", "--bulma-panel-list-item-color", "--bulma-panel-list-item-hover-color", "--bulma-panel-block-color", "--bulma-panel-block-hover-background-color", "--bulma-panel-block-active-border-left-color", "--bulma-panel-block-active-color", "--bulma-panel-block-active-icon-color", "--bulma-panel-icon-color", "--bulma-tabs-border-bottom-color", "--bulma-tabs-border-bottom-style", "--bulma-tabs-border-bottom-width", "--bulma-tabs-link-color", "--bulma-tabs-link-hover-border-bottom-color", "--bulma-tabs-link-hover-color", "--bulma-tabs-link-active-border-bottom-color", "--bulma-tabs-link-active-color", "--bulma-tabs-link-padding", "--bulma-tabs-boxed-link-radius", "--bulma-tabs-boxed-link-hover-background-color", "--bulma-tabs-boxed-link-hover-border-bottom-color", "--bulma-tabs-boxed-link-active-background-color", "--bulma-tabs-boxed-link-active-border-color", "--bulma-tabs-boxed-link-active-border-bottom-color", "--bulma-tabs-toggle-link-border-color", "--bulma-tabs-toggle-link-border-style", "--bulma-tabs-toggle-link-border-width", "--bulma-tabs-toggle-link-hover-background-color", "--bulma-tabs-toggle-link-hover-border-color", "--bulma-tabs-toggle-link-radius", "--bulma-tabs-toggle-link-active-background-color", "--bulma-tabs-toggle-link-active-border-color", "--bulma-tabs-toggle-link-active-color", "--bulma-box-background-color", "--bulma-box-color", "--bulma-box-radius", "--bulma-box-shadow", "--bulma-box-padding", "--bulma-box-link-hover-shadow", "--bulma-box-link-active-shadow", "--bulma-content-heading-color", "--bulma-content-heading-weight", "--bulma-content-heading-line-height", "--bulma-content-block-margin-bottom", "--bulma-content-blockquote-background-color", "--bulma-content-blockquote-border-left", "--bulma-content-blockquote-padding", "--bulma-content-pre-padding", "--bulma-content-table-cell-border", "--bulma-content-table-cell-border-width", "--bulma-content-table-cell-padding", "--bulma-content-table-cell-heading-color", "--bulma-content-table-head-cell-border-width", "--bulma-content-table-head-cell-color", "--bulma-content-table-body-last-row-cell-border-bottom-width", "--bulma-content-table-foot-cell-border-width", "--bulma-content-table-foot-cell-color", "--bulma-delete-dimensions", "--bulma-delete-background-l", "--bulma-delete-background-alpha", "--bulma-delete-color", "--bulma-icon-dimensions", "--bulma-icon-dimensions-small", "--bulma-icon-dimensions-medium", "--bulma-icon-dimensions-large", "--bulma-icon-text-spacing", "--bulma-notification-h", "--bulma-notification-s", "--bulma-notification-background-l", "--bulma-notification-color-l", "--bulma-notification-code-background-color", "--bulma-notification-radius", "--bulma-notification-padding", "--bulma-progress-border-radius", "--bulma-progress-bar-background-color", "--bulma-progress-value-background-color", "--bulma-progress-indeterminate-duration", "--bulma-table-color", "--bulma-table-background-color", "--bulma-table-cell-border-color", "--bulma-table-cell-border-style", "--bulma-table-cell-border-width", "--bulma-table-cell-padding", "--bulma-table-cell-heading-color", "--bulma-table-cell-text-align", "--bulma-table-head-cell-border-width", "--bulma-table-head-cell-color", "--bulma-table-foot-cell-border-width", "--bulma-table-foot-cell-color", "--bulma-table-head-background-color", "--bulma-table-body-background-color", "--bulma-table-foot-background-color", "--bulma-table-row-hover-background-color", "--bulma-table-row-active-background-color", "--bulma-table-row-active-color", "--bulma-table-striped-row-even-background-color", "--bulma-table-striped-row-even-hover-background-color", "--bulma-tag-h", "--bulma-tag-s", "--bulma-tag-background-l", "--bulma-tag-background-l-delta", "--bulma-tag-hover-background-l-delta", "--bulma-tag-active-background-l-delta", "--bulma-tag-color-l", "--bulma-tag-radius", "--bulma-tag-delete-margin", "--bulma-title-color", "--bulma-title-family", "--bulma-title-size", "--bulma-title-weight", "--bulma-title-line-height", "--bulma-title-strong-color", "--bulma-title-strong-weight", "--bulma-title-sub-size", "--bulma-title-sup-size", "--bulma-subtitle-color", "--bulma-subtitle-family", "--bulma-subtitle-size", "--bulma-subtitle-weight", "--bulma-subtitle-line-height", "--bulma-subtitle-strong-color", "--bulma-subtitle-strong-weight", "--bulma-control-radius", "--bulma-control-radius-small", "--bulma-control-border-width", "--bulma-control-height", "--bulma-control-line-height", "--bulma-control-padding-vertical", "--bulma-control-padding-horizontal", "--bulma-control-size", "--bulma-control-focus-shadow-l", "--bulma-file-radius", "--bulma-file-name-border-color", "--bulma-file-name-border-style", "--bulma-file-name-border-width", "--bulma-file-name-max-width", "--bulma-file-h", "--bulma-file-s", "--bulma-file-background-l", "--bulma-file-background-l-delta", "--bulma-file-hover-background-l-delta", "--bulma-file-active-background-l-delta", "--bulma-file-border-l", "--bulma-file-border-l-delta", "--bulma-file-hover-border-l-delta", "--bulma-file-active-border-l-delta", "--bulma-file-cta-color-l", "--bulma-file-name-color-l", "--bulma-file-color-l-delta", "--bulma-file-hover-color-l-delta", "--bulma-file-active-color-l-delta", "--bulma-input-h", "--bulma-input-s", "--bulma-input-l", "--bulma-input-border-style", "--bulma-input-border-l", "--bulma-input-border-l-delta", "--bulma-input-hover-border-l-delta", "--bulma-input-active-border-l-delta", "--bulma-input-focus-h", "--bulma-input-focus-s", "--bulma-input-focus-l", "--bulma-input-focus-shadow-size", "--bulma-input-focus-shadow-alpha", "--bulma-input-color-l", "--bulma-input-background-l", "--bulma-input-background-l-delta", "--bulma-input-height", "--bulma-input-shadow", "--bulma-input-placeholder-color", "--bulma-input-disabled-color", "--bulma-input-disabled-background-color", "--bulma-input-disabled-border-color", "--bulma-input-disabled-placeholder-color", "--bulma-input-arrow", "--bulma-input-icon-color", "--bulma-input-icon-hover-color", "--bulma-input-icon-focus-color", "--bulma-input-radius", "--bulma-column-gap", "--bulma-grid-gap", "--bulma-grid-column-count", "--bulma-grid-column-min", "--bulma-grid-cell-column-span", "--bulma-grid-cell-column-start", "--bulma-footer-background-color", "--bulma-footer-color", "--bulma-footer-padding", "--bulma-hero-body-padding", "--bulma-hero-body-padding-tablet", "--bulma-hero-body-padding-small", "--bulma-hero-body-padding-medium", "--bulma-hero-body-padding-large", "--bulma-media-border-color", "--bulma-media-border-size", "--bulma-media-spacing", "--bulma-media-spacing-large", "--bulma-media-content-spacing", "--bulma-media-level-1-spacing", "--bulma-media-level-1-content-spacing", "--bulma-media-level-2-spacing", "--bulma-section-padding", "--bulma-section-padding-desktop", "--bulma-section-padding-medium", "--bulma-section-padding-large"];
 /** A single Bulma CSS variable key from the `bulmaCssVars` tuple. */
 type BulmaVarKey = (typeof bulmaCssVars)[number];
@@ -90,6 +90,22 @@ export interface ThemeProps extends Omit<BulmaClassesProps, 'color' | 'backgroun
      * it is on every other component.
      */
     radius?: (typeof validRadii)[number];
+    /**
+     * Column gap helper, as on every other component: a gap step adds
+     * `is-column-gap-<step>` to the wrapper div, which spaces the wrapper's own
+     * children when it is a flex or grid container. Under `isRoot` there is no
+     * wrapper, so it does nothing, and says so in development.
+     *
+     * It does not set `--bulma-column-gap`, the variable `Columns` reads for
+     * its gutters; set that through `bulmaVars`
+     * (`bulmaVars={{ '--bulma-column-gap': '1rem' }}`). Before `columnGap` was
+     * a helper prop, untyped JavaScript could pass it to Theme as that
+     * variable. A string that is not a gap step (`'1rem'`) still sets it, but
+     * that route is deprecated and logs a warning in development. A gap step
+     * does not: `columnGap="0"` used to zero the gutters inside the Theme, and
+     * now adds `is-column-gap-0` to the wrapper instead.
+     */
+    columnGap?: BulmaGapStep;
     schemeH?: string;
     schemeS?: string;
     lightL?: string;

package/dist/types-cjs/helpers/bulmaClassHelpers.d.ts

@@ -22,6 +22,24 @@ export declare const validSchemeColors: readonly ["scheme-main", "scheme-main-bi
  * @example '0', '1', 'auto'
  */
 export declare const validSizes: readonly ["0", "1", "2", "3", "4", "5", "6", "auto"];
+/**
+ * Valid Bulma gap steps, taken by `gap`, `columnGap` and `rowGap`. Each whole
+ * step is 0.5rem, so `2` is 1rem and `8` is 4rem, and the half steps sit
+ * between them. They render `is-gap-<value>`, `is-column-gap-<value>` and
+ * `is-row-gap-<value>`.
+ *
+ * This is a different scale from `validSizes`: `gap="2"` is 1rem where
+ * `m="2"` is 0.5rem.
+ * @example '0', '0.5', '2', '8'
+ */
+export declare const validGaps: readonly ["0", "0.5", "1", "1.5", "2", "2.5", "3", "3.5", "4", "4.5", "5", "5.5", "6", "6.5", "7", "7.5", "8"];
+/**
+ * A gap step as `gap`, `columnGap` and `rowGap` take it: a value from
+ * `validGaps`, or the same step written as a number (`gap={2}`,
+ * `gap={1.5}`). `Grid` took its gaps as numbers before the gap helpers were
+ * shared, so every gap prop still does.
+ */
+export type BulmaGapStep = '0' | '0.5' | '1' | '1.5' | '2' | '2.5' | '3' | '3.5' | '4' | '4.5' | '5' | '5.5' | '6' | '6.5' | '7' | '7.5' | '8' | 0 | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 4.5 | 5 | 5.5 | 6 | 6.5 | 7 | 7.5 | 8;
 /**
  * Valid Bulma text size classes.
  * @example '1', '2', '3'

package/dist/types-cjs/helpers/useBulmaClasses.d.ts

@@ -1,5 +1,5 @@
 import { type CSSProperties } from 'react';
-import { BulmaDisplayProps, BulmaViewportProps } from './bulmaClassHelpers.js';
+import { BulmaDisplayProps, BulmaViewportProps, type BulmaGapStep } from './bulmaClassHelpers.js';
 import { BulmaColorProps, BulmaColorPropsWithScheme } from './useColorClasses.js';
 import { BulmaSpacingProps } from './useSpacingClasses.js';
 import { BulmaTypographyProps } from './useTypographyClasses.js';
@@ -50,8 +50,8 @@ export declare const useBulmaClasses: <T extends object>(props: BulmaClassesProp
     bulmaHelperStyles?: CSSProperties;
     rest: Omit<T, keyof BulmaClassesProps>;
 };
-export { validColors, validColorShades, validSchemeColors, validSizes, validTextSizes, validAlignments, validTextTransforms, validTextWeights, validFontFamilies, validDisplays, validVisibilities, validFlexDirections, validFlexWraps, validJustifyContents, validAlignContents, validAlignItems, validAlignSelfs, validFlexGrowShrink, validViewports, validFloats, validOverflows, validAxisOverflows, validInteractions, validCursors, validRadii, validShadows, validResponsives, validPositions, validAspectRatios, } from './bulmaClassHelpers.js';
-export type { BulmaViewportProps, BulmaDisplayProps };
+export { validColors, validColorShades, validSchemeColors, validSizes, validGaps, validTextSizes, validAlignments, validTextTransforms, validTextWeights, validFontFamilies, validDisplays, validVisibilities, validFlexDirections, validFlexWraps, validJustifyContents, validAlignContents, validAlignItems, validAlignSelfs, validFlexGrowShrink, validViewports, validFloats, validOverflows, validAxisOverflows, validInteractions, validCursors, validRadii, validShadows, validResponsives, validPositions, validAspectRatios, } from './bulmaClassHelpers.js';
+export type { BulmaViewportProps, BulmaDisplayProps, BulmaGapStep };
 export * from './useColorClasses.js';
 export * from './useSpacingClasses.js';
 export * from './useTypographyClasses.js';

package/dist/types-cjs/helpers/useSpacingClasses.d.ts

@@ -1,6 +1,6 @@
-import { validSizes } from './bulmaClassHelpers.js';
+import { validSizes, type BulmaGapStep } from './bulmaClassHelpers.js';
 /**
- * Props for applying Bulma margin and padding helper classes.
+ * Props for applying Bulma margin, padding and gap helper classes.
  */
 export interface BulmaSpacingProps {
     /** Margin (e.g., '0', '1'). */
@@ -31,9 +31,40 @@ export interface BulmaSpacingProps {
     px?: (typeof validSizes)[number];
     /** Padding vertical (top and bottom). */
     py?: (typeof validSizes)[number];
+    /**
+     * Space between the children of a flex or grid container (`is-gap-<value>`),
+     * on Bulma's gap scale: each whole step is 0.5rem, so `gap="2"` is 1rem, with
+     * half steps such as `"1.5"` between them. Also takes the step as a number.
+     *
+     * It sets the CSS `gap`, which does nothing unless the element lays its
+     * children out as flex or grid, so pair it with `display="flex"` on most
+     * components. The scale is not the margin scale: `m="2"` is 0.5rem.
+     *
+     * `Grid` and `Columns` declare their own `gap`. `Grid`'s renders the same
+     * class; `Columns`' is the columns gutter (`is-<value>`) and takes whole
+     * steps only.
+     */
+    gap?: BulmaGapStep;
+    /**
+     * Space between columns only (`is-column-gap-<value>`), on the same scale as
+     * `gap`. Beside `gap` or `gapless`, it wins on its own axis.
+     */
+    columnGap?: BulmaGapStep;
+    /**
+     * Space between rows only (`is-row-gap-<value>`), on the same scale as
+     * `gap`. Beside `gap` or `gapless`, it wins on its own axis.
+     */
+    rowGap?: BulmaGapStep;
+    /**
+     * Removes the gap between children (`is-gapless`), the shortcut for
+     * `gap="0"`; a valid `gap` wins when both are set. `Columns` is the
+     * exception: its `gap` is its gutter, and there `gapless` is Bulma's gapless
+     * columns modifier, the same as `isGapless`.
+     */
+    gapless?: boolean;
 }
 /**
- * A hook that generates Bulma margin and padding helper classes.
+ * A hook that generates Bulma margin, padding and gap helper classes.
  *
  * @function useSpacingClasses
  * @param props - Spacing-related Bulma helper props.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allxsmith/bestax-bulma",
-  "version": "5.24.0",
+  "version": "5.26.0",
   "description": "A fully-typed React component library for the Bulma CSS framework. Build modern UIs quickly with reusable, accessible, and customizable Bulma-based React components.",
   "main": "dist/index.cjs",
   "module": "dist/index.esm.js",