@cube-dev/ui-kit 0.190.4 → 0.190.6

package/dist/utils/react/forwardRefWithGenerics.js.map

@@ -1 +1 @@
-{"version":3,"file":"forwardRefWithGenerics.js","names":["DOMRef","ReactElement","forwardRefWithGenerics","Record","HTMLElement","component","props","TProps","ref","TElement","ComponentWithRef","otherProps"],"sources":["../../../src/utils/react/forwardRefWithGenerics.tsx"],"sourcesContent":["import { DOMRef } from '@react-types/shared';\nimport { ReactElement } from 'react';\n\n/**\n * A helper for creating forwardRef components with generic types.\n * This solves the issue where React's forwardRef doesn't work well with generic components,\n * especially when props include required children from CollectionBase<T> or similar types.\n *\n * @example\n * ```tsx\n * function MySelect<T extends object>(\n *   props: MySelectProps<T>,\n *   ref: DOMRef<HTMLDivElement>\n * ) {\n *   // component implementation\n *   return <div ref={ref}>...</div>;\n * }\n *\n * const MySelectWithRef = forwardRefWithGenerics(MySelect);\n *\n * // Usage:\n * <MySelectWithRef<ItemType> items={items} ref={myRef} />\n * ```\n */\nexport function forwardRefWithGenerics<\n  TProps extends Record<string, any>,\n  TElement extends HTMLElement = HTMLElement,\n>(\n  component: <T extends object>(\n    props: TProps,\n    ref: DOMRef<TElement>,\n  ) => ReactElement,\n) {\n  return function ComponentWithRef<T extends object>(\n    props: TProps & { ref?: DOMRef<TElement> },\n  ) {\n    const { ref = null, ...otherProps } = props;\n    return component(otherProps as TProps, ref);\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAwBA,SAAgBE,uBAIdG,WAIA;AACA,QAAO,SAASK,iBACdJ,OACA;EACA,MAAM,EAAEE,MAAM,MAAM,GAAGG,eAAeL;AACtC,SAAOD,UAAUM,YAAsBH,IAAI"}
+{"version":3,"file":"forwardRefWithGenerics.js","names":["DOMRef","ReactElement","forwardRefWithGenerics","Record","HTMLElement","component","props","TProps","ref","TElement","ComponentWithRef","otherProps"],"sources":["../../../src/utils/react/forwardRefWithGenerics.tsx"],"sourcesContent":["import { DOMRef } from '@react-types/shared';\nimport { ReactElement } from 'react';\n\n/**\n * @deprecated Use `forwardRef` with a cast that restores the generic, as\n * `Select`, `ComboBox` and `Picker` do. This helper returns a plain function\n * component that reads `ref` from its props, and React 18 never passes `ref`\n * to one, so the ref is dropped there. Its returned `<T>` is unused too, so\n * the component's props lose their item generic.\n */\nexport function forwardRefWithGenerics<\n  TProps extends Record<string, any>,\n  TElement extends HTMLElement = HTMLElement,\n>(\n  component: <T extends object>(\n    props: TProps,\n    ref: DOMRef<TElement>,\n  ) => ReactElement,\n) {\n  return function ComponentWithRef<T extends object>(\n    props: TProps & { ref?: DOMRef<TElement> },\n  ) {\n    const { ref = null, ...otherProps } = props;\n    return component(otherProps as TProps, ref);\n  };\n}\n"],"mappings":";;;;;;;;;AAUA,SAAgBE,uBAIdG,WAIA;AACA,QAAO,SAASK,iBACdJ,OACA;EACA,MAAM,EAAEE,MAAM,MAAM,GAAGG,eAAeL;AACtC,SAAOD,UAAUM,YAAsBH,IAAI"}

package/dist/utils/react/index.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.190.4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.6 | Cube Dev Team */
 import { chain } from "./chain.js";
 import { getDisabledElementProps, omitActivationEventProps } from "./disabledProps.js";
 import { forwardRefWithGenerics } from "./forwardRefWithGenerics.js";

package/dist/utils/react/interactions.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.190.4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.6 | 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.190.4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.6 | Cube Dev Team */
 import { Children, isValidElement } from "react";
 
 //#region src/utils/react/isTextOnly.ts

package/dist/utils/react/mapProps.js

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

package/dist/utils/react/programmaticFocus.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.190.4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.6 | 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.190.4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.6 | 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.190.4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.6 | 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.190.4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.6 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "./useLayoutEffect.js";
 import { useCallback, useRef, useState } from "react";
 

package/dist/utils/react/useCombinedRefs.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.190.4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.6 | Cube Dev Team */
 import { c } from "react-compiler-runtime";
 import { useEffect, useRef } from "react";
 

package/dist/utils/react/useControlledFocusVisible.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.190.4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.6 | 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.190.4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.6 | Cube Dev Team */
 import { c } from "react-compiler-runtime";
 import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef } from "react";
 

package/dist/utils/react/useId.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.190.4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.6 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "./useLayoutEffect.js";
 import { c } from "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.190.4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.6 | Cube Dev Team */
 import { c } from "react-compiler-runtime";
 import { useEffect, useState } from "react";
 

package/dist/utils/react/useKeySymbols.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.190.4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.6 | 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.190.4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.6 | 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.190.4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.6 | 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.190.4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.6 | 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.190.4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.6 | 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.190.4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.6 | 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.190.4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.6 | 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.190.4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.6 | 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.190.4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.6 | 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.190.4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.6 | Cube Dev Team */
 import { Fragment, isValidElement } from "react";
 
 //#region src/utils/react/wrapNodeIfPlain.ts

package/dist/utils/selection.js

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

package/dist/utils/tree.js

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

package/dist/version.js

@@ -1,7 +1,7 @@
-/** @license MIT | @cube-dev/ui-kit v0.190.4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.6 | Cube Dev Team */
 //#region src/version.ts
-const VERSION = "0.190.4";
-const TASTY_VERSION = "3.9.6";
+const VERSION = "0.190.6";
+const TASTY_VERSION = "3.9.9";
 if (typeof window !== "undefined") {
 	const version = VERSION;
 	const tastyVersion = TASTY_VERSION;

package/docs/FieldProperties.md

@@ -58,7 +58,7 @@ For modern forms, follow the [use-case guide](./components/form/ModernForm.md).
 
 ## State
 
-- **`isDisabled`** `boolean` (default: `false`) — Whether the field is disabled and non-interactive.
+- **`isDisabled`** `boolean` (default: `false`) — Whether the field is disabled and non-interactive. A field also takes it from an enclosing `<Provider isDisabled>` or `<Form isDisabled>`. Buttons don't, apart from `Form.Submit` and `Form.Reset`: see [Button](./components/actions/Button.md).
 - **`isReadOnly`** `boolean` (default: `false`) — Whether the field can be focused but not changed.
 - **`isLoading`** `boolean` (default: `false`) — Whether to show a loading spinner and disable interactions.
 - **`isHidden`** `boolean` (default: `false`) — Whether the field is hidden.

package/docs/components/actions/Button.md

@@ -24,6 +24,7 @@ A versatile action component that triggers commands and navigates users.
 - **`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
+- **`isDisabled`** `boolean` (default: `false`) — Disables the button. Unlike fields, a button doesn't inherit this from `<Provider isDisabled>` or `<Form isDisabled>`, so actions such as Cancel stay live in a disabled form; pass it to each button you want disabled. Of the buttons, only `Form.Submit` and `Form.Reset` inherit it. `ItemButton` behaves like `Button`, and `ItemAction` inherits only its parent item's disabled state
 - **`isLoading`** `boolean` (default: `false`) — Show loading spinner and disable interactions
 - **`isSelected`** `boolean` (default: `false`) — Marks the button as pressed / selected (toggle)
 - **`to`** `string` — Destination URL or route; prefix with `!` to open in new tab, `@` to bypass router

package/docs/components/content/Disclosure.md

@@ -21,12 +21,19 @@ An accessible collapsible container that reveals or hides additional content. Bu
 - **`onExpandedChange`** `(isExpanded: boolean) => void` — Callback fired when expanded state changes
 - **`isDisabled`** `boolean` (default: `false`) — Disables trigger interactions and force-closes the content
 - **`shape`** `'default' | 'card' | 'sharp'` (default: `default`) — Visual shape variant: default (no styling), card (border/radius), sharp (radius 0)
-- **`transitionDuration`** `number` — Duration for DisplayTransition animation in milliseconds. When undefined, uses default CSS transition timing
+- **`transitionDuration`** `number` — Duration for DisplayTransition animation in milliseconds. When undefined, uses default CSS transition timing. It sets the `$disclosure-transition` token, which wins over the same key in `tokens`
 - **`children`** `ReactNode | ((state: DisclosureStateContext) => ReactNode)` — Disclosure.Trigger and Disclosure.Content components
 
 ### Base Properties
 
-Supports [Base properties](../../BaseProperties.md)
+Supports [Base properties](../../BaseProperties.md). `Disclosure`, `Disclosure.Group` and `Disclosure.Item` forward DOM attributes (`id`, `className`, `style`, `aria-*`, `data-*`), `theme`, `tokens` and event handlers to their root. The exception is `id` on `Disclosure.Item`, which is the item's group key, not its DOM `id` (see Disclosure.Item below). Hover props from `useHover` can go straight on the disclosure:
+
+```jsx
+<Disclosure {...hoverProps}>
+  <Disclosure.Trigger>Query</Disclosure.Trigger>
+  <Disclosure.Content>…</Disclosure.Content>
+</Disclosure>
+```
 
 ## Compound Components
 
@@ -44,7 +51,7 @@ Container for multiple disclosure items that coordinates their expanded states.
 
 ### Disclosure.Item
 
-Individual disclosure within a group. Must have a unique `id` prop when used inside `Disclosure.Group`.
+Individual disclosure within a group. Must have a unique `id` prop when used inside `Disclosure.Group`. That `id` is the item's key in the group's `expandedKeys`, so it isn't rendered as the DOM `id`.
 
 ## Styling
 

package/docs/components/content/Placeholder.md

@@ -46,3 +46,17 @@ These properties allow direct style application without using the `styles` prop:
 
 <Placeholder isStatic width="100%" />
 ```
+
+## Detecting Loading Placeholders
+
+Every Placeholder, including the ones inside `Skeleton`, renders a `data-loading-placeholder` attribute. Use it to find content that is still loading, for example in a performance observer or an end-to-end test:
+
+```js
+document.querySelectorAll('[data-loading-placeholder]');
+```
+
+The attribute doesn't depend on the locale, and a `qa` or `aria-label` prop doesn't replace it. Don't match the `aria-label`: it is translated, so an English selector misses every other locale. `[data-placeholder]` doesn't work either: pickers and table rows use it for their own empty state.
+
+## Accessibility
+
+Placeholder renders a `region` landmark labelled with the localized "Content is loading" text, so screen-reader users can find content that is still loading. The region has no content, so don't rely on it to announce the loading state: add a status message where one is needed.

package/docs/components/content/Skeleton.md

@@ -2,6 +2,8 @@
 
 A skeleton loading indicator with preset layouts. Composes `Placeholder` components to mimic content structure.
 
+Each of those placeholders carries `data-loading-placeholder`, the locale-independent way to detect loading content (see [Placeholder](./Placeholder.md#detecting-loading-placeholders)).
+
 ## When to Use
 
 - Loading states for complex layouts

package/docs/components/form/Form.md

@@ -60,6 +60,7 @@ These properties are inherited by all input components within the form:
 - **`labelStyles`** `Styles` — Styles applied to field labels
 - **`requiredMark`** `boolean` (default: `true`) — Whether to show required field indicators
 - **`necessityIndicator`** `'icon' | 'label' | null` (default: `icon`) — Type of necessity indicator. `null` suppresses it
+- **`isDisabled`** `boolean` — Disables every field in the form, plus `Form.Submit` and `Form.Reset`. Other buttons don't inherit it: see [Button](../actions/Button.md)
 - **`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

package/docs/tasty/ai-agents.md

@@ -220,6 +220,8 @@ styles: { Title: { preset: 'h3' }, Icon: { $: '>@:last-child', color: '#accent'
 | `@function`      | `{ '$$name': { args, returns?, result, '$local'? } }`                                                       |
 | `recipe`         | a **string** of configured recipe names: `'card elevated'`, `'reset input / autofill'`, `'none / disabled'` |
 
+`recipe` resolves on the component root and independently in each sub-element's styles: `styles: { Panel: { recipe: 'card elevated' } }` is supported. Configured recipe definitions must be flat and cannot contain their own `recipe` key; references inside recipe values are not recursively expanded. Compose names where the recipe is applied, not inside `configure({ recipes })`. See [Recipes](dsl.md#recipes).
+
 At-rule keys match the real CSS at-rule names, so they are kebab-case, not camelCase. Inside `@function`, the callable is `$$name` but its parameters and local variables are `$name`:
 
 ```jsx

package/docs/tasty/configuration.md

@@ -549,7 +549,23 @@ configure({
 });
 ```
 
-Recipe values are flat tasty styles (no sub-element keys). They may contain base styles, tokens, local states, `@keyframes`, and `@property`. Recipes cannot reference other recipes.
+Recipe values are flat tasty styles (no sub-element keys). They may contain base styles, tokens, local states, `@keyframes`, and `@property`.
+
+**Recipes cannot reference other recipes.** A `recipe` key inside a configured recipe's value is not recursively resolved:
+
+```jsx
+// Unsupported: applying 'elevatedCard' does not expand 'card elevated'.
+configure({
+  recipes: {
+    elevatedCard: {
+      recipe: 'card elevated',
+      padding: '6x',
+    },
+  },
+});
+```
+
+Instead, compose the names where you apply the styles: `styles: { recipe: 'card elevated', padding: '6x' }`. Recipe references are resolved on the component root and independently inside each sub-element's styles (for example, `styles: { Panel: { recipe: 'card elevated' } }`). This sub-element support does not allow one recipe definition to inherit another. Tasty warns in development when a recipe definition contains a `recipe` key.
 
 For how to apply, compose, and override recipes in components, see [Recipes](dsl.md#recipes) in the Style DSL reference.
 

package/docs/tasty/dsl.md

@@ -343,6 +343,26 @@ const ElevatedCard = tasty({
 });
 ```
 
+**Where recipes resolve:**
+
+The `recipe` property is resolved on the component root and independently inside each sub-element's styles:
+
+```jsx
+const CardWithPanel = tasty({
+  styles: {
+    recipe: 'card',
+    Panel: {
+      recipe: 'card elevated',
+      padding: '2x', // Overrides the panel's base recipe padding
+    },
+  },
+});
+```
+
+At each level, base recipes are collected in name order (later recipes replace earlier values for the same property), then local styles are merged, then post recipes are merged. The merges with local styles and post recipes follow the [state-map extension and replacement rules](#extending-vs-replacing-state-maps).
+
+Recipe definitions themselves cannot contain a `recipe` reference to another recipe: there is no recursive expansion or recipe inheritance. Compose names in the root or sub-element `recipe` property instead. See [Configuration — Recipes](configuration.md#recipes) for an unsupported nesting example.
+
 **Post-merge recipes (`/` separator):**
 
 Recipes listed after `/` are applied _after_ component styles using `mergeStyles`:

package/docs/tasty/react-api.md

@@ -70,6 +70,8 @@ const Span = tasty({
 
 The wrapped component only needs to forward `className` (and ideally `style`/`ref`). Tasty-specific props (`qa`, `qaVal`, `mods`, `tokens`, `styleProps`, `modProps`, `tokenProps`) are consumed by Tasty and never leak to the DOM.
 
+Props forwarded to the `as` component keep their declared types and requiredness. For example, a component with `position: 'top-right' | 'bottom-left'` accepts those values through `tasty({ as: Component })`; CSS positioning can still be set through `styles.position`. A prop explicitly listed in `styleProps` is consumed as a style value instead. The always-available base style props below are also consumed by Tasty, so keep component-specific prop names separate from those reserved names.
+
 ---
 
 ## Style Props

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.190.4",
+  "version": "0.190.6",
   "type": "module",
   "description": "UIKit for Cube Projects",
   "repository": {
@@ -59,7 +59,7 @@
     "@tabler/icons-react": "^3.31.0",
     "@tanstack/react-virtual": "^3.13.12",
     "@tenphi/glaze": "2.0.0",
-    "@tenphi/tasty": "^3.9.6",
+    "@tenphi/tasty": "3.9.9",
     "clipboard-copy": "^4.0.1",
     "clsx": "^1.1.1",
     "diff": "^8.0.3",
@@ -98,7 +98,7 @@
     "@statoscope/cli": "^5.20.1",
     "@storybook/addon-docs": "^10.3.6",
     "@storybook/react-vite": "^10.3.6",
-    "@tenphi/eslint-plugin-tasty": "^1.5.1",
+    "@tenphi/eslint-plugin-tasty": "^1.5.2",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.7.0",
     "@testing-library/react": "^16.3.0",