@cube-dev/ui-kit 0.173.0 → 0.175.0

package/dist/utils/is-dev-env.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.175.0 | Cube Dev Team */
 //#region src/utils/is-dev-env.ts
 function isDevEnv() {
 	if (typeof window !== "undefined" && window.localStorage) try {

package/dist/utils/modules.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.175.0 | Cube Dev Team */
 //#region src/utils/modules.ts
 function extractModule(promise) {
 	return promise.then((module) => module.default || module);

package/dist/utils/promise.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.175.0 | Cube Dev Team */
 //#region src/utils/promise.ts
 function timeout(ms = 30) {
 	return new Promise((resolve) => {

package/dist/utils/raf.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.175.0 | Cube Dev Team */
 //#region src/utils/raf.ts
 /**
 * Chains N requestAnimationFrame calls and returns a cancel function.

package/dist/utils/random.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.175.0 | Cube Dev Team */
 //#region src/utils/random.ts
 function random(min, max) {
 	const realMin = min < max ? min : max;

package/dist/utils/range.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.175.0 | Cube Dev Team */
 //#region src/utils/range.ts
 function range(count) {
 	return Array.from({ length: count }, (_, i) => i);

package/dist/utils/react/RenderCache.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.175.0 | Cube Dev Team */
 import { useRef } from "react";
 import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
 

package/dist/utils/react/Slots.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.175.0 | Cube Dev Team */
 import { mergeProps } from "./mergeProps.js";
 import { Children, cloneElement, createContext, useContext, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/utils/react/chain.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.175.0 | Cube Dev Team */
 //#region src/utils/react/chain.ts
 /**
 * Calls all functions in the order they were chained with the same arguments.

package/dist/utils/react/disabledProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.175.0 | Cube Dev Team */
 //#region src/utils/react/disabledProps.ts
 /**
 * Tags where `disabled` is a real HTML attribute. Browsers refuse to dispatch

package/dist/utils/react/forwardRefWithGenerics.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.175.0 | Cube Dev Team */
 //#region src/utils/react/forwardRefWithGenerics.tsx
 /**
 * A helper for creating forwardRef components with generic types.

package/dist/utils/react/index.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.175.0 | Cube Dev Team */
 import { chain } from "./chain.js";
 import { getDisabledElementProps, omitActivationEventProps } from "./disabledProps.js";
 import { forwardRefWithGenerics } from "./forwardRefWithGenerics.js";

package/dist/utils/react/interactions.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.175.0 | Cube Dev Team */
 import { useState } from "react";
 import { useFocus, useFocusVisible } from "react-aria";
 

package/dist/utils/react/isTextOnly.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.175.0 | Cube Dev Team */
 import { Children, isValidElement } from "react";
 
 //#region src/utils/react/isTextOnly.ts

package/dist/utils/react/mapProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.175.0 | Cube Dev Team */
 //#region src/utils/react/mapProps.ts
 /** Converts AriaButtonProps to CubeButtonProps */
 function ariaToCubeButtonProps(props) {

package/dist/utils/react/mergeProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.175.0 | Cube Dev Team */
 import { chain } from "./chain.js";
 import { mergeIds } from "./useId.js";
 import { mergeStyles } from "@tenphi/tasty";

package/dist/utils/react/nullableValue.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.175.0 | Cube Dev Team */
 //#region src/utils/react/nullableValue.ts
 function castNullableStringValue(props) {
 	return castNullableField(props, ["value", "defaultValue"], "string", (v) => String(v));

package/dist/utils/react/resolveIcon.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.175.0 | Cube Dev Team */
 //#region src/utils/react/resolveIcon.ts
 /**
 * Resolves a dynamic icon prop to its content and slot state.

package/dist/utils/react/sharedStore.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.175.0 | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { useSyncExternalStore } from "react";
 

package/dist/utils/react/useBufferedValue.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.175.0 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "./useLayoutEffect.js";
 import { useCallback, useRef, useState } from "react";
 

package/dist/utils/react/useCombinedRefs.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.175.0 | Cube Dev Team */
 import { useEffect, useRef } from "react";
 
 //#region src/utils/react/useCombinedRefs.ts

package/dist/utils/react/useControlledFocusVisible.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.175.0 | Cube Dev Team */
 import { createSharedStore } from "./sharedStore.js";
 import { useEffect } from "react";
 import { useFocusVisible } from "react-aria";

package/dist/utils/react/useEventBus.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.175.0 | Cube Dev Team */
 import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef } from "react";
 
 //#region src/utils/react/useEventBus.ts

package/dist/utils/react/useId.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.175.0 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "./useLayoutEffect.js";
 import { useEffect, useRef, useState } from "react";
 import { useSSRSafeId } from "@react-aria/ssr";

package/dist/utils/react/useIsDarwin.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.175.0 | Cube Dev Team */
 import { useEffect, useState } from "react";
 
 //#region src/utils/react/useIsDarwin.ts

package/dist/utils/react/useKeySymbols.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.175.0 | Cube Dev Team */
 import { useIsDarwin } from "./useIsDarwin.js";
 import { useMemo } from "react";
 

package/dist/utils/react/useLayoutEffect.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.175.0 | 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.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.175.0 | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { useCallback, useSyncExternalStore } from "react";
 

package/dist/utils/react/useMergeStyles.js

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

package/dist/utils/react/usePopoverSync.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.175.0 | Cube Dev Team */
 import { EventBusContext, useEventBus } from "./useEventBus.js";
 import { useCallback, useContext, useEffect, useRef } from "react";
 

package/dist/utils/react/useQaProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.175.0 | 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.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.175.0 | 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.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.175.0 | Cube Dev Team */
 import { useEffect, useState } from "react";
 
 //#region src/utils/react/useViewportSize.ts

package/dist/utils/react/wrapNodeIfPlain.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.175.0 | Cube Dev Team */
 import { isValidElement } from "react";
 import { isFragment } from "react-is";
 

package/dist/utils/selection.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.175.0 | 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.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.175.0 | Cube Dev Team */
 //#region src/utils/styles.ts
 /**
 * Split properties into style and non-style properties.

package/dist/utils/tree.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.175.0 | 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.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.175.0 | Cube Dev Team */
 //#region src/utils/warnings.ts
 const SUGGESTED_PROP_MAP = {
 	disabled: "isDisabled",

package/dist/version.js

@@ -1,6 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.175.0 | Cube Dev Team */
 //#region src/version.ts
-const VERSION = "0.173.0";
+const VERSION = "0.175.0";
 const TASTY_VERSION = "3.5.0";
 if (typeof window !== "undefined") {
 	const version = VERSION;

package/docs/FieldProperties.md

@@ -25,9 +25,31 @@ When used inside a [Form](./components/form/Form.md), these properties are autom
 
 ## Necessity Indicators
 
-- **`isRequired`** `boolean` (default: `false`) — Whether user input is required before form submission.
-- **`necessityIndicator`** `'icon' | 'label'` — Type of necessity indicator shown next to the label.
-- **`necessityLabel`** `ReactNode` — Custom text for the necessity indicator (e.g., "Required" or "Optional").
+- **`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.
+- **`isOptional`** `boolean` (default: `false`) — Marks the label with a quiet `(optional)` note. Presentational only: it changes no validation behaviour, and it is ignored when the field is required.
+- **`necessityIndicator`** `'icon' | 'label' | null` (default: `icon`) — Shape of the marker. `'icon'` renders the asterisk, `'label'` the `(required)` text, `null` suppresses it. `(optional)` has no icon form and always renders as text.
+- **`requiredMark`** `boolean` (default: `true`) — Set it to `false` — usually on the `Form` — to drop the required marker across fields that ask for one.
+
+**The marker is opt-in.** A `{ required: true }` rule states how the field _behaves_: it is what validation runs, and `aria-required` is its programmatic mirror, so both stay in place. It does not decorate the label. Pass `isRequired` when you want the marker too — it adds the rule for you, so the two are interchangeable as far as validation goes:
+
+```jsx
+{/* Validated and announced as required, but the label is left alone */}
+<TextInput name="email" label="Email" rules={[{ required: true }]} />
+
+{/* The same validation, plus the marker */}
+<TextInput name="email" label="Email" isRequired />
+
+{/* Asking for the marker on a rule-required field, without repeating the rule */}
+<TextInput
+  name="email"
+  label="Email"
+  necessityIndicator="icon"
+  rules={[{ required: true }]}
+/>
+
+{/* Optional is a note, never a rule */}
+<TextInput name="nickname" label="Nickname" isOptional />
+```
 
 ## State
 

package/docs/components/form/Field.md

@@ -23,9 +23,9 @@ The Field component is a **legacy wrapper** for form inputs that provides field-
 - **`defaultValue`** `string` — Default field value
 - **`rules`** — Validation rules array
 - **`labelPosition`** `'top' | 'side' | 'split'` (default: `top`) — Position of the field label
-- **`necessityIndicator`** `'icon' | 'label'` — Type of necessity indicator
-- **`necessityLabel`** `string` — Custom necessity label text
-- **`isRequired`** `boolean` (default: `false`) — Whether the field is required
+- **`necessityIndicator`** `'icon' | 'label' | null` — Type of necessity indicator
+- **`isRequired`** `boolean` (default: `false`) — Whether the field is required. Marks the label, unlike a bare `required` rule
+- **`isOptional`** `boolean` (default: `false`) — Marks the label with an `(optional)` note
 - **`isDisabled`** `boolean` (default: `false`) — Whether the field is disabled
 - **`isLoading`** `boolean` (default: `false`) — Whether the field is in loading state
 - **`isHidden`** `boolean` (default: `false`) — Whether the field is hidden
@@ -85,14 +85,14 @@ These properties allow direct style application without using the `styles` prop:
 ### Presentation Properties
 
 - **`labelPosition`** `'top' | 'side'` — Position of the field label
-- **`necessityIndicator`** `'icon' | 'label'` — Type of necessity indicator
-- **`necessityLabel`** `string` — Custom necessity label text
+- **`necessityIndicator`** `'icon' | 'label' | null` — Type of necessity indicator
+- **`isOptional`** `boolean` — Marks the label with an `(optional)` note
 - **`labelProps`** `object` — Additional props for the label element
 - **`labelSuffix`** `ReactNode` — Content to display after the label
 
 ### State Properties
 
-- **`isRequired`** `boolean` — Whether the field is required
+- **`isRequired`** `boolean` — Whether the field is required. Marks the label, unlike a bare `required` rule
 - **`isDisabled`** `boolean` — Whether the field is disabled
 - **`isLoading`** `boolean` — Whether the field is in loading state
 - **`isReadOnly`** `boolean` — Whether the field is read-only

package/docs/components/form/Form.md

@@ -33,8 +33,7 @@ These properties are inherited by all input components within the form:
 - **`labelPosition`** `'top' | 'side' | 'split'` (default: `top`) — Where to place labels relative to inputs. `'top'` places labels above inputs, `'side'` places labels beside inputs with fixed width, `'split'` places labels and inputs on opposite sides without fixed label width
 - **`labelStyles`** `Styles` — Styles applied to field labels
 - **`requiredMark`** `boolean` (default: `true`) — Whether to show required field indicators
-- **`necessityIndicator`** `'icon' | 'label'` (default: `icon`) — Type of necessity indicator
-- **`necessityLabel`** `ReactNode` — Custom label to replace the default necessity indicator text
+- **`necessityIndicator`** `'icon' | 'label' | null` (default: `icon`) — Type of necessity indicator. `null` suppresses it
 - **`isReadOnly`** `boolean` (default: `false`) — Whether fields are read-only by default
 - **`isInvalid`** `boolean` — Invalid state for all fields
 - **`isValid`** `boolean` — Valid state for all fields
@@ -168,7 +167,8 @@ All input components within a Form accept these field-related properties:
 - **`description`** `ReactNode` — Help text displayed below the field
 - **`errorMessage`** `ReactNode` — Error message displayed when validation fails
 - **`rules`** `ValidationRule[]` — Validation rules array (see [Validation Rules](#validation-rules))
-- **`isRequired`** `boolean` — Whether the field is required
+- **`isRequired`** `boolean` — Whether the field is required. Marks the label, unlike a bare `required` rule — see [Necessity Indicators](../../FieldProperties.md#necessity-indicators)
+- **`isOptional`** `boolean` — Marks the label with an `(optional)` note. Presentational only
 - **`extra`** `ReactNode` — Additional content displayed next to the label
 - **`tooltip`** `ReactNode` — Tooltip content for the field label
 - **`labelSuffix`** `ReactNode` — Content appended after the label

package/docs/components/layout/Board.md

@@ -146,11 +146,25 @@ An aligned board never shrinks its rows, so pair it with `isAutoHeight` on the c
 - **`isResizable`** `boolean` (default: `true`) — Enable resizing for all widgets. Same ceiling semantics as `isDraggable`.
 - **`isDroppable`** `boolean` (default: `true`) — Whether the board accepts widgets dropped from _other_ boards. `false` does not affect dragging within the board.
 - **`resizeHandles`** `ResizeHandleAxis[]` (default: `['se']`) — Which resize handles to show. Corner handles (`ne`/`nw`/`se`/`sw`) show an angle grip; edge handles (`n`/`s`/`e`/`w`) show a dotted grip. Both are revealed on hover/focus/resize. A single edge (e.g. `['e']` or `['s']`) gives a horizontally- or vertically-only resizable widget.
-- **`resizeGripPlacement`** `'inside' | 'corner'` (default: `'inside'`) — Where the corner grips sit. `'inside'` tucks each one into the widget box; `'corner'` centres it on the widget's corner, so it lines up with a control centred on the opposite corner. Only affects corner handles — a dotted edge grip always stays inside. A corner-placed grip is drawn _outside_ the widget (a widget clips its own content, which would otherwise cut the grip in half), so it needs the board to have at least half a grip's worth of `containerPadding` to show in full against the board's edge. Its hit-zone moves out with it and overhangs by the same half-grip, so the whole visible grip is grabbable and hovering it keeps it revealed — the trade is a ~5px band just outside each corner where a press starts a resize rather than a marquee. Can be overridden per widget.
+- **`resizeGripPlacement`** `'inside' | 'corner' | 'outside'` — Where a widget's resize grips sit. Unset, **it resolves itself from the widget's content**: a widget holding a nested `Board` gets `'outside'`, and every other widget gets `'inside'`. Set it to override that, per board or per widget.
+
+  - `'inside'` tucks each grip into the widget box. The hit-zone is a band along the edge, inside the widget, so it sits over the widget's own content — which is fine for a leaf widget and is why a container resolves the other way.
+  - `'outside'` puts every grip in the grid gutter beyond the widget's edge, as a padded control of its own: a pill along each edge, and the same corner angle the other two placements draw, stepped off the corner into the square where two gutters cross. The control **is** the hit-zone — one element, so what you see is exactly what you can grab — and it never covers the widget's own content or a neighbour's.
+  - `'corner'` centres a corner grip on the widget's corner, straddling the edge, so it lines up with a control centred on the opposite corner (`cornerChrome`). Its hit-zone reaches half a grip inward, matching the half-dot painted there, and outward as far as half the gutter allows. Edge axes stay `'inside'`.
+
+  Whichever placement applies, grips are revealed on hover, focus or resize, and **only one widget's at a time**: the pointer is inside every ancestor at once, so a container stands down while the pointer is on one of its children. To resize a child you go inside it; to resize its container you go to the container's outer edge.
+
+  An `'outside'` grip needs gutter to sit in — at least 8px of `margin` on each axis. Below that it keeps its size and overhangs the neighbouring widgets, and the board warns in development; raise `margin`, or set `resizeGripPlacement` explicitly to put the grips back inside. The corner angle is the one exception: it shrinks to whatever the gutter leaves it rather than reaching past it onto the diagonal neighbour, and reaches its full size at 12px of `margin`.
+
+  Why the resolution exists: an inner board with no `containerPadding` — which `isAligned` sets — puts its last child's corner on exactly the same point as its host widget's. With both widgets drawing grips in the same place, the container's hit-zone covered the child's and the bottom-right child could not be resized at all. Sending the container's affordance outward and the child's inward leaves the two nothing in common, so nothing has to be arbitrated. Where they do still overlap — an explicit `'corner'` or `'inside'` on a container, or a gutter too thin — a press goes to the **innermost** handle under the pointer, and a container thereby left with no way to resize itself warns in development.
+
 - **`dragCancel`** `string` (default: `BOARD_SELECTION_CANCEL`) — CSS selector for elements that must not start a pointer drag. Defaults to the same set `selectionCancel` uses, because a control inside a widget has to keep its own press whether or not the board supports selection — a board hosting interactive content needs no configuration for buttons, inputs, links and the common ARIA widget roles to stay usable. Pass your own selector to narrow or widen it, or `''` to let a drag start from anywhere. Does not affect keyboard moves. Can be overridden per widget.
 - **`dragHandle`** `string` — CSS selector for the only elements from which a pointer drag may start. Combines with `dragCancel` rather than replacing it: a drag needs a target inside `dragHandle` _and_ outside `dragCancel`. Can be overridden per widget.
 - **`showGridLines`** `boolean | 'drag' | 'any-drag'` (default: `false`) — Show grid lines behind the widgets. `true` always; `false` never; `'drag'` only while _this_ board is part of the active gesture — it owns the drag (as its source, or as the board the widget is currently over) or one of its own widgets is being resized; `'any-drag'` while any drag is in flight anywhere under a shared `Board.Provider`, so every board advertises itself as somewhere the widget could land. Under one `Board.Provider`, `'drag'` keeps boards a widget cannot land in quiet, and `'any-drag'` is the opt-in for the noisier, more informative version. A nested board that does not set this inherits an enabled ancestor's setting in drag-scoped form: an ancestor's `true` arrives as `'drag'` (a nested board shows lines during a drag, not permanently), while `'any-drag'` is inherited verbatim. An explicit `false` opts out of the inheritance.
 - **`isAligned`** `boolean` (default: `false`) — Align a nested board with its ancestor `Board`'s layout. Only takes effect when the board is nested inside another `Board`'s widget. When set, every cell matches the parent's cell size exactly, which means it takes over three of the board's own metrics: `rowHeight` and `margin` are ignored in favour of the parent's, and `cols` is ignored once the board has been measured (the column count is derived from the measured width at the parent's column pitch, so cells stay parent-sized as the container is resized) — `cols` only serves as the pre-measurement fallback. It never shrinks rows to fit, so pair it with an `isAutoHeight` container so the widget grows to fit its rows at that height.
+
+  Widgets already on the board keep their cells. Narrowing the container lowers the column count, but a widget whose columns now fall outside it is **not** re-flowed into the narrower grid — it holds its position and is clipped by the container's edge, and widening the container brings it back exactly as it was. This is deliberate: resizing a container is not a request to rearrange the widgets inside it, and a layout that reshuffled on the way down could not be restored on the way back up.
+
 - **`selectionMode`** `'none' | 'single' | 'multiple'` (default: `'none'`) — Whether widgets can be selected, and how many at a time. `'multiple'` also enables the marquee and rigid group movement.
 - **`selectedKeys`** `string[]` — Controlled selection. Keys are layout item ids (`LayoutItem.i`); keys with no matching layout item are silently ignored. Requires `selectionMode` other than `'none'`.
 - **`defaultSelectedKeys`** `string[]` — Initial selection for uncontrolled usage. Ignored when `selectedKeys` is set. An uncontrolled board also prunes keys of removed widgets and reports that through `onSelectionChange`; a controlled board leaves that to you.
@@ -175,7 +189,7 @@ An aligned board never shrinks its rows, so pair it with `isAutoHeight` on the c
 - **`isDraggable`** `boolean` — Disable dragging for this widget. Can only take away: it cannot re-enable dragging on a board with `isDraggable={false}`, nor on a `static` layout item.
 - **`isResizable`** `boolean` — Disable resizing for this widget. Same one-way semantics as `isDraggable`.
 - **`resizeHandles`** `ResizeHandleAxis[]` — Override the board's handles. Overridden in turn by the layout item's own `resizeHandles` — the one option where the layout item outranks `Board.Widget`.
-- **`resizeGripPlacement`** `'inside' | 'corner'` — Override the board's grip placement.
+- **`resizeGripPlacement`** `'inside' | 'corner' | 'outside'` — Override where this widget's grips sit, instead of letting it resolve from the widget's content.
 - **`minW`** `number` — Minimum width in grid columns. Used when the layout item omits `minW`; the resize handle stops here.
 - **`maxW`** `number` — Maximum width in grid columns. Used when the layout item omits `maxW`.
 - **`minH`** `number` — Minimum height in grid rows. Used when the layout item omits `minH`.
@@ -321,6 +335,10 @@ A control centred on a widget's corner with `cornerChrome`, drawn outside the wi
 
 Centre the resize grip on the widget's corner with `resizeGripPlacement="corner"`, so it lines up with a control centred on the opposite corner.
 
+### Nested board grips
+
+Grip placement resolving itself across a nesting boundary, with no `resizeGripPlacement` set anywhere: the widget holding a `Board` draws its grips outside, in the gutter, and the leaf widgets keep theirs inside. Hover a child and only its grips appear; hover the container's outer edge and only the container's do.
+
 ### Resolving a blocked drop
 
 On a free grid a drop onto occupied cells is refused. `collisionMode` resolves it instead: `'downscale'` shrinks the widget into whatever room is at the drop cell. Within one board, `'swap'` trades places with the widget already there. Across boards, the same mode downscales into an empty cell without exchanging destination widgets, and an occupied anchor commits the previewed cell instead of cancelling. None of these paths ever grows a widget. The examples below show all three behaviors.

package/docs/components/overlays/DialogForm.md

@@ -39,7 +39,6 @@ DialogForm combines [Dialog](./Dialog.md) and [Form](../form/Form.md) functional
 - **`labelStyles`** `Styles` — Styles for the label
 - **`requiredMark`** `boolean` — Whether the field presents required mark
 - **`necessityIndicator`** `NecessityIndicator` — The type of necessity indicator
-- **`necessityLabel`** `ReactNode` — Custom necessity label
 - **`isReadOnly`** `boolean` — Whether the form is read only
 - **`isInvalid`** `boolean` — Invalid state for all fields in the form
 - **`isValid`** `boolean` — Valid state for all fields in the form

package/docs/components/status/LoadingAnimation.md

@@ -37,6 +37,15 @@ These properties allow direct style application without using the `styles` prop:
 <LoadingAnimation size="large" />
 ```
 
+## Synchronised Playback
+
+Every instance shares one phase. The cube animation is pinned to the document timeline rather than to the moment the element mounted, which has two consequences worth relying on:
+
+- **A remount is invisible.** A loading page adds levels as they resolve, and each wrapper that appears above a running loader replaces its DOM node. The new node picks up the cycle where the old one left off instead of snapping back to the first frame.
+- **Loaders run in lockstep.** Several loaders on the same page — a page shell, a panel, a table inside it — move together, whenever each of them appeared.
+
+Nothing to configure. See the `StaggeredInstances` story for four loaders appearing 700ms apart, with a live readout of how far into the cycle each one is.
+
 ## Colors
 
 The cube's three faces come from the shared isometric-cube tokens (`#loading-face-1` … `#loading-face-3`), a near-neutral ramp positioned by a WCAG floor against `#surface`. Each face therefore keeps the same separation from the page in light, dark, and high contrast, and follows a re-seeded brand hue as a tint rather than as a color. There is no `color` prop to override — recolouring one face and not the others would break the shading.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.173.0",
+  "version": "0.175.0",
   "type": "module",
   "description": "UIKit for Cube Projects",
   "repository": {