@cube-dev/ui-kit 0.207.0 → 0.209.0

package/dist/utils/react/Slots.js

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

package/dist/utils/react/chain.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.207.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.209.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.207.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.209.0 | Cube Dev Team */
 import { mergeProps } from "./mergeProps.js";
 //#region src/utils/react/disabledProps.ts
 /**

package/dist/utils/react/forwardRefWithGenerics.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.207.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.209.0 | Cube Dev Team */
 //#region src/utils/react/forwardRefWithGenerics.tsx
 /**
 * @deprecated Declare a ref prop on a generic component, or preserve an

package/dist/utils/react/index.d.ts

@@ -1,4 +1,5 @@
 
+import { DynamicIcon, IconRenderFn, ResolvedIcon, resolveIcon } from "./resolveIcon.js";
 import { chain } from "./chain.js";
 import { DisabledElementOptions, DisabledElementProps, getDisabledElementProps, omitActivationEventProps } from "./disabledProps.js";
 import { forwardRefWithGenerics } from "./forwardRefWithGenerics.js";
@@ -16,8 +17,7 @@ import { UsePopoverSyncOptions, useDismissParentPopover, usePopoverSync } from "
 import { UseControlledFocusVisibleResult, useControlledFocusVisible } from "./useControlledFocusVisible.js";
 import { RenderCache, RenderCacheProps } from "./RenderCache.js";
 import { useLocalStorage } from "./useLocalStorage.js";
-import { DynamicIcon, IconRenderFn, ResolvedIcon, resolveIcon } from "./resolveIcon.js";
 import { useMergeStyles } from "./useMergeStyles.js";
 import { UseBufferedValueOptions, UseBufferedValueResult, useBufferedValue } from "./useBufferedValue.js";
-import { modAttrs } from "@tenphi/tasty";
-export { ClearSlots, type ColorScheme, type DisabledElementOptions, type DisabledElementProps, type DynamicIcon, type EventBusContextValue, type EventBusListener, EventBusProvider, type EventBusProviderProps, type IconRenderFn, RenderCache, type RenderCacheProps, type ResolvedIcon, SlotProvider, type UseBufferedValueOptions, type UseBufferedValueResult, type UseControlledFocusVisibleResult, type UsePopoverSyncOptions, chain, forwardRefWithGenerics, getDisabledElementProps, isTextOnly, mergeProps, mergeRefs, modAttrs, omitActivationEventProps, resolveHighContrast, resolveIcon, resolveScheme, subscribeScheme, useBufferedValue, useCombinedRefs, useControlledFocusVisible, useDismissParentPopover, useEventBus, useEventListener, useHighContrast, useLayoutEffect, useLocalStorage, useMergeStyles, usePopoverSync, useQaProps, useScheme, useSlotProps, useViewportSize, wrapNodeIfPlain };
+import { modAttrs as modAttrs$1 } from "@tenphi/tasty";
+export { ClearSlots, type ColorScheme, type DisabledElementOptions, type DisabledElementProps, type DynamicIcon, type EventBusContextValue, type EventBusListener, EventBusProvider, type EventBusProviderProps, type IconRenderFn, RenderCache, type RenderCacheProps, type ResolvedIcon, SlotProvider, type UseBufferedValueOptions, type UseBufferedValueResult, type UseControlledFocusVisibleResult, type UsePopoverSyncOptions, chain, forwardRefWithGenerics, getDisabledElementProps, isTextOnly, mergeProps, mergeRefs, modAttrs$1 as modAttrs, omitActivationEventProps, resolveHighContrast, resolveIcon, resolveScheme, subscribeScheme, useBufferedValue, useCombinedRefs, useControlledFocusVisible, useDismissParentPopover, useEventBus, useEventListener, useHighContrast, useLayoutEffect, useLocalStorage, useMergeStyles, usePopoverSync, useQaProps, useScheme, useSlotProps, useViewportSize, wrapNodeIfPlain };

package/dist/utils/react/index.js

@@ -1,23 +1,23 @@
-/** @license MIT | @cube-dev/ui-kit v0.207.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.209.0 | Cube Dev Team */
 import { chain } from "./chain.js";
 import { useLayoutEffect } from "./useLayoutEffect.js";
 import { mergeProps } from "./mergeProps.js";
 import { ClearSlots, SlotProvider, useSlotProps } from "./Slots.js";
-import { getDisabledElementProps, omitActivationEventProps } from "./disabledProps.js";
-import { forwardRefWithGenerics } from "./forwardRefWithGenerics.js";
-import { isTextOnly } from "./isTextOnly.js";
 import { mergeRefs, useCombinedRefs } from "./useCombinedRefs.js";
-import { wrapNodeIfPlain } from "./wrapNodeIfPlain.js";
-import { useViewportSize } from "./useViewportSize.js";
-import { resolveHighContrast, resolveScheme, subscribeScheme, useHighContrast, useScheme } from "./useScheme.js";
-import { useQaProps } from "./useQaProps.js";
+import { getDisabledElementProps, omitActivationEventProps } from "./disabledProps.js";
 import { EventBusProvider, useEventBus, useEventListener } from "./useEventBus.js";
+import { resolveIcon } from "./resolveIcon.js";
 import { useDismissParentPopover, usePopoverSync } from "./usePopoverSync.js";
-import { useControlledFocusVisible } from "./useControlledFocusVisible.js";
-import { RenderCache } from "./RenderCache.js";
+import { resolveHighContrast, resolveScheme, subscribeScheme, useHighContrast, useScheme } from "./useScheme.js";
+import { useViewportSize } from "./useViewportSize.js";
+import { wrapNodeIfPlain } from "./wrapNodeIfPlain.js";
 import { useLocalStorage } from "./useLocalStorage.js";
-import { resolveIcon } from "./resolveIcon.js";
 import { useMergeStyles } from "./useMergeStyles.js";
+import { isTextOnly } from "./isTextOnly.js";
 import { useBufferedValue } from "./useBufferedValue.js";
-import { modAttrs } from "@tenphi/tasty";
-export { ClearSlots, EventBusProvider, RenderCache, SlotProvider, chain, forwardRefWithGenerics, getDisabledElementProps, isTextOnly, mergeProps, mergeRefs, modAttrs, omitActivationEventProps, resolveHighContrast, resolveIcon, resolveScheme, subscribeScheme, useBufferedValue, useCombinedRefs, useControlledFocusVisible, useDismissParentPopover, useEventBus, useEventListener, useHighContrast, useLayoutEffect, useLocalStorage, useMergeStyles, usePopoverSync, useQaProps, useScheme, useSlotProps, useViewportSize, wrapNodeIfPlain };
+import { forwardRefWithGenerics } from "./forwardRefWithGenerics.js";
+import { useQaProps } from "./useQaProps.js";
+import { useControlledFocusVisible } from "./useControlledFocusVisible.js";
+import { RenderCache } from "./RenderCache.js";
+import { modAttrs as modAttrs$1 } from "@tenphi/tasty";
+export { ClearSlots, EventBusProvider, RenderCache, SlotProvider, chain, forwardRefWithGenerics, getDisabledElementProps, isTextOnly, mergeProps, mergeRefs, modAttrs$1 as modAttrs, omitActivationEventProps, resolveHighContrast, resolveIcon, resolveScheme, subscribeScheme, useBufferedValue, useCombinedRefs, useControlledFocusVisible, useDismissParentPopover, useEventBus, useEventListener, useHighContrast, useLayoutEffect, useLocalStorage, useMergeStyles, usePopoverSync, useQaProps, useScheme, useSlotProps, useViewportSize, wrapNodeIfPlain };

package/dist/utils/react/interactions.js

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

package/dist/utils/react/isTextOnly.js

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

package/dist/utils/react/mapProps.js

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

package/dist/utils/react/overlayKeyPropagation.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.207.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.209.0 | Cube Dev Team */
 //#region src/utils/react/overlayKeyPropagation.ts
 /**
 * Keys whose final handling belongs to the overlay around a control, not to

package/dist/utils/react/programmaticFocus.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.207.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.209.0 | Cube Dev Team */
 //#region src/utils/react/programmaticFocus.ts
 /**
 * Telling focus the user moved from focus a component moved for them.

package/dist/utils/react/resolveIcon.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.207.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.209.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.207.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.209.0 | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { isDevEnv } from "../is-dev-env.js";
 import { c } from "react/compiler-runtime";

package/dist/utils/react/useBufferedValue.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.207.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.209.0 | 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.207.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.209.0 | 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.207.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.209.0 | 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.207.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.209.0 | 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.207.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.209.0 | 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.207.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.209.0 | 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.207.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.209.0 | 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.207.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.209.0 | 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.207.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.209.0 | 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.207.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.209.0 | 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.207.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.209.0 | 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/useOverlayEscapeGuard.js.map

@@ -1 +1 @@
-{"version":3,"file":"useOverlayEscapeGuard.js","names":["getEventTarget","nodeContains","useEvent","DOMAttributes","KeyboardEvent","OverlayDOMProps","useOverlayEscapeGuard","overlayProps","isOpen","$","_c","t0","event","key","isDefaultPrevented","stopPropagation","target","currentTarget","onKeyDown","preventDefault","t1","_c"],"sources":["../../../src/utils/react/useOverlayEscapeGuard.ts"],"sourcesContent":["import { getEventTarget, nodeContains } from '@react-aria/utils';\n\nimport { useEvent } from '../../_internal';\n\nimport type { DOMAttributes, KeyboardEvent } from 'react';\n\ntype OverlayDOMProps = DOMAttributes<any>;\n\n/**\n * Stops a CLOSED overlay from answering for `Escape` (CUB-4839), and keeps an\n * Escape already handled by a child inside its open overlay.\n *\n * `useOverlay`'s `Escape` handler calls `stopPropagation()` and\n * `preventDefault()` for every `Escape` it sees, and only THEN asks whether\n * this overlay is the topmost one allowed to act on it — unlike\n * `onInteractOutside`, which it gates on `isOpen` up front. An overlay that has\n * already closed therefore consumes the key and does nothing with it, so the\n * `Escape` meant for the Dialog around it closes nothing at all.\n *\n * That is reachable here because our overlays stay mounted for their exit\n * transition while still holding DOM focus: pick an option from a list inside a\n * Dialog and the very next `Escape` lands in the closing list.\n *\n * Passing `useOverlay` an `isKeyboardDismissDisabled` of its own does NOT work,\n * and that is the reason this exists. `DisplayTransition` preserves content\n * across an exit by replaying the children it stored while the overlay was\n * open, so every value that subtree captured — `isKeyboardDismissDisabled`\n * included — stays frozen at its open-state reading for exactly the window\n * this has to guard. `useEvent` gets around it by returning a handler whose\n * identity never changes while its body always runs the latest render's\n * closure, so the frozen copy still sees the current `isOpen`.\n */\nexport function useOverlayEscapeGuard<T extends OverlayDOMProps>(\n  overlayProps: T,\n  isOpen: boolean | undefined,\n): T {\n  const onKeyDown = useEvent((event: KeyboardEvent<any>) => {\n    // Decline it, so it reaches whoever can actually act on it.\n    if (event.key === 'Escape' && !isOpen) return;\n\n    // Code editors can close autocomplete by preventing default alone.\n    // Keep that Escape inside this overlay, including an enclosing dialog.\n    if (event.key === 'Escape' && event.isDefaultPrevented()) {\n      event.stopPropagation();\n      return;\n    }\n\n    // Aria's shortcut handler ignores physical DOM outsiders. A closing\n    // popup still bubbles Escape through its logical React portal ancestry.\n    // Let the open ancestor's handler retain its topmost-overlay check.\n    const target = getEventTarget(event);\n    if (event.key === 'Escape' && !nodeContains(event.currentTarget, target)) {\n      overlayProps.onKeyDown?.({\n        ...event,\n        currentTarget: target,\n        preventDefault: () => event.preventDefault(),\n        stopPropagation: () => event.stopPropagation(),\n      });\n      return;\n    }\n\n    overlayProps.onKeyDown?.(event);\n  });\n\n  return { ...overlayProps, onKeyDown };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,SAAOM,sBAAAC,cAAAC,QAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAA,IAAAC;CAAA,IAAAF,EAAA,OAAAD,UAAAC,EAAA,OAAAF,cAAA;EAIsBI,MAAAC,UAAA;GAEzB,IAAIA,MAAKC,QAAS,YAAd,CAA2BL,QAAM;GAIrC,IAAII,MAAKC,QAAS,YAAYD,MAAKE,mBAAoB,GAAC;IACtDF,MAAKG,gBAAiB;IAAC;GAAA;GAOzB,MAAAC,SAAehB,eAAeY,KAAK;GACnC,IAAIA,MAAKC,QAAS,YAAd,CAA2BZ,aAAaW,MAAKK,eAAgBD,MAAM,GAAC;IACtET,aAAYW,YAAa;KAAA,GACpBN;KAAKK,eACOD;KAAMG,sBACCP,MAAKO,eAAgB;KAACJ,uBACrBH,MAAKG,gBAAiB;IAC/C,CAAC;IAAC;GAAA;GAIJR,aAAYW,YAAaN,KAAK;EAAC;EAChCH,EAAA,KAAAD;EAAAC,EAAA,KAAAF;EAAAE,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CA1BD,MAAAS,YAAkBhB,SAASS,EA0B1B;CAAE,IAAAS;CAAA,IAAAX,EAAA,OAAAS,aAAAT,EAAA,OAAAF,cAAA;EAEIa,KAAA;GAAA,GAAKb;GAAYW;EAAY;EAACT,EAAA,KAAAS;EAAAT,EAAA,KAAAF;EAAAE,EAAA,KAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAA,OAA9BW;AAA8B"}
+{"version":3,"file":"useOverlayEscapeGuard.js","names":["getEventTarget","nodeContains","useEvent","DOMAttributes","KeyboardEvent","OverlayDOMProps","useOverlayEscapeGuard","overlayProps","isOpen","$","_c","t0","event","key","isDefaultPrevented","stopPropagation","target","currentTarget","onKeyDown","preventDefault","t1","_c"],"sources":["../../../src/utils/react/useOverlayEscapeGuard.ts"],"sourcesContent":["import { getEventTarget, nodeContains } from '@react-aria/utils';\n\nimport { useEvent } from '../../_internal/hooks/use-event';\n\nimport type { DOMAttributes, KeyboardEvent } from 'react';\n\ntype OverlayDOMProps = DOMAttributes<any>;\n\n/**\n * Stops a CLOSED overlay from answering for `Escape` (CUB-4839), and keeps an\n * Escape already handled by a child inside its open overlay.\n *\n * `useOverlay`'s `Escape` handler calls `stopPropagation()` and\n * `preventDefault()` for every `Escape` it sees, and only THEN asks whether\n * this overlay is the topmost one allowed to act on it — unlike\n * `onInteractOutside`, which it gates on `isOpen` up front. An overlay that has\n * already closed therefore consumes the key and does nothing with it, so the\n * `Escape` meant for the Dialog around it closes nothing at all.\n *\n * That is reachable here because our overlays stay mounted for their exit\n * transition while still holding DOM focus: pick an option from a list inside a\n * Dialog and the very next `Escape` lands in the closing list.\n *\n * Passing `useOverlay` an `isKeyboardDismissDisabled` of its own does NOT work,\n * and that is the reason this exists. `DisplayTransition` preserves content\n * across an exit by replaying the children it stored while the overlay was\n * open, so every value that subtree captured — `isKeyboardDismissDisabled`\n * included — stays frozen at its open-state reading for exactly the window\n * this has to guard. `useEvent` gets around it by returning a handler whose\n * identity never changes while its body always runs the latest render's\n * closure, so the frozen copy still sees the current `isOpen`.\n */\nexport function useOverlayEscapeGuard<T extends OverlayDOMProps>(\n  overlayProps: T,\n  isOpen: boolean | undefined,\n): T {\n  const onKeyDown = useEvent((event: KeyboardEvent<any>) => {\n    // Decline it, so it reaches whoever can actually act on it.\n    if (event.key === 'Escape' && !isOpen) return;\n\n    // Code editors can close autocomplete by preventing default alone.\n    // Keep that Escape inside this overlay, including an enclosing dialog.\n    if (event.key === 'Escape' && event.isDefaultPrevented()) {\n      event.stopPropagation();\n      return;\n    }\n\n    // Aria's shortcut handler ignores physical DOM outsiders. A closing\n    // popup still bubbles Escape through its logical React portal ancestry.\n    // Let the open ancestor's handler retain its topmost-overlay check.\n    const target = getEventTarget(event);\n    if (event.key === 'Escape' && !nodeContains(event.currentTarget, target)) {\n      overlayProps.onKeyDown?.({\n        ...event,\n        currentTarget: target,\n        preventDefault: () => event.preventDefault(),\n        stopPropagation: () => event.stopPropagation(),\n      });\n      return;\n    }\n\n    overlayProps.onKeyDown?.(event);\n  });\n\n  return { ...overlayProps, onKeyDown };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,SAAOM,sBAAAC,cAAAC,QAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAA,IAAAC;CAAA,IAAAF,EAAA,OAAAD,UAAAC,EAAA,OAAAF,cAAA;EAIsBI,MAAAC,UAAA;GAEzB,IAAIA,MAAKC,QAAS,YAAd,CAA2BL,QAAM;GAIrC,IAAII,MAAKC,QAAS,YAAYD,MAAKE,mBAAoB,GAAC;IACtDF,MAAKG,gBAAiB;IAAC;GAAA;GAOzB,MAAAC,SAAehB,eAAeY,KAAK;GACnC,IAAIA,MAAKC,QAAS,YAAd,CAA2BZ,aAAaW,MAAKK,eAAgBD,MAAM,GAAC;IACtET,aAAYW,YAAa;KAAA,GACpBN;KAAKK,eACOD;KAAMG,sBACCP,MAAKO,eAAgB;KAACJ,uBACrBH,MAAKG,gBAAiB;IAC/C,CAAC;IAAC;GAAA;GAIJR,aAAYW,YAAaN,KAAK;EAAC;EAChCH,EAAA,KAAAD;EAAAC,EAAA,KAAAF;EAAAE,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CA1BD,MAAAS,YAAkBhB,SAASS,EA0B1B;CAAE,IAAAS;CAAA,IAAAX,EAAA,OAAAS,aAAAT,EAAA,OAAAF,cAAA;EAEIa,KAAA;GAAA,GAAKb;GAAYW;EAAY;EAACT,EAAA,KAAAS;EAAAT,EAAA,KAAAF;EAAAE,EAAA,KAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAA,OAA9BW;AAA8B"}

package/dist/utils/react/usePopoverSync.js

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

package/dist/version.js

@@ -1,7 +1,7 @@
-/** @license MIT | @cube-dev/ui-kit v0.207.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.209.0 | Cube Dev Team */
 //#region src/version.ts
-const VERSION = "0.207.0";
-const TASTY_VERSION = "3.17.1";
+const VERSION = "0.209.0";
+const TASTY_VERSION = "3.18.0";
 if (typeof window !== "undefined") {
 	const version = VERSION;
 	const tastyVersion = TASTY_VERSION;

package/docs/Usage.md

@@ -447,7 +447,7 @@ An intended override takes a disable comment with its reason on the line before
 
 With this rule on, `tasty/no-styles-prop` can stay off, so the primitives keep their `styles`.
 
-The same `extends` gives the plugin's other rules the names UI Kit defines: its tokens, presets and recipes, and the `@dark`, `@hc` and `@reduced-motion` state aliases. `tasty/valid-color-token`, `tasty/valid-custom-property`, `tasty/valid-preset`, `tasty/valid-recipe`, `tasty/valid-state-key` and `tasty/no-unknown-state-alias` then report only names that don't exist. The tokens include the ones a component's docs offer you, to read inside that component or set on it, such as a dialog's `$dialog-padding-h` or a layout's `$content-padding`. A component's other custom properties are internal and can change, so the rules report them too. List what your app defines itself, in its own `configure()` or `tokens`, in its own config, which adds to the lists it extends:
+The same `extends` gives the plugin's other rules the names UI Kit defines: its tokens, presets and recipes, and the `@dark`, `@hc`, `@mobile` and `@reduced-motion` state aliases. `tasty/valid-color-token`, `tasty/valid-custom-property`, `tasty/valid-preset`, `tasty/valid-recipe`, `tasty/valid-state-key` and `tasty/no-unknown-state-alias` then report only names that don't exist. The tokens include the ones a component's docs offer you, to read inside that component or set on it, such as a dialog's `$dialog-padding-h` or a layout's `$content-padding`. A component's other custom properties are internal and can change, so the rules report them too. List what your app defines itself, in its own `configure()` or `tokens`, in its own config, which adds to the lists it extends:
 
 ```ts
 // tasty.config.ts
@@ -525,6 +525,20 @@ const Spinner = tasty({
 
 It follows the system preference alone, with no attribute opt-in.
 
+### Mobile
+
+`<Root>` also registers `@mobile`, a viewport narrower than 920px (`@media(w < 920px)`), the width below which the desktop layout stops fitting. `<Button collapseState>` collapses there. Use it for the same breakpoint in your own styles:
+
+```tsx
+const Toolbar = tasty({
+  styles: {
+    flow: { '': 'row', '@mobile': 'column' },
+  },
+});
+```
+
+An app that defines `@mobile` itself in `configure({ states })` replaces this one; Tasty warns in development when the two values differ. For a breakpoint of a container rather than the viewport, use a container query, such as `@(page, w < 864px)`.
+
 ## Icons
 
 Icons live in `src/icons/`. Use existing icons when possible; otherwise use `@tabler/icons-react`.

package/docs/components/actions/Button.md

@@ -22,6 +22,10 @@ A versatile action component that triggers commands and navigates users.
 - **`icon`** — Icon rendered before the content. Can be: ReactNode, `true` (empty slot), or function `({ loading, selected, ...mods }) => ReactNode | true`
 - **`rightIcon`** — Icon rendered after the content. Can be: ReactNode, `true` (empty slot), or function `({ loading, selected, ...mods }) => ReactNode | true`
 - **`children`** `ReactNode` — Button label or custom content
+- **`collapseState`** `boolean | string` — When the button collapses to fit a narrow window or container: `true` for `@mobile` (a viewport narrower than 920px), or any state or condition, such as `'@compact'`, `'@(page, w < 864px)'` or `'@media(w < 600px)'`. See [Collapsing](#collapsing)
+- **`isCollapsed`** `boolean` — Collapses the button from JavaScript. The button collapses when any of `collapseState`, `isCollapsed` and `autoCollapse` says so
+- **`autoCollapse`** `boolean` — Collapses the button when the row it sits in, its parent element, can't fit every child at full width, and expands it when the row can. See [Collapsing](#collapsing)
+- **`shortLabel`** `ReactNode` — The label shown while the button is collapsed, beside its icon if it has one
 - **`label`** `string` — **Deprecated.** Use `children` for visible text and `aria-label` for the accessible name of an icon-only button
 - **`tooltip`** `string | boolean | object` — Tooltip content. Use a string for simple text, `true` for auto tooltip on overflow, or an object with `{ title, auto, placement, ...tooltipProps }`
 - **`defaultTooltipPlacement`** `Placement` (default: `top`) — Default placement for the button's tooltip
@@ -75,6 +79,8 @@ The `mods` prop accepts the following modifiers you can override:
 - **`has-right-icon`** `boolean` — Indicates that the button has a trailing icon
 - **`single-icon`** `boolean` — Icon-only button without text
 - **`text-only`** `boolean` — Button has only text content, no icons
+- **`collapsed`** `boolean` — Collapsed by `isCollapsed` or `autoCollapse`. `collapseState` collapses through CSS, so it sets no modifier; read the `@collapsed` state instead
+- **`collapse`** `'icon' | 'label'` — What a collapsing button collapses to: its icon, or its `shortLabel`
 
 ## Variants
 
@@ -164,6 +170,45 @@ import { IconPlus } from '@tabler/icons-react';
 </Button>;
 ```
 
+### Collapsing
+
+A button can collapse to fit a narrow window or container. Collapsed, a button with an icon shows only the icon: its label stays its accessible name and shows as its tooltip. A button with a `shortLabel` shows that instead, beside its icon.
+
+```jsx
+{/* Icon only on `@mobile`, a viewport narrower than 920px */}
+<Button icon={<IconShare />} collapseState>
+  Share
+</Button>
+
+{/* Icon only while a named container is narrower than 864px */}
+<Button icon={<IconShare />} collapseState="@(page, w < 864px)">
+  Share
+</Button>
+
+{/* "Add" while collapsed */}
+<Button icon={<IconPlus />} collapseState shortLabel="Add">
+  Add new item
+</Button>
+
+{/* Collapsed from JavaScript */}
+<Button icon={<IconDownload />} isCollapsed={isCompact}>
+  Download CSV
+</Button>
+
+{/* Collapsed while its row can't fit every label */}
+<Space>
+  <Button icon={<IconCertificate />} autoCollapse>Certify</Button>
+  <Button icon={<IconDownload />} autoCollapse>Load all</Button>
+</Space>
+```
+
+- **The condition is CSS.** `collapseState` takes the same states and conditions as a `styles` map, and crossing it re-renders only the button, once, to turn its tooltip on or off. It becomes the button's `@collapsed` state, which a caller's `styles` can read too.
+- **A container condition needs its container.** `@(page, …)` reads the nearest ancestor named `page`. Where there is none, a dialog portaled out of the page say, the button keeps its full look.
+- **`autoCollapse` measures instead of using a breakpoint.** A breakpoint can't tell whether the labels fit: their length changes with the content and the language. `autoCollapse` collapses the button when its row, its parent element, can't fit every child at full width, and expands it when the row can. The row's width has to come from its own container, a block, `flex: 1` or a fixed width: a row as wide as its content always fits. A row that wraps or stacks its children makes room that way, so its buttons don't collapse. The buttons with `autoCollapse` in one row collapse together, and a sibling that grows or has an auto margin doesn't keep them collapsed.
+- **Any trigger collapses it.** `collapseState`, `isCollapsed` and `autoCollapse` combine: the button collapses when any of them says so.
+- **Something to collapse to.** A button with neither an icon nor a `shortLabel` has nothing to collapse to, and warns. Raw children, content other than text, don't collapse.
+- **A short label is the accessible name while it shows.** Keep it a shortened form of the full label, so the name still matches what a user sees.
+
 ### Link Button
 
 ```jsx

package/docs/components/actions/ButtonSplit.md

@@ -124,7 +124,7 @@ const [currentKey, setCurrentKey] = useState('deploy');
 
 ### Custom Mode
 
-Pass `children` to render arbitrary buttons with split-group styling (joined radius, collapsed borders). Set `type` and `theme` on the wrapper -- child buttons inherit them via context.
+Pass `children` to render arbitrary buttons with split-group styling (joined radius; outline buttons share one border, primary buttons are divided by a 1px gap that shows the background). Set `type` and `theme` on the wrapper -- child buttons inherit them via context.
 
 ```jsx
 import { Button, Menu } from '@cube-dev/ui-kit';

package/docs/components/fields/FileInput.md

@@ -19,7 +19,7 @@ A file input component that allows users to select and upload files through a cu
 - **`placeholder`** `string` — Text displayed when no file is selected
 - **`accept`** `string` — Comma-separated list of accepted file types
 - **`type`** `'file' | 'text'` (default: `file`) — How to process the selected file(s)
-- **`size`** `'small' | 'default' | 'large'` (default: `default`) — The size of the input
+- **`size`** `'small' | 'default' | 'large'` (default: `default`) — The size of the input: the same heights as text inputs (28, 32 and 40px)
 - **`inputStyles`** `Styles` — Custom styles for the file input element
 - **`inputProps`** `Props` — Direct props passed to the native file input element
 - **`onChange`** `function` — Callback fired when files are selected
@@ -38,11 +38,11 @@ Supports all [Field properties](../../FieldProperties.md)
 
 #### styles
 
-Styles the input element. Its style props place and size the field: see [Field properties](../../FieldProperties.md).
+Styles the input element, the box that opens the file dialog. It is drawn like the text inputs' box and fills the width of its field, as they do; narrow it with `controlWidth`. Its style props place and size the field: see [Field properties](../../FieldProperties.md).
 
 **Sub-elements:**
 
-- `Button` - The clickable button element for file selection
+- `Button` - The "Choose file" chip at the start of the box
 - `Placeholder` - Text shown when no file is selected
 - `Value` - Text showing the selected file name(s)
 - `Input` - The hidden native file input element
@@ -58,7 +58,11 @@ These properties allow direct style application without using the `styles` prop:
 
 The `mods` property accepts the following modifiers you can override:
 
-- **`drag-hover`** `boolean` — Whether files are being dragged over the component
+- **`drag-hover`** `boolean` — Whether files are being dragged over the component (never while disabled)
+- **`hovered`** `boolean` — Whether the pointer is over the component
+- **`pressed`** `boolean` — Whether the component is being pressed
+- **`selected`** `boolean` — Whether a file is selected
+- **`size`** `string` — The `size` prop's value
 - **`disabled`** `boolean` — Whether the file input is disabled
 - **`invalid`** `boolean` — Whether the file input has validation errors
 - **`valid`** `boolean` — Whether the file input is valid
@@ -87,6 +91,16 @@ The `mods` property accepts the following modifiers you can override:
 
 When bound to a legacy or modern form, resetting updates the displayed filename and clears any obsolete native file selection. This also allows choosing the same file again. A nonempty string value can display a filename, but it cannot restore file bytes; the user must select the file again. With `type="text"`, the form stores the file's text content.
 
+### Sizes
+
+Each size has the height of a text input of the same size, so the two line up in a form.
+
+```jsx
+<FileInput label="Key file" size="small" />
+<FileInput label="Key file" />
+<FileInput label="Key file" size="large" />
+```
+
 ### With Validation
 
 Pass `isValid` or `isInvalid` to tint the border and show the matching state icon.
@@ -173,7 +187,6 @@ This component supports all [Field properties](../../FieldProperties.md) when us
 - Implement file preview functionality for images
 - Add support for file size and type validation messages
 - Consider adding file removal functionality for selected files
-- Implement custom drag-and-drop visual feedback
 
 ## Related Components