@cube-dev/ui-kit 0.0.0-canary-bacd3ad → 0.0.0-canary-b768106

package/dist/utils/react/useControlledFocusVisible.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bacd3ad | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b768106 | 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.0.0-canary-bacd3ad | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b768106 | 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.0.0-canary-bacd3ad | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b768106 | 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.0.0-canary-bacd3ad | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b768106 | 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.0.0-canary-bacd3ad | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b768106 | 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.0.0-canary-bacd3ad | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b768106 | 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-bacd3ad | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b768106 | 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.0.0-canary-bacd3ad | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b768106 | 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.0.0-canary-bacd3ad | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b768106 | 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.0.0-canary-bacd3ad | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b768106 | 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-bacd3ad | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b768106 | 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-bacd3ad | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b768106 | 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.0.0-canary-bacd3ad | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b768106 | 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.0.0-canary-bacd3ad | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b768106 | 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-bacd3ad | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b768106 | 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.0.0-canary-bacd3ad | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b768106 | 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-bacd3ad | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b768106 | 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.0.0-canary-bacd3ad | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b768106 | Cube Dev Team */
 //#region src/version.ts
-const VERSION = "0.0.0-canary-bacd3ad";
+const VERSION = "0.0.0-canary-b768106";
 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,17 +146,11 @@ 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), and nothing clips it in turn, so it shows in full even on a widget flush against the board's edge. Its hit-zone is kept to what you can see: half a grip inward, matching the half of the dot painted there, plus as much outward as half the grid gutter allows — so it never covers a neighbour's content, and never covers its own widget's content beyond the dot. The trade is a small band just outside each corner where a press starts a resize rather than a marquee. Can be overridden per widget.
-
-  **In a nested board, two widgets can want the same corner.** An inner board with no `containerPadding` — which `isAligned` sets — puts its last child's corner exactly on its host widget's corner, so both have a resize hit-zone on the same point. The innermost one takes the press: the child stays resizable, and the container cannot be resized from that corner. Give a container widget an edge axis to fall back on (`resizeHandles={['se', 'e', 's']}`), or give the inner board some `containerPadding` so the corners stop coinciding. A container left with only corner axes warns in development the first time it yields.
-
+- **`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.
 - **`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.

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/package.json

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