@cube-dev/ui-kit 0.0.0-canary-9bde021 → 0.0.0-canary-22ee7cb

package/dist/utils/react/useKeySymbols.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9bde021 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-22ee7cb | 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-9bde021 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-22ee7cb | 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-9bde021 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-22ee7cb | 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-9bde021 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-22ee7cb | 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-9bde021 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-22ee7cb | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { c } from "react-compiler-runtime";
 

package/dist/utils/react/usePopoverSync.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9bde021 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-22ee7cb | Cube Dev Team */
 import { EventBusContext, useEventBus } from "./useEventBus.js";
 import { c } from "react-compiler-runtime";
 import { 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-9bde021 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-22ee7cb | 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-9bde021 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-22ee7cb | 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-9bde021 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-22ee7cb | 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-9bde021 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-22ee7cb | 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-9bde021 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-22ee7cb | 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-9bde021 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-22ee7cb | 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-9bde021 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-22ee7cb | 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-9bde021 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-22ee7cb | 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-9bde021 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-22ee7cb | Cube Dev Team */
 //#region src/version.ts
-const VERSION = "0.0.0-canary-9bde021";
+const VERSION = "0.0.0-canary-22ee7cb";
 const TASTY_VERSION = "3.9.2";
 if (typeof window !== "undefined") {
 	const version = VERSION;

package/docs/components/form/Form.md

@@ -155,6 +155,8 @@ A thrown/rejected save error appears through `Form.SubmitError`. Validation erro
 </DialogForm>
 ```
 
+A `Form` placed directly in a `Dialog`, wrapping its `Content` and `Footer`, lays itself out as the dialog's slot column: a flex column that grows into the dialog, lets `Content` scroll, and adds no space between the slots. That is the form's own `@in-dialog` state, so `styles` on the form still override it property by property. You can also name the state to change only the in-dialog case: `<Form styles={{ gap: { '': '2x', '@in-dialog': '1x' } }}>`. A form nested inside `Content` is an ordinary form.
+
 ## React Compiler
 
 The modern controller, subscriptions, input binding, and dialog workflows are tested with React Compiler on React 18 and 19. The published library remains uncompiled. Consumer render code must use `Form.useValue`, `Form.useFieldState`, or selectors to subscribe; imperative getters do not subscribe. This does not make legacy mutable instance reads Compiler-safe.

package/docs/components/overlays/Dialog.md

@@ -87,6 +87,17 @@ The `mods` property accepts the following modifiers you can override:
 
 - **`dismissable`** `boolean` — Applied when the dialog can be dismissed with close button or Escape key
 
+`Footer` inside a dialog carries one modifier of its own:
+
+- **`content-overflow`** `boolean` — Applied while the dialog's `Content` is taller than the room it has, i.e. while it scrolls. The footer draws its top border only then, so the line separates the actions from a body that continues beneath them and is absent under a body that fits.
+
+The body is the `Content` that is a direct child of the dialog or of a direct-child `<form>`. A `border` in the footer's own styles replaces the default, so a footer can keep the line always or never draw it:
+
+```jsx
+<Footer styles={{ border: 'top' }}>{/* line always */}</Footer>
+<Footer styles={{ border: false }}>{/* line never */}</Footer>
+```
+
 ## Variants
 
 ### Types
@@ -213,9 +224,25 @@ The `mods` property accepts the following modifiers you can override:
    </Dialog>
    ```
 
-3. **Accessibility**: Always provide a meaningful title for screen readers
-4. **Dismissal**: Use `isDismissable` for dialogs that users can close voluntarily
-5. **Focus Management**: Ensure focus moves to the most important action when dialog opens
+3. **Wrapping the slots in a form**: A `Form` may sit directly between `Dialog` and its slots, so the submit button is inside it. A `Form` placed there lays itself out as the dialog's slot column, so `Content` still scrolls and `Footer` still pins with no styles of your own:
+
+   ```jsx
+   <Dialog>
+     <Header><Title>Edit</Title></Header>
+     <Form>
+       <Content>{/* long body, scrolls */}</Content>
+       <Footer>
+         <Button type="primary" htmlType="submit">Save</Button>
+       </Footer>
+     </Form>
+   </Dialog>
+   ```
+
+   Only a **direct child** `Form` is treated this way. A form nested deeper, or a plain `<form>` element, is your own layout and is left alone. The layout is the form's own state rather than a rule in `Dialog`, so `styles` on the form still win: `<Form styles={{ gap: '1x' }}>` puts `1x` between the slots.
+
+4. **Accessibility**: Always provide a meaningful title for screen readers
+5. **Dismissal**: Use `isDismissable` for dialogs that users can close voluntarily
+6. **Focus Management**: Ensure focus moves to the most important action when dialog opens
 
 ## Integration with Overlays
 

package/docs/components/overlays/DialogForm.md

@@ -149,6 +149,7 @@ The parent owns `form` in this example. `preserve` keeps its draft on dismissal
 
 ## Behavior
 
+- Actions render in a pinned `Footer` beside the scrolling `Content`, so a long form scrolls its body while Submit and Cancel stay visible. The `<form>` wraps both slots, so the buttons are still inside it and native submit works. The footer draws a top line only while the body scrolls; a form that fits has none. Set `noActions` to supply your own.
 - Modern forms use the same callback precedence as `Form`: root callbacks override controller callbacks; omitted callbacks fall back to the controller's latest committed callbacks. Automatic closing works for both, including imperative `form.submit()`.
 - Invalid fields and rejected saves leave the dialog open. Include `Form.SubmitError` to display save failures. Submit stays enabled after validation errors by default so the user can retry.
 - In a popover, modern form actions keep the dialog open while validating or saving. This also covers custom actions inside the form; successful submission and explicit dismissal control when it closes.

package/package.json

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