@cube-dev/ui-kit 0.0.0-canary-759f43d → 0.0.0-canary-b3fed8f

package/dist/utils/react/useId.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-759f43d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b3fed8f | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "./useLayoutEffect.js";
 import { c } from "react/compiler-runtime";
 import { useEffect, useRef, useState } from "react";

package/dist/utils/react/useIsDarwin.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-759f43d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b3fed8f | Cube Dev Team */
 import { c } from "react/compiler-runtime";
 import { useEffect, useState } from "react";
 

package/dist/utils/react/useKeySymbols.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-759f43d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b3fed8f | Cube Dev Team */
 import { useIsDarwin } from "./useIsDarwin.js";
 import { c } from "react/compiler-runtime";
 

package/dist/utils/react/useLayoutEffect.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-759f43d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b3fed8f | Cube Dev Team */
 import * as React$1 from "react";
 
 //#region src/utils/react/useLayoutEffect.tsx

package/dist/utils/react/useLocalStorage.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-759f43d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b3fed8f | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { c } from "react/compiler-runtime";
 import { useSyncExternalStore } from "react";

package/dist/utils/react/useMergeStyles.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-759f43d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b3fed8f | Cube Dev Team */
 import { mergeStyles } from "@tenphi/tasty";
 import { useMemo } from "react";
 

package/dist/utils/react/useOverlayEscapeGuard.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-759f43d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b3fed8f | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { c } from "react/compiler-runtime";
 import { getEventTarget, nodeContains } from "@react-aria/utils";

package/dist/utils/react/usePopoverSync.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-759f43d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b3fed8f | Cube Dev Team */
 import { EventBusContext, useEventBus } from "./useEventBus.js";
 import { c } from "react/compiler-runtime";
 import { useContext, useEffect, useEffectEvent, useRef } from "react";

package/dist/utils/react/useQaProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-759f43d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b3fed8f | Cube Dev Team */
 //#region src/utils/react/useQaProps.ts
 /**
 * Processes QA props.

package/dist/utils/react/useScheme.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-759f43d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b3fed8f | Cube Dev Team */
 import { useSyncExternalStore } from "react";
 
 //#region src/utils/react/useScheme.ts

package/dist/utils/react/useViewportSize.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-759f43d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b3fed8f | Cube Dev Team */
 import { c } from "react/compiler-runtime";
 import { useEffect, useState } from "react";
 

package/dist/utils/react/wrapNodeIfPlain.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-759f43d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b3fed8f | Cube Dev Team */
 import { Fragment, isValidElement } from "react";
 
 //#region src/utils/react/wrapNodeIfPlain.ts

package/dist/utils/selection.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-759f43d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b3fed8f | Cube Dev Team */
 //#region src/utils/selection.ts
 /**
 * Deduplicate/toggle keys in a selection: if a key appears twice it is

package/dist/utils/styles.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-759f43d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b3fed8f | Cube Dev Team */
 import { isSelector, mergeStyles } from "@tenphi/tasty";
 
 //#region src/utils/styles.ts

package/dist/utils/tree.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-759f43d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b3fed8f | Cube Dev Team */
 //#region src/utils/tree.ts
 function toFlatTree(tree, includingFolders) {
 	return tree.reduce((result, node) => {

package/dist/utils/warnings.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-759f43d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b3fed8f | Cube Dev Team */
 import { isDevEnvOrTest } from "./is-dev-env.js";
 
 //#region src/utils/warnings.ts

package/dist/version.js

@@ -1,6 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-759f43d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b3fed8f | Cube Dev Team */
 //#region src/version.ts
-const VERSION = "0.0.0-canary-759f43d";
+const VERSION = "0.0.0-canary-b3fed8f";
 const TASTY_VERSION = "3.9.9";
 if (typeof window !== "undefined") {
 	const version = VERSION;

package/docs/CreateComponent.md

@@ -425,6 +425,8 @@ export function Action(
 
 ## Form Integration
 
+Call `wrapWithField` consistently: it renders stable field chrome by default and handles `isBare` as the explicit opt-out. Do not infer presentation from a label, form binding or message content. Pass React Aria's label props to the wrapper so a supplied label remains associated with the control in both modes. Inner controls whose parent owns the field chrome should receive `isBare` to avoid nested fields.
+
 For input components that need to integrate with forms, see the [Field documentation](./components/form/Field.md) for comprehensive guidance on:
 
 - Form state management

package/docs/FieldProperties.md

@@ -20,16 +20,41 @@ For modern forms, follow the [use-case guide](./components/form/ModernForm.md).
 ## Labels & Description
 
 - **`label`** `ReactNode` — Label text displayed above or beside the input.
-- **`labelPosition`** `'top' | 'side' | 'split'` (default: `top`) — Position of the label relative to the input. With `side`, a field without a `label` has no label column, so its control starts at the field's left edge.
-- **`description`** `ReactNode` — Description text placed below the label. A field without a label shows it too, unless it is `isBare`.
-- **`isBare`** `boolean` — For inline use: a field without a `label` renders the bare control. Without `isBare`, such a field renders the field wrapper when it is bound to a form, whose validation errors need a place, or is passed `description`, `errorMessage` or `message`. A text prop counts whatever it holds at the moment, so the input keeps its place and its focus when a message comes and goes. A wrapped field is laid out by its wrapper, as a labelled one is: layout props on the input such as `flexGrow`, `width` or `gridArea` stay on the input, so set them in `fieldStyles` to place the field, or pass `isBare`. With `isBare` the texts are not shown, and the control keeps its invalid state (`aria-invalid` and the invalid styles). The error text is not linked to anything, though, so a screen reader says the field is invalid without saying why: show the reason some other way, such as a tooltip or a message for the whole row, and point `aria-describedby` at it. No effect on a field with a `label`.
-- **`forceField`** `boolean` — **Deprecated.** A field without a `label` now renders the field wrapper by itself when it is bound to a form or is passed `description`, `errorMessage` or `message`; set `isBare` to keep the bare control instead. `forceField` still forces the wrapper and warns once in development.
+- **`labelPosition`** `'top' | 'side' | 'split'` (default: `top`) — Position of the label relative to the input. Side and split layouts reserve a label column only when a label is present.
+- **`description`** `ReactNode` — Help text. It appears below a top label or the control when there is no visible label, and beside the control with a side or split label. It remains independent of the error message.
+- **`isBare`** `boolean` (default: `false`) — Render the control without field layout, description or message text. A supplied `label` remains as a visually hidden accessible label; label tooltips, suffixes and extra content are omitted. Form binding, invalid state and control styles still apply. Use this explicitly for inline controls or when a parent already renders their field chrome. Provide `aria-describedby` when the error is explained elsewhere. With `isBare` omitted or `false`, field chrome always renders, including for standalone inputs without a label. Message values never choose whether the wrapper exists, so adding or removing messages keeps the control mounted and focused. Layout props on the control stay there; use `fieldStyles` to place the entire field.
+- **`forceField`** `boolean` — **Deprecated.** Fields render chrome by default, so remove this prop. It has no presentation effect; `isBare` is the explicit opt-out even if `forceField` is also supplied.
 - **`extra`** `ReactNode` — Additional content displayed next to the label.
 - **`labelTooltip`** `ReactNode` — Content of an info badge shown next to the label. Only rendered when the field has a label. (Formerly `tooltip`. On most fields `tooltip` is gone; on `Select` and `Checkbox` it is the control's own tooltip, as on `Item` and `Button`.)
 - **`labelSuffix`** `ReactNode` — Content displayed after the label text.
 - **`labelProps`** `object` — Additional HTML props passed to the label element.
 - **`labelStyles`** `Styles` — Tasty styles for the label element.
 
+## Field presentation
+
+```jsx
+// Default chrome gives generated errors a place, even without a visible label.
+<TagInput aria-label="Recipients" />
+
+// A row that owns the label and error opts its inner control out explicitly.
+<TextInput isBare aria-label="Amount" aria-describedby="row-error" />
+
+// Suppress only the error slot; keep the label and description.
+<TextInput name="name" label="Name" description="Shown on invoices" errorMessage={null} />
+```
+
+The field wrapper stays in place when a label, description or message appears or disappears. Changing `isBare` changes the presentation structure and may remount the control; keep that mode stable while editing. Individual checkbox and radio options keep their group's inline presentation.
+
+### Field sizing and alignment
+
+Set `fieldStyles` to size the entire field, including its label, description and feedback. Control-level `width`, `styles` and `wrapperStyles` continue to size the control itself:
+
+```jsx
+<TextInput label="Name" fieldStyles={{ width: '40x' }} />
+```
+
+Fields without labels no longer reserve an empty side or split label column. If a row should intentionally align with neighbouring side labels, add `fieldStyles={{ padding: '$full-label-width left' }}`. For a nameless legacy `Form.Item`, put that padding on the item's `styles` instead; it owns the wrapper. Remove deprecated `forceField` when migrating these rows.
+
 ## Necessity Indicators
 
 - **`isRequired`** `boolean` (default: `false`) — Whether user input is required before form submission. Marks the label, sets `aria-required` on the input, and adds a `required` validation rule.
@@ -79,8 +104,8 @@ For modern forms, follow the [use-case guide](./components/form/ModernForm.md).
 - **`rulesKey`** `string` — Manual modern function revision. Skips validator/transform source comparison; declarative constraints are always compared. Update it when a function or its captures change.
 - **`errorPolicy`** `'first' | 'all'` — Modern rule error collection policy, inherited from the controller by default.
 - **`showValid`** `boolean` — Whether to show the valid state icon after successful validation.
-- **`errorMessage`** `ReactNode` — Error message always displayed in danger state, regardless of validation state.
-- **`message`** `ReactNode` — _(deprecated)_ Use `errorMessage` for errors and `description` for help text.
+- **`errorMessage`** `ReactNode` — Error text displayed in danger state, regardless of validation state. `undefined` allows the form-generated error or the deprecated `message` fallback. An explicit `null`, `false` or empty string suppresses the error text and its fallback, while the control retains its invalid state. The description remains visible.
+- **`message`** `ReactNode` — _(deprecated)_ Fallback text used only when `errorMessage` is `undefined`. Use `errorMessage` for errors and `description` for help text. `message={null}` does not suppress a generated `errorMessage`.
 
 ## Styling
 

package/docs/Usage.md

@@ -496,3 +496,5 @@ Inputs subscribe to their own values and errors. For other reactive UI, use `For
 ### Shared field integration
 
 Built-in inputs have field support; they do not need a `Field` wrapper. Modern `name` and `field` bindings, and legacy string `name` bindings, connect through `useFieldProps`. Custom controls use that hook and `wrapWithField`. [Field Properties](./FieldProperties.md) documents shared labels, validation, state, and presentation props.
+
+Fields render stable chrome by default, including without a visible label. Use `isBare` for inline controls or when a parent owns the field layout and feedback; a supplied label remains accessible but visually hidden. Message content never chooses whether the wrapper exists. `errorMessage={null}` suppresses error text and its fallback while preserving the description and invalid state.

package/docs/components/fields/TagInput.md

@@ -79,6 +79,13 @@ Supports [Base properties](../../BaseProperties.md)
 
 Supports all [Field properties](../../FieldProperties.md)
 
+A standalone TagInput renders field chrome by default, so refused values show their reason below the control and the input references that reason through `aria-describedby`, even without a visible `label`. No empty `message` prop is needed. A local rejection takes precedence over the ordinary field error until the draft is edited. With `isBare`, there is no visible message slot; rejection feedback is announced through the live region instead.
+
+```jsx
+<TagInput aria-label="Recipients" defaultValue={['ana@acme.com']} />
+<TagInput isBare aria-label="Inline recipients" defaultValue={['ana@acme.com']} />
+```
+
 ### Styling Properties
 
 #### styles

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.0.0-canary-759f43d",
+  "version": "0.0.0-canary-b3fed8f",
   "type": "module",
   "description": "UIKit for Cube Projects",
   "repository": {