@allxsmith/bestax-bulma 5.8.1 → 5.8.3

package/dist/index.cjs.js

@@ -5903,6 +5903,25 @@ const CheckboxesComponent = ({ label, labelSize, labelProps, horizontal, message
 };
 const Checkboxes = withSubComponents(CheckboxesComponent, { Checkbox }, 'Checkboxes');
 
+/**
+ * Associates the convenience `label` prop with its control (#368): generates
+ * an id for the control and returns labelProps carrying a matching `htmlFor`.
+ * A user-supplied `id` is used as the target instead of the generated one, and
+ * an explicit `labelProps.htmlFor` disables generation entirely — the user has
+ * taken over the association. Internal; not part of the public API.
+ */
+function useAutoLabelId({ label, id, labelProps, rendersLabel, }) {
+    // Called unconditionally per the rules of hooks; SSR-safe on React 18 and 19.
+    const generatedId = React.useId();
+    // Truthiness mirrors Field's own `if (label)` render gate.
+    const active = !!label && rendersLabel;
+    const controlId = id ?? (active && !labelProps?.htmlFor ? generatedId : undefined);
+    const fieldLabelProps = active
+        ? { htmlFor: controlId, ...labelProps }
+        : labelProps;
+    return { controlId, fieldLabelProps };
+}
+
 /**
  * The `File` component provides a Bulma-styled file input, supporting color, size, boxed/fullwidth/align styles, icons, "has name", and filename display.
  *
@@ -5915,6 +5934,12 @@ const File = React.forwardRef(({
 // Field props
 label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, color, size, isBoxed, isFullwidth, isRight, isCentered, hasName, buttonLabel, iconLeft, iconRight, className, inputClassName, fileName, ...props }, ref) => {
     const insideField = useInsideField();
+    const { controlId, fieldLabelProps } = useAutoLabelId({
+        label,
+        id: props.id,
+        labelProps,
+        rendersLabel: !insideField,
+    });
     const { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color,
@@ -5944,9 +5969,9 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
         [`is-${messageColor}`]: !!messageColor,
     });
     const messageEl = message ? jsxRuntime.jsx("p", { className: helpClass, children: message }) : null;
-    const fileElement = (jsxRuntime.jsx("div", { className: fileClass, children: jsxRuntime.jsxs("label", { className: usePrefixedClassNames('file-label'), children: [jsxRuntime.jsx("input", { ref: ref, className: classNames(usePrefixedClassNames('file-input'), inputClassName), type: "file", ...rest }), jsxRuntime.jsxs("span", { className: usePrefixedClassNames('file-cta'), children: [iconLeft && (jsxRuntime.jsx("span", { className: prefixedClassNames(classPrefix, 'file-icon'), children: iconLeft })), jsxRuntime.jsx("span", { className: usePrefixedClassNames('file-label'), children: buttonLabel || 'Choose a file\u2026' }), iconRight && (jsxRuntime.jsx("span", { className: prefixedClassNames(classPrefix, 'file-icon'), children: iconRight }))] }), hasName && fileName && (jsxRuntime.jsx("span", { className: prefixedClassNames(classPrefix, 'file-name'), children: fileName }))] }) }));
+    const fileElement = (jsxRuntime.jsx("div", { className: fileClass, children: jsxRuntime.jsxs("label", { className: usePrefixedClassNames('file-label'), children: [jsxRuntime.jsx("input", { ref: ref, className: classNames(usePrefixedClassNames('file-input'), inputClassName), type: "file", id: controlId, ...rest }), jsxRuntime.jsxs("span", { className: usePrefixedClassNames('file-cta'), children: [iconLeft && (jsxRuntime.jsx("span", { className: prefixedClassNames(classPrefix, 'file-icon'), children: iconLeft })), jsxRuntime.jsx("span", { className: usePrefixedClassNames('file-label'), children: buttonLabel || 'Choose a file\u2026' }), iconRight && (jsxRuntime.jsx("span", { className: prefixedClassNames(classPrefix, 'file-icon'), children: iconRight }))] }), hasName && fileName && (jsxRuntime.jsx("span", { className: prefixedClassNames(classPrefix, 'file-name'), children: fileName }))] }) }));
     if (!insideField) {
-        return (jsxRuntime.jsxs(Field, { label: label, labelSize: labelSize, labelProps: labelProps, horizontal: horizontal, className: fieldClassName, children: [fileElement, messageEl] }));
+        return (jsxRuntime.jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [fileElement, messageEl] }));
     }
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [fileElement, messageEl] }));
 });
@@ -6239,6 +6264,14 @@ const Slider = React.forwardRef((props, ref) => {
     const insideField = useInsideField();
     const insideControl = useInsideControl();
     const { bulmaHelperClasses, rest } = useBulmaClasses(restProps);
+    // In range mode the low thumb carries `rest` (and any user id), so the
+    // label targets it; each thumb keeps its own aria-label for AT.
+    const { controlId, fieldLabelProps } = useAutoLabelId({
+        label,
+        id: restProps.id,
+        labelProps,
+        rendersLabel: !insideField,
+    });
     // Resolve tooltip mode: explicit tooltip prop takes precedence, else showOutput maps to 'auto'
     const tooltipMode = tooltip ?? (showOutput ? 'auto' : 'hidden');
     // --- Range mode state ---
@@ -6503,7 +6536,7 @@ const Slider = React.forwardRef((props, ref) => {
     // --- Single slider ---
     const sliderElement = !range ? (jsxRuntime.jsxs("div", { ref: wrapperRef, className: combinedClasses, style: wrapperStyle, children: [jsxRuntime.jsx("input", { ref: combinedRef, type: "range", min: min, max: max, step: step, value: currentSingle, disabled: disabled, onChange: handleSingleChange, onKeyDown: handleKeyDown, onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), onFocus: () => setShowTooltip(true), onBlur: () => setShowTooltip(false), className: prefixedClassNames(classPrefix, 'slider-input'), style: {
                     '--slider-progress': `${progressSingle}%`,
-                }, "aria-valuenow": currentSingle, "aria-valuemin": min, "aria-valuemax": max, "aria-orientation": isVertical ? 'vertical' : undefined, "aria-label": ariaLabel, ...getAriaProps(currentSingle), ...rest }), tooltipMode !== 'hidden' && (jsxRuntime.jsx("output", { ref: outputRef, className: prefixedClassNames(classPrefix, 'slider-output', {
+                }, "aria-valuenow": currentSingle, "aria-valuemin": min, "aria-valuemax": max, "aria-orientation": isVertical ? 'vertical' : undefined, "aria-label": ariaLabel, ...getAriaProps(currentSingle), id: controlId, ...rest }), tooltipMode !== 'hidden' && (jsxRuntime.jsx("output", { ref: outputRef, className: prefixedClassNames(classPrefix, 'slider-output', {
                     'is-visible': showTipLow,
                     'is-flipped': flipped,
                     'is-flipped-left': isVertical && verticalFlippedLeft,
@@ -6531,7 +6564,7 @@ const Slider = React.forwardRef((props, ref) => {
                     : {
                         '--slider-progress-low': `${progressLow}%`,
                         '--slider-progress-high': `${progressHigh}%`,
-                    } }), jsxRuntime.jsx("input", { ref: combinedRef, type: "range", min: min, max: max, step: step, value: currentRange[0], disabled: disabled, onChange: handleRangeLowChange, onKeyDown: handleKeyDown, onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), onFocus: () => setShowTooltip(true), onBlur: () => setShowTooltip(false), className: prefixedClassNames(classPrefix, 'slider-input', 'slider-input-low'), "aria-valuenow": currentRange[0], "aria-valuemin": min, "aria-valuemax": max, "aria-orientation": isVertical ? 'vertical' : undefined, "aria-label": ariaLabel?.[0] ?? 'Minimum value', ...getAriaProps(currentRange[0]), ...rest, ...(nameLow !== undefined ? { name: nameLow } : {}) }), jsxRuntime.jsx("input", { ref: inputHighRef, type: "range", min: min, max: max, step: step, value: currentRange[1], disabled: disabled, onChange: handleRangeHighChange, onMouseEnter: () => setShowTooltipHigh(true), onMouseLeave: () => setShowTooltipHigh(false), onFocus: () => setShowTooltipHigh(true), onBlur: () => setShowTooltipHigh(false), className: prefixedClassNames(classPrefix, 'slider-input', 'slider-input-high'), "aria-valuenow": currentRange[1], "aria-valuemin": min, "aria-valuemax": max, "aria-orientation": isVertical ? 'vertical' : undefined, "aria-label": ariaLabel?.[1] ?? 'Maximum value', ...getAriaProps(currentRange[1]), name: nameHigh }), tooltipMode !== 'hidden' && (jsxRuntime.jsx("output", { ref: outputRef, className: prefixedClassNames(classPrefix, 'slider-output', 'slider-output-low', {
+                    } }), jsxRuntime.jsx("input", { ref: combinedRef, type: "range", min: min, max: max, step: step, value: currentRange[0], disabled: disabled, onChange: handleRangeLowChange, onKeyDown: handleKeyDown, onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), onFocus: () => setShowTooltip(true), onBlur: () => setShowTooltip(false), className: prefixedClassNames(classPrefix, 'slider-input', 'slider-input-low'), "aria-valuenow": currentRange[0], "aria-valuemin": min, "aria-valuemax": max, "aria-orientation": isVertical ? 'vertical' : undefined, "aria-label": ariaLabel?.[0] ?? 'Minimum value', ...getAriaProps(currentRange[0]), id: controlId, ...rest, ...(nameLow !== undefined ? { name: nameLow } : {}) }), jsxRuntime.jsx("input", { ref: inputHighRef, type: "range", min: min, max: max, step: step, value: currentRange[1], disabled: disabled, onChange: handleRangeHighChange, onMouseEnter: () => setShowTooltipHigh(true), onMouseLeave: () => setShowTooltipHigh(false), onFocus: () => setShowTooltipHigh(true), onBlur: () => setShowTooltipHigh(false), className: prefixedClassNames(classPrefix, 'slider-input', 'slider-input-high'), "aria-valuenow": currentRange[1], "aria-valuemin": min, "aria-valuemax": max, "aria-orientation": isVertical ? 'vertical' : undefined, "aria-label": ariaLabel?.[1] ?? 'Maximum value', ...getAriaProps(currentRange[1]), name: nameHigh }), tooltipMode !== 'hidden' && (jsxRuntime.jsx("output", { ref: outputRef, className: prefixedClassNames(classPrefix, 'slider-output', 'slider-output-low', {
                     'is-visible': showTipLow,
                     'is-flipped': flipped,
                     'is-flipped-left': isVertical && verticalFlippedLeft,
@@ -6577,7 +6610,7 @@ const Slider = React.forwardRef((props, ref) => {
         content = jsxRuntime.jsx(Control, { children: content });
     }
     if (!insideField) {
-        return (jsxRuntime.jsxs(Field, { label: label, labelSize: labelSize, labelProps: labelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
+        return (jsxRuntime.jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
     }
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [content, messageEl] }));
 });
@@ -6615,6 +6648,13 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
     const isStepper = variant === 'stepper';
     const isAddons = compact || isStepper;
     const effectiveControlsPosition = isStepper ? 'right' : controlsPosition;
+    // The plusminus bare branch renders no Field and no label at all.
+    const { controlId, fieldLabelProps } = useAutoLabelId({
+        label,
+        id: props.id,
+        labelProps,
+        rendersLabel: !insideField && (isStepper || !effectiveBare),
+    });
     // Clamp value to min/max
     const clampValue = React.useCallback((val) => {
         let clamped = val;
@@ -6713,12 +6753,12 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
         }
     };
     // Shared input element
-    const inputControl = (jsxRuntime.jsx("div", { className: expandedControlClasses, children: jsxRuntime.jsx("input", { ref: combinedRef, type: "number", className: inputClasses, value: currentValue ?? '', min: min, max: max, step: step, disabled: disabled, readOnly: !editable, onChange: handleInputChange, onKeyDown: handleKeyDown, "aria-valuenow": currentValue ?? undefined, "aria-valuemin": min, "aria-valuemax": max, ...rest }) }));
+    const inputControl = (jsxRuntime.jsx("div", { className: expandedControlClasses, children: jsxRuntime.jsx("input", { ref: combinedRef, type: "number", className: inputClasses, value: currentValue ?? '', min: min, max: max, step: step, disabled: disabled, readOnly: !editable, onChange: handleInputChange, onKeyDown: handleKeyDown, "aria-valuenow": currentValue ?? undefined, "aria-valuemin": min, "aria-valuemax": max, id: controlId, ...rest }) }));
     // Stepper variant
     if (isStepper) {
         const stepperElement = (jsxRuntime.jsxs("div", { className: combinedClasses, children: [inputControl, jsxRuntime.jsx("div", { className: controlClasses, children: jsxRuntime.jsxs("div", { className: stepperClasses, children: [jsxRuntime.jsx("button", { type: "button", className: stepperButtonClasses, onClick: handleIncrement, disabled: disabled || isAtMax, tabIndex: -1, "aria-label": "Increase value", children: jsxRuntime.jsx(ArrowDropUp, {}) }), jsxRuntime.jsx("button", { type: "button", className: stepperButtonClasses, onClick: handleDecrement, disabled: disabled || isAtMin, tabIndex: -1, "aria-label": "Decrease value", children: jsxRuntime.jsx(ArrowDropDown, {}) })] }) })] }));
         if (!insideField) {
-            return (jsxRuntime.jsxs(Field, { label: label, labelSize: labelSize, labelProps: labelProps, horizontal: horizontal, className: fieldClassName, children: [stepperElement, messageEl] }));
+            return (jsxRuntime.jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [stepperElement, messageEl] }));
         }
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [stepperElement, messageEl] }));
     }
@@ -6752,7 +6792,7 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
         numberinputElement = (jsxRuntime.jsxs("div", { className: combinedClasses, children: [decrementControl, inputControl, incrementControl] }));
     }
     if (!insideField) {
-        return (jsxRuntime.jsxs(Field, { label: label, labelSize: labelSize, labelProps: labelProps, horizontal: horizontal, className: fieldClassName, children: [numberinputElement, messageEl] }));
+        return (jsxRuntime.jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [numberinputElement, messageEl] }));
     }
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [numberinputElement, messageEl] }));
 });
@@ -7029,10 +7069,16 @@ Rate.displayName = 'Rate';
  *   onSelect={(item) => console.log(item)}
  * />
  */
-const Autocomplete = React.forwardRef(({ data = [], value: controlledValue, placeholder, field = 'label', clearable = false, openOnFocus = false, keepFirst = false, keepOpen = false, selectOnClickOutside = false, maxHeight = 200, loading = false, disabled = false, checkInfiniteScroll = false, infiniteScrollDistance = 50, color, size, onInput, onSelect, onActiveChange, onInfiniteScroll, itemTemplate, header, footer, empty, name, form, required, 
+const Autocomplete = React.forwardRef(({ data = [], value: controlledValue, placeholder, field = 'label', clearable = false, openOnFocus = false, keepFirst = false, keepOpen = false, selectOnClickOutside = false, maxHeight = 200, loading = false, disabled = false, checkInfiniteScroll = false, infiniteScrollDistance = 50, color, size, onInput, onSelect, onActiveChange, onInfiniteScroll, itemTemplate, header, footer, empty, name, form, required, id, 
 // Field props
 label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, className, ...props }, ref) => {
     const insideField = useInsideField();
+    const { controlId, fieldLabelProps } = useAutoLabelId({
+        label,
+        id,
+        labelProps,
+        rendersLabel: !insideField,
+    });
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
     const { classPrefix } = useConfig();
     const containerRef = React.useRef(null);
@@ -7228,7 +7274,7 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
         [`is-${messageColor}`]: !!messageColor,
     });
     const messageEl = message ? jsxRuntime.jsx("p", { className: helpClass, children: message }) : null;
-    const autocompleteElement = (jsxRuntime.jsxs("div", { ref: containerRef, className: combinedClasses, ...rest, children: [jsxRuntime.jsxs("div", { className: controlClasses, children: [jsxRuntime.jsx("input", { ref: combinedRef, type: "text", className: inputClasses, value: inputValue, placeholder: placeholder, disabled: disabled, name: name, form: form, required: required, onChange: handleInputChange, onFocus: handleFocus, onKeyDown: handleKeyDown, role: "combobox", "aria-expanded": isActive, "aria-haspopup": "listbox", "aria-autocomplete": "list", autoComplete: "off" }), clearable && inputValue && !disabled && (jsxRuntime.jsx("span", { className: iconRightClickableClass, onClick: handleClear, role: "button", "aria-label": "Clear", children: jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", width: "16", height: "16", children: [jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) })), loading && (jsxRuntime.jsx("span", { className: iconRightClass, children: jsxRuntime.jsx("span", { className: loaderClass }) }))] }), isActive && (filteredData.length > 0 || empty) && (jsxRuntime.jsx("div", { className: dropdownMenuClasses, children: jsxRuntime.jsxs("div", { ref: dropdownRef, className: dropdownContentClass, style: { maxHeight: `${maxHeight}px`, overflowY: 'auto' }, role: "listbox", onScroll: handleDropdownScroll, children: [header && jsxRuntime.jsx("div", { className: dropdownHeaderClass, children: header }), filteredData.length > 0 ? (filteredData.map((item, index) => {
+    const autocompleteElement = (jsxRuntime.jsxs("div", { ref: containerRef, className: combinedClasses, ...rest, children: [jsxRuntime.jsxs("div", { className: controlClasses, children: [jsxRuntime.jsx("input", { ref: combinedRef, type: "text", className: inputClasses, id: controlId, value: inputValue, placeholder: placeholder, disabled: disabled, name: name, form: form, required: required, onChange: handleInputChange, onFocus: handleFocus, onKeyDown: handleKeyDown, role: "combobox", "aria-expanded": isActive, "aria-haspopup": "listbox", "aria-autocomplete": "list", autoComplete: "off" }), clearable && inputValue && !disabled && (jsxRuntime.jsx("span", { className: iconRightClickableClass, onClick: handleClear, role: "button", "aria-label": "Clear", children: jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", width: "16", height: "16", children: [jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) })), loading && (jsxRuntime.jsx("span", { className: iconRightClass, children: jsxRuntime.jsx("span", { className: loaderClass }) }))] }), isActive && (filteredData.length > 0 || empty) && (jsxRuntime.jsx("div", { className: dropdownMenuClasses, children: jsxRuntime.jsxs("div", { ref: dropdownRef, className: dropdownContentClass, style: { maxHeight: `${maxHeight}px`, overflowY: 'auto' }, role: "listbox", onScroll: handleDropdownScroll, children: [header && jsxRuntime.jsx("div", { className: dropdownHeaderClass, children: header }), filteredData.length > 0 ? (filteredData.map((item, index) => {
                             const isDisabled = typeof item !== 'string' && item.disabled;
                             const isHighlighted = index === highlightedIndex;
                             const itemClasses = prefixedClassNames(classPrefix, 'dropdown-item', {
@@ -7240,7 +7286,7 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
                                     : getDisplayValue(item) }, index));
                         })) : (jsxRuntime.jsx("div", { className: emptyItemClasses, children: empty })), footer && jsxRuntime.jsx("div", { className: dropdownFooterClass, children: footer })] }) }))] }));
     if (!insideField) {
-        return (jsxRuntime.jsxs(Field, { label: label, labelSize: labelSize, labelProps: labelProps, horizontal: horizontal, className: fieldClassName, children: [autocompleteElement, messageEl] }));
+        return (jsxRuntime.jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [autocompleteElement, messageEl] }));
     }
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [autocompleteElement, messageEl] }));
 });
@@ -7271,7 +7317,7 @@ Autocomplete.displayName = 'Autocomplete';
  */
 const Taginput = React.forwardRef(({ 
 // Field props
-label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, value: controlledValue, defaultValue = [], data = [], placeholder, field = 'label', allowNew = true, allowDuplicates = false, openOnFocus = false, removeOnKeys = true, confirmKeys = ['Enter', ','], closable = true, attached = false, maxTags, maxlength, disabled = false, readonly = false, rounded = false, ellipsis = false, hasCounter = true, onPasteSeparators = [','], beforeAdding, createTag, keepFirst = false, keepOpen = true, loading = false, ariaCloseLabel, icon, iconLibrary: iconLibraryProp, iconVariant, iconFeatures, color, tagColor, size, onChange, onAdd, onRemove, onTyping, tagTemplate, name, form, className, ...props }, ref) => {
+label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, value: controlledValue, defaultValue = [], data = [], placeholder, field = 'label', allowNew = true, allowDuplicates = false, openOnFocus = false, removeOnKeys = true, confirmKeys = ['Enter', ','], closable = true, attached = false, maxTags, maxlength, disabled = false, readonly = false, rounded = false, ellipsis = false, hasCounter = true, onPasteSeparators = [','], beforeAdding, createTag, keepFirst = false, keepOpen = true, loading = false, ariaCloseLabel, icon, iconLibrary: iconLibraryProp, iconVariant, iconFeatures, color, tagColor, size, onChange, onAdd, onRemove, onTyping, tagTemplate, name, form, id, className, ...props }, ref) => {
     const insideField = useInsideField();
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
     const { classPrefix } = useConfig();
@@ -7287,6 +7333,15 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
     const [highlightedIndex, setHighlightedIndex] = React.useState(-1);
     // Use controlled or internal tags
     const tags = controlledValue !== undefined ? controlledValue : internalTags;
+    const isMaxReached = maxTags !== undefined && tags.length >= maxTags;
+    // At the tag limit the text input is not rendered, so there is nothing to
+    // wire the label to.
+    const { controlId, fieldLabelProps } = useAutoLabelId({
+        label,
+        id,
+        labelProps,
+        rendersLabel: !insideField && !isMaxReached,
+    });
     // Get display value from tag
     const getDisplayValue = (tag) => {
         if (typeof tag === 'string')
@@ -7529,7 +7584,6 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
         [`is-${size}`]: !!size,
     });
     const combinedClasses = classNames(taginputClasses, bulmaHelperClasses, className);
-    const isMaxReached = maxTags !== undefined && tags.length >= maxTags;
     // Counter text
     const showCounter = hasCounter && (maxTags !== undefined || maxlength !== undefined);
     const counterText = maxTags !== undefined
@@ -7553,12 +7607,14 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
                                                 e.stopPropagation();
                                                 removeTag(index);
                                             }, "aria-label": ariaCloseLabel || `Remove ${displayVal}` }))] }, index));
-                            }), !isMaxReached && (jsxRuntime.jsx("input", { ref: combinedRef, type: "text", className: inputClasses, value: inputValue, placeholder: tags.length === 0 ? placeholder : undefined, disabled: disabled, readOnly: readonly, maxLength: maxlength, onChange: handleInputChange, onFocus: handleFocus, onKeyDown: handleKeyDown, onPaste: handlePaste, "aria-label": "Add tag" }))] }), loading && (jsxRuntime.jsx("span", { className: iconRightClass, children: jsxRuntime.jsx("span", { className: loaderClass }) }))] }), isActive && filteredData.length > 0 && (jsxRuntime.jsx("div", { className: dropdownMenuClasses, children: jsxRuntime.jsx("div", { ref: dropdownRef, className: dropdownContentClasses, role: "listbox", children: filteredData.map((item, index) => (jsxRuntime.jsx("a", { className: pcn('dropdown-item', {
+                            }), !isMaxReached && (jsxRuntime.jsx("input", { ref: combinedRef, type: "text", className: inputClasses, id: controlId, value: inputValue, placeholder: tags.length === 0 ? placeholder : undefined, disabled: disabled, readOnly: readonly, maxLength: maxlength, onChange: handleInputChange, onFocus: handleFocus, onKeyDown: handleKeyDown, onPaste: handlePaste, "aria-label": controlId && fieldLabelProps?.htmlFor === controlId
+                                    ? undefined
+                                    : 'Add tag' }))] }), loading && (jsxRuntime.jsx("span", { className: iconRightClass, children: jsxRuntime.jsx("span", { className: loaderClass }) }))] }), isActive && filteredData.length > 0 && (jsxRuntime.jsx("div", { className: dropdownMenuClasses, children: jsxRuntime.jsx("div", { ref: dropdownRef, className: dropdownContentClasses, role: "listbox", children: filteredData.map((item, index) => (jsxRuntime.jsx("a", { className: pcn('dropdown-item', {
                             'is-active': index === highlightedIndex,
                         }), onClick: () => addTag(item), onMouseEnter: () => setHighlightedIndex(index), role: "option", "aria-selected": index === highlightedIndex, children: item }, index))) }) })), showCounter && jsxRuntime.jsx("small", { className: counterClasses, children: counterText }), name &&
                 tags.map((tag, i) => (jsxRuntime.jsx("input", { type: "hidden", name: name, value: getDisplayValue(tag), form: form }, `tag-input-${i}`)))] }));
     if (!insideField) {
-        return (jsxRuntime.jsxs(Field, { label: label, labelSize: labelSize, labelProps: labelProps, horizontal: horizontal, className: fieldClassName, children: [taginputElement, messageEl] }));
+        return (jsxRuntime.jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [taginputElement, messageEl] }));
     }
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [taginputElement, messageEl] }));
 });
@@ -7696,16 +7752,22 @@ fieldClassName, controlClassName,
 ...inputProps }, ref) => {
     const insideField = useInsideField();
     const insideControl = useInsideControl();
+    const { controlId, fieldLabelProps } = useAutoLabelId({
+        label,
+        id: inputProps.id,
+        labelProps,
+        rendersLabel: !insideField,
+    });
     const helpClass = usePrefixedClassNames('help', {
         [`is-${messageColor}`]: !!messageColor,
     });
-    let content = jsxRuntime.jsx(InputBase, { ref: ref, ...inputProps });
+    let content = jsxRuntime.jsx(InputBase, { ref: ref, id: controlId, ...inputProps });
     if (!insideControl) {
         content = (jsxRuntime.jsx(Control, { iconLeft: iconLeft, iconRight: iconRight, iconLeftName: iconLeftName, iconRightName: iconRightName, iconLeftSize: iconLeftSize, iconRightSize: iconRightSize, hasIconsLeft: hasIconsLeft, hasIconsRight: hasIconsRight, isLoading: isLoading, isExpanded: isExpanded, size: controlSize, className: controlClassName, children: content }));
     }
     const messageEl = message ? jsxRuntime.jsx("p", { className: helpClass, children: message }) : null;
     if (!insideField) {
-        return (jsxRuntime.jsxs(Field, { label: label, labelSize: labelSize, labelProps: labelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
+        return (jsxRuntime.jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
     }
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [content, messageEl] }));
 });
@@ -7740,16 +7802,22 @@ fieldClassName, controlClassName,
 ...selectProps }, ref) => {
     const insideField = useInsideField();
     const insideControl = useInsideControl();
+    const { controlId, fieldLabelProps } = useAutoLabelId({
+        label,
+        id: selectProps.id,
+        labelProps,
+        rendersLabel: !insideField,
+    });
     const helpClass = usePrefixedClassNames('help', {
         [`is-${messageColor}`]: !!messageColor,
     });
-    let content = jsxRuntime.jsx(SelectBase, { ref: ref, ...selectProps });
+    let content = jsxRuntime.jsx(SelectBase, { ref: ref, id: controlId, ...selectProps });
     if (!insideControl) {
         content = (jsxRuntime.jsx(Control, { iconLeft: iconLeft, iconLeftName: iconLeftName, iconLeftSize: iconLeftSize, hasIconsLeft: hasIconsLeft, isExpanded: isExpanded, size: controlSize, className: controlClassName, children: content }));
     }
     const messageEl = message ? jsxRuntime.jsx("p", { className: helpClass, children: message }) : null;
     if (!insideField) {
-        return (jsxRuntime.jsxs(Field, { label: label, labelSize: labelSize, labelProps: labelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
+        return (jsxRuntime.jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
     }
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [content, messageEl] }));
 });
@@ -7785,16 +7853,22 @@ fieldClassName, controlClassName,
 ...textAreaProps }, ref) => {
     const insideField = useInsideField();
     const insideControl = useInsideControl();
+    const { controlId, fieldLabelProps } = useAutoLabelId({
+        label,
+        id: textAreaProps.id,
+        labelProps,
+        rendersLabel: !insideField,
+    });
     const helpClass = usePrefixedClassNames('help', {
         [`is-${messageColor}`]: !!messageColor,
     });
-    let content = jsxRuntime.jsx(TextAreaBase, { ref: ref, ...textAreaProps });
+    let content = jsxRuntime.jsx(TextAreaBase, { ref: ref, id: controlId, ...textAreaProps });
     if (!insideControl) {
         content = (jsxRuntime.jsx(Control, { isLoading: controlIsLoading, size: controlSize, className: controlClassName, children: content }));
     }
     const messageEl = message ? jsxRuntime.jsx("p", { className: helpClass, children: message }) : null;
     if (!insideField) {
-        return (jsxRuntime.jsxs(Field, { label: label, labelSize: labelSize, labelProps: labelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
+        return (jsxRuntime.jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
     }
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [content, messageEl] }));
 });
@@ -9471,12 +9545,19 @@ DateInputBase.displayName = 'DateInputBase';
 const DateInput = React.forwardRef(({ label, labelSize, labelProps, horizontal, iconLeft, iconRight, iconLeftName = 'calendar', iconRightName, iconLeftSize, iconRightSize, hasIconsLeft, hasIconsRight, isLoading, isExpanded, controlSize, message, messageColor, fieldClassName, controlClassName, ...baseProps }, ref) => {
     const insideField = useInsideField();
     const insideControl = useInsideControl();
+    const { controlId, fieldLabelProps } = useAutoLabelId({
+        label,
+        id: baseProps.id,
+        labelProps,
+        // Inline mode renders a bare calendar with no input to label.
+        rendersLabel: !insideField && !baseProps.inline,
+    });
     const helpClass = usePrefixedClassNames('help', {
         [`is-${messageColor}`]: !!messageColor,
     });
     // The right-side launcher is on by default; suppress it while the Control
     // shows its loading spinner (also on the right) unless explicitly set.
-    let content = (jsxRuntime.jsx(DateInputBase, { ref: ref, ...baseProps, triggerIcon: baseProps.triggerIcon ?? !isLoading }));
+    let content = (jsxRuntime.jsx(DateInputBase, { ref: ref, id: controlId, ...baseProps, triggerIcon: baseProps.triggerIcon ?? !isLoading }));
     // Inline mode renders a bare calendar with no input, so the Control's
     // icon-left container has nothing to anchor to. Skip the Control wrap.
     if (!insideControl && !baseProps.inline) {
@@ -9484,7 +9565,7 @@ const DateInput = React.forwardRef(({ label, labelSize, labelProps, horizontal,
     }
     const messageEl = message ? jsxRuntime.jsx("p", { className: helpClass, children: message }) : null;
     if (!insideField) {
-        return (jsxRuntime.jsxs(Field, { label: label, labelSize: labelSize, labelProps: labelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
+        return (jsxRuntime.jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
     }
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [content, messageEl] }));
 });
@@ -10555,12 +10636,19 @@ TimeInputBase.displayName = 'TimeInputBase';
 const TimeInput = React.forwardRef(({ label, labelSize, labelProps, horizontal, iconLeft, iconRight, iconLeftName = 'clock', iconRightName, iconLeftSize, iconRightSize, hasIconsLeft, hasIconsRight, isLoading, isExpanded, controlSize, message, messageColor, fieldClassName, controlClassName, ...baseProps }, ref) => {
     const insideField = useInsideField();
     const insideControl = useInsideControl();
+    const { controlId, fieldLabelProps } = useAutoLabelId({
+        label,
+        id: baseProps.id,
+        labelProps,
+        // Inline mode renders a bare panel with no input to label.
+        rendersLabel: !insideField && !baseProps.inline,
+    });
     const helpClass = usePrefixedClassNames('help', {
         [`is-${messageColor}`]: !!messageColor,
     });
     // The right-side launcher is on by default; suppress it while the Control
     // shows its loading spinner (also on the right) unless explicitly set.
-    let content = (jsxRuntime.jsx(TimeInputBase, { ref: ref, ...baseProps, triggerIcon: baseProps.triggerIcon ?? !isLoading }));
+    let content = (jsxRuntime.jsx(TimeInputBase, { ref: ref, id: controlId, ...baseProps, triggerIcon: baseProps.triggerIcon ?? !isLoading }));
     // Inline mode renders a bare panel with no input, so the Control's
     // icon-left container has nothing to anchor to. Skip the Control wrap.
     if (!insideControl && !baseProps.inline) {
@@ -10568,7 +10656,7 @@ const TimeInput = React.forwardRef(({ label, labelSize, labelProps, horizontal,
     }
     const messageEl = message ? jsxRuntime.jsx("p", { className: helpClass, children: message }) : null;
     if (!insideField) {
-        return (jsxRuntime.jsxs(Field, { label: label, labelSize: labelSize, labelProps: labelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
+        return (jsxRuntime.jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
     }
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [content, messageEl] }));
 });
@@ -10844,12 +10932,19 @@ DateTimeInputBase.displayName = 'DateTimeInputBase';
 const DateTimeInput = React.forwardRef(({ label, labelSize, labelProps, horizontal, iconLeft, iconRight, iconLeftName = 'calendar-alt', iconRightName, iconLeftSize, iconRightSize, hasIconsLeft, hasIconsRight, isLoading, isExpanded, controlSize, message, messageColor, fieldClassName, controlClassName, ...baseProps }, ref) => {
     const insideField = useInsideField();
     const insideControl = useInsideControl();
+    const { controlId, fieldLabelProps } = useAutoLabelId({
+        label,
+        id: baseProps.id,
+        labelProps,
+        // Inline mode renders a bare picker with no input to label.
+        rendersLabel: !insideField && !baseProps.inline,
+    });
     const helpClass = usePrefixedClassNames('help', {
         [`is-${messageColor}`]: !!messageColor,
     });
     // The right-side launcher is on by default; suppress it while the Control
     // shows its loading spinner (also on the right) unless explicitly set.
-    let content = (jsxRuntime.jsx(DateTimeInputBase, { ref: ref, ...baseProps, triggerIcon: baseProps.triggerIcon ?? !isLoading }));
+    let content = (jsxRuntime.jsx(DateTimeInputBase, { ref: ref, id: controlId, ...baseProps, triggerIcon: baseProps.triggerIcon ?? !isLoading }));
     // Inline mode renders a bare picker with no input, so the Control's
     // icon-left container has nothing to anchor to. Skip the Control wrap.
     if (!insideControl && !baseProps.inline) {
@@ -10857,7 +10952,7 @@ const DateTimeInput = React.forwardRef(({ label, labelSize, labelProps, horizont
     }
     const messageEl = message ? jsxRuntime.jsx("p", { className: helpClass, children: message }) : null;
     if (!insideField) {
-        return (jsxRuntime.jsxs(Field, { label: label, labelSize: labelSize, labelProps: labelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
+        return (jsxRuntime.jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
     }
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [content, messageEl] }));
 });