@cube-dev/ui-kit 0.196.0 → 0.197.0

package/dist/utils/warnings.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.196.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.197.0 | 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.196.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.197.0 | Cube Dev Team */
 //#region src/version.ts
-const VERSION = "0.196.0";
+const VERSION = "0.197.0";
 const TASTY_VERSION = "3.9.9";
 if (typeof window !== "undefined") {
 	const version = VERSION;

package/docs/CreateComponent.md

@@ -19,6 +19,10 @@ Form-aware inputs use `useFieldProps` for both legacy instances and modern contr
 
 The [compiled custom-control example](https://github.com/cube-js/cube-ui-kit/blob/main/typecheck/consumer/modern-form-examples.tsx) shows explicit DOM forwarding, async validation, and default adoption. Shared input rule props accept existing legacy validators; use `ModernValidationRule` for strict modern success/error return types, and adapt legacy validators that resolve data before migrating them.
 
+## Style forwarding through overlays
+
+Forward consumer styles to the element that owns them. DialogContainer's `styles` targets the overlay content shell, while Dialog owns its own root styles. Layout.Panel keeps these channels explicit: `dialogProps.styles` for the shell and `dialogStyles` for its implicit Dialog, separate from inline panel `styles`. Avoid selectors that reach through the overlay to override its child.
+
 ## Core Concepts
 
 ### 1. Base Properties with `filterBaseProps`

package/docs/Usage.md

@@ -15,6 +15,10 @@ For styling engine internals see the [Tasty documentation](./tasty/usage.md). Ta
 
 Pass your router's `useHref` and `useNavigate` hooks through `Root`'s `navigation` adapter. `Menu.Item`, like `Button`, `ItemButton`, and `Link`, accepts `to` destinations. Its label and description expose native anchors for modified-click, middle-click and link context-menu commands; the complete row supports ordinary click and keyboard activation. Use `navigationOptions` for router options and `target`, `rel`, or `download` for native link behavior. Nested providers and overlays inherit the adapter unless they explicitly supply another one.
 
+## Overlay sizing
+
+DialogContainer accepts `type="tray"` and `styles` for its overlay content shell. Its child Dialog has separate styles and size bounds. Layout.Panel exposes those same channels through `dialogProps.styles` and `dialogStyles` in dialog mode; inline panel styles and stored width remain independent. Keep the tray type and change dimensions to expand it without remounting its content.
+
 ## React Compiler
 
 UI Kit ships components optimized with React Compiler and requires React and React DOM 19.3 or newer. Your application does not need to enable Compiler to use this build. Adoption is incremental: functions with known compatibility diagnostics remain unoptimized, and the legacy form's mutable render paths are explicitly excluded.

package/docs/components/content/Layout.md

@@ -271,7 +271,8 @@ Collapsible side panel with resizing, transitions, and multiple rendering modes.
 - **`isDialogOpen`** `boolean` — Controlled dialog state (mode="dialog")
 - **`defaultIsDialogOpen`** `boolean` (default: `false`) — Initial dialog state
 - **`onDialogOpenChange`** `(isOpen: boolean) => void` — Dialog state callback
-- **`dialogProps`** `CubeDialogContainerProps` — Props for dialog mode
+- **`dialogProps`** `CubeDialogContainerProps` — Props for DialogContainer in dialog mode, including `type="tray"` and overlay-shell `styles`
+- **`dialogStyles`** `Styles` — Styles for the inner Dialog root in dialog mode; inline panel `styles` remain independent
 - **`innerRef`** `ForwardedRef<HTMLDivElement>` — Ref for the inner content element
 - **`innerProps`** `HTMLAttributes<HTMLDivElement>` — Props to spread on the Inner sub-element
 
@@ -497,6 +498,35 @@ function ResizablePanelExample() {
 }
 ```
 
+### Expandable Panel Tray
+
+```jsx
+const dimensions = {
+  width: expanded ? '100dvw' : '(100dvw - 2x)',
+  height: expanded ? '100dvh' : '60dvh',
+};
+
+<Layout height="100dvh">
+  <Layout.Panel
+    side="right"
+    mode="dialog"
+    isDialogOpen={isOpen}
+    onDialogOpenChange={setIsOpen}
+    dialogProps={{ type: 'tray', styles: dimensions }}
+    dialogStyles={dimensions}
+  >
+    <Button onPress={() => setExpanded(!expanded)}>
+      {expanded ? 'Collapse' : 'Expand'}
+    </Button>
+    <Button onPress={() => setIsOpen(false)}>Close chat</Button>
+    {/* Conversation and composer */}
+  </Layout.Panel>
+  <Layout.Content>{/* Page content */}</Layout.Content>
+</Layout>
+```
+
+`dialogProps.styles` sizes the overlay shell; `dialogStyles` sizes its Dialog root. Both have independent default bounds. Keep the native tray type while expanding its dimensions to preserve mounted content, input selection and local state. Switching tray to a modal/fullscreen type remounts the overlay subtree. The tray retains native modal focus, backdrop and dismissal behavior in either size. Layout.Panel suppresses the built-in visible Close button; provide your own Close action. Its inline size and `sizeStorageKey` are independent of these dialog styles.
+
 ### Persistent Panel Size
 
 Use `sizeStorageKey` to persist panel size to localStorage. The size is automatically restored on mount.

package/docs/components/overlays/DialogContainer.md

@@ -17,7 +17,8 @@ A DialogContainer accepts a single Dialog as a child, and manages to show and hi
 ### Properties
 
 - **`children`** — The Dialog to display, if any
-- **`type`** `'modal' | 'fullscreen' | 'fullscreenTakeover' | 'panel'` (default: `modal`) — The type of Dialog that should be rendered
+- **`type`** `'modal' | 'tray' | 'fullscreen' | 'fullscreenTakeover' | 'panel'` (default: `modal`) — The type of Dialog that should be rendered
+- **`styles`** `Styles` — Styles for the overlay content shell
 - **`isDismissable`** `boolean` (default: `true`) — Whether the Dialog is dismissible
 - **`isKeyboardDismissDisabled`** `boolean` (default: `false`) — Whether pressing the escape key to close the dialog should be disabled
 - **`isOpen`** `boolean` — Whether the modal is open or not
@@ -26,15 +27,15 @@ A DialogContainer accepts a single Dialog as a child, and manages to show and hi
 
 ### Base Properties
 
-Supports [Base properties](../../BaseProperties.md)
+DialogContainer has no DOM root. Apply [Base properties](../../BaseProperties.md) to its child Dialog.
 
 ### Styling Properties
 
-DialogContainer has no styling capabilities.
+`styles` customizes the overlay content shell, matching DialogTrigger. Set the child Dialog's `styles` separately: the shell and Dialog have independent size limits. For an expandable tray, keep `type="tray"` and change both style maps; switching between tray and modal/fullscreen types replaces the overlay subtree.
 
 ### Style Properties
 
-These properties allow direct style application without using the `styles` prop:
+Set these direct style properties on the child Dialog. DialogContainer itself exposes only the `styles` map for its overlay shell:
 
 - **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
 - **Dimension:** `width`, `height`, `blockSize`, `inlineSize`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
@@ -46,6 +47,7 @@ These properties allow direct style application without using the `styles` prop:
 ### Types
 
 - `modal` - Standard modal dialog with backdrop (default)
+- `tray` - Bottom-aligned modal tray with backdrop
 - `fullscreen` - Takes up entire screen with padding
 - `fullscreenTakeover` - Fullscreen without padding
 - `panel` - Side panel overlay
@@ -127,6 +129,26 @@ function ConditionalDialog() {
 }
 ```
 
+### Custom-size Tray
+
+```jsx
+const dimensions = { width: '(100dvw - 2x)', height: '60dvh' };
+
+<DialogContainer
+  type="tray"
+  styles={dimensions}
+  isOpen={isOpen}
+  onDismiss={() => setIsOpen(false)}
+>
+  <Dialog isDismissable={false} styles={dimensions} aria-label="Chat">
+    <Button onPress={() => setIsOpen(false)}>Close chat</Button>
+    {/* Conversation and composer */}
+  </Dialog>
+</DialogContainer>
+```
+
+The Dialog's `isDismissable={false}` hides its built-in visible Close button. The container remains dismissable with Escape or an outside press. A tray is modal: its backdrop keeps the page visible but prevents interaction with it. To expand without remounting its content, keep the tray type and update both dimensions to `100dvw` / `100dvh`. Test the content with the supported mobile keyboards and short viewports; `dvh` follows the dynamic viewport, not every virtual-keyboard overlay.
+
 ### Non-dismissable Dialog
 
 ```jsx
@@ -198,12 +220,6 @@ function ConditionalDialog() {
 4. **Single Child**: Only pass one Dialog as a child to DialogContainer
 5. **Cleanup**: Ensure proper cleanup of dialog state when component unmounts
 
-## Suggested Improvements
-
-- Enhancement 1: Add support for dialog stacking and z-index management
-- Enhancement 2: Implement automatic focus restoration after dialog closes
-- Enhancement 3: Add support for custom backdrop click behavior
-
 ## Related Components
 
 - [DialogTrigger](./DialogTrigger.md) - Use when you have a specific trigger element

package/package.json

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