@cube-dev/ui-kit 0.198.2 → 0.199.1

package/dist/utils/react/useBufferedValue.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.198.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "./useLayoutEffect.js";
 import { useCallback, useRef, useState } from "react";
 //#region src/utils/react/useBufferedValue.ts

package/dist/utils/react/useCombinedRefs.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.198.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
 import { c } from "react/compiler-runtime";
 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.198.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
 import { createSharedStore } from "./sharedStore.js";
 import { c } from "react/compiler-runtime";
 import { useEffect } from "react";

package/dist/utils/react/useEventBus.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.198.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
 import { c } from "react/compiler-runtime";
 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.198.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "./useLayoutEffect.js";
 import "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.198.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
 import { c } from "react/compiler-runtime";
 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.198.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
 import { useIsDarwin } from "./useIsDarwin.js";
 import { c } from "react/compiler-runtime";
 //#region src/utils/react/useKeySymbols.ts

package/dist/utils/react/useLayoutEffect.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.198.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
 import * as React$1 from "react";
 //#region src/utils/react/useLayoutEffect.tsx
 const useLayoutEffect$1 = typeof window !== "undefined" ? React$1.useLayoutEffect : React$1.useEffect;

package/dist/utils/react/useLocalStorage.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.198.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.1 | 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.198.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
 import { mergeStyles } from "@tenphi/tasty";
 import { useMemo } from "react";
 //#region src/utils/react/useMergeStyles.ts

package/dist/utils/react/useOverlayEscapeGuard.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.198.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.1 | 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.198.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.1 | 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.198.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.1 | 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.198.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.1 | 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.198.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
 import { c } from "react/compiler-runtime";
 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.198.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
 import { Fragment, isValidElement } from "react";
 //#region src/utils/react/wrapNodeIfPlain.ts
 function wrapNodeIfPlain(children, render) {

package/dist/utils/selection.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.198.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.1 | 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.198.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
 import { isSelector, mergeStyles } from "@tenphi/tasty";
 //#region src/utils/styles.ts
 function isRecord(value) {

package/dist/utils/tree.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.198.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.1 | 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.198.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
 import { isDevEnvOrTest } from "./is-dev-env.js";
 //#region src/utils/warnings.ts
 const SUGGESTED_PROP_MAP = {

package/dist/version.js

@@ -1,6 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.198.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
 //#region src/version.ts
-const VERSION = "0.198.2";
+const VERSION = "0.199.1";
 const TASTY_VERSION = "3.13.0";
 if (typeof window !== "undefined") {
 	const version = VERSION;

package/docs/Usage.md

@@ -55,7 +55,8 @@ These CSS custom properties are defined in `src/tokens/base.ts` and applied glob
 | `$fade-transition` | `200ms` | Fade animation duration |
 | `$large-radius` | `(1r + .5x)` | Larger radius for cards/dialogs |
 | `$card-radius` | `(1r + .5x)` | Card border radius |
-| `$min-dialog-size` | `min(288px, calc(100vw - 2*var(--gap)))` | Minimum dialog width |
+| `$dialog-max-size` | `calc(100dvw - 8x)`, `calc(100dvw - 4x)` up to 700px | Maximum dialog width |
+| `$min-dialog-size` | `min(288px, $dialog-max-size)` | Minimum dialog width |
 
 ## Spacing Tokens
 

package/docs/components/content/Layout.md

@@ -527,7 +527,7 @@ const dimensions = {
 </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.
+`dialogProps.styles` sizes the overlay shell; `dialogStyles` sizes its Dialog root. Both have independent default bounds, but a tray's Dialog never grows past its shell, so widen both. 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
 
@@ -709,7 +709,7 @@ function StickyPanelExample() {
 In `overlay` mode, a semi-transparent backdrop appears behind the panel. The panel is dismissed (when `isDismissable` is true, which is the default) when:
 
 - Clicking the backdrop overlay
-- Pressing Escape anywhere in the Layout
+- Pressing Escape anywhere in the Layout, unless a control inside already handled it (prevented its default), as a code editor does when it closes its autocomplete
 - Moving focus to the main content area
 
 Focus closes the panel only when it enters the main content from outside it, for example with a programmatic `focus()`, `Tab` from a control before the Layout, or `Shift+Tab` out of the panel when no other panel comes before it; moving between controls of the main content does not. Panels come after the main content in tab order, so `Tab` from the panel's last control leaves the Layout and keeps the panel open. Focus moving inside the panel, into a popover, menu or dialog opened from it, or into another `Layout.Panel` of the same Layout keeps it open. Other panels of the same Layout can sit under the backdrop; a click on them then closes the overlay panel, but `Tab` still reaches their controls. Opening the panel moves focus to its first control, unless focus already moved elsewhere as it opened (for example to a field with `autoFocus` inside it), so a menu or dialog that opened it can close without handing focus back to the main content. A panel already open when its Layout first renders leaves page focus alone. Closing the panel returns focus to the element that had it when the panel opened, if focus is still in the panel or was lost with it; focus moved elsewhere, by the user or in `onOpenChange`, stays there. If that element is gone by then, as a menu item is, move focus yourself in `onOpenChange`.
@@ -868,7 +868,7 @@ function ApplicationShell() {
 ### Keyboard Navigation
 
 - `Tab` - Navigate between interactive elements
-- An overlay panel closes on Escape or when focus enters the main content from outside it; focus moving inside it or into another panel of the same Layout keeps it open
+- An overlay panel closes on an Escape no control inside has handled (prevented its default), or when focus enters the main content from outside it; focus moving inside it or into another panel of the same Layout keeps it open. A handled Escape stops at the Layout, so an enclosing dialog stays open too
 - Panels come after the main content in tab order, so `Tab` from a panel's last control leaves the Layout
 - An overlay panel moves focus to its first control when it opens and returns it to the opener when it closes; in `dialog` mode the dialog manages focus, and other modes leave focus alone
 - Resize handlers can be focused and resized using arrow keys:

package/docs/components/overlays/Dialog.md

@@ -111,6 +111,22 @@ The body is the `Content` that is a direct child of the dialog or of a direct-ch
 - `medium` / `M` - Standard dialog for moderate content (479px width)
 - `large` / `L` - Large dialog for complex content (798px width)
 
+### Width
+
+Every size stays inside the screen: a dialog is at most `$dialog-max-size` wide, the viewport less a `4x` gutter on each side, or a `2x` one on screens up to 700px wide.
+
+`width` takes one value (`width="520px"`, `width="65x"`, `width={600}`, `width="max-content"`). It sets the dialog's preferred width, the `$dialog-size` token that `size` sets otherwise, and keeps that limit, so a fixed-width dialog still fits a phone. The limit follows the dialog's type: a modal, popover or fullscreen dialog keeps the `$dialog-max-size` gutter; a tray stays inside its shell (widen it with the container's `styles`), while a takeover or panel may span the viewport. A `width` also replaces the `$min-dialog-size` floor.
+
+To clamp the width yourself, set `styles.width` (`styles={{ width: 'initial 520px 100dvw' }}`). It replaces the whole width, limit included.
+
+```jsx
+{/* 520px on a wide screen, the screen less its gutter on a phone */}
+<Dialog width="520px">…</Dialog>
+
+{/* Exactly as written: min `initial`, width 520px, max the whole viewport */}
+<Dialog styles={{ width: 'initial 520px 100dvw' }}>…</Dialog>
+```
+
 ## Examples
 
 ### Basic Dialog

package/package.json

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