@cube-dev/ui-kit 0.121.5 → 0.121.7

package/dist/utils/react/mergeProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.121.7 | 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.121.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.121.7 | 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/resolveIcon.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.121.7 | 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.121.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.121.7 | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { useSyncExternalStore } from "react";
 

package/dist/utils/react/useCombinedRefs.js

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

package/dist/utils/react/useEventBus.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.121.7 | Cube Dev Team */
 import React, { createContext, useCallback, useContext, useEffect, 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.121.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.121.7 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "./useLayoutEffect.js";
 import { useEffect, useRef, useState } from "react";
 import { useSSRSafeId } from "@react-aria/ssr";

package/dist/utils/react/useIsDarwin.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.121.7 | Cube Dev Team */
 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.121.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.121.7 | Cube Dev Team */
 import { useIsDarwin } from "./useIsDarwin.js";
 import { useMemo } from "react";
 

package/dist/utils/react/useLayoutEffect.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.121.7 | 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.121.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.121.7 | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { useCallback, useSyncExternalStore } from "react";
 

package/dist/utils/react/useMergeStyles.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.121.7 | Cube Dev Team */
 import { mergeStyles } from "@tenphi/tasty";
 import { useMemo } from "react";
 

package/dist/utils/react/useQaProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.121.7 | Cube Dev Team */
 //#region src/utils/react/useQaProps.ts
 /**
 * Processes QA props.

package/dist/utils/react/useViewportSize.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.121.7 | Cube Dev Team */
 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.121.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.121.7 | Cube Dev Team */
 import { isValidElement } from "react";
 import { isFragment } from "react-is";
 

package/dist/utils/styles.d.ts

@@ -0,0 +1,19 @@
+
+import { Styles } from "@tenphi/tasty";
+
+//#region src/utils/styles.d.ts
+/**
+ * Split properties into style and non-style properties.
+ * Collects style-related props from `props` (based on `styleList`)
+ * and merges them with `defaultStyles` and `props.styles`.
+ *
+ * @param props - Component prop map.
+ * @param styleList - List of style property names to extract.
+ * @param defaultStyles - Default style map of the component.
+ * @param propMap - Props-to-style alias map (e.g. `{ bg: 'fill' }`).
+ * @param ignoreList - Properties to skip during extraction.
+ */
+declare function extractStyles(props: Record<string, unknown>, styleList?: readonly string[], defaultStyles?: Styles, propMap?: Record<string, string>, ignoreList?: readonly string[]): Styles;
+//#endregion
+export { extractStyles };
+//# sourceMappingURL=styles.d.ts.map

package/dist/utils/styles.js

@@ -0,0 +1,31 @@
+/** @license MIT | @cube-dev/ui-kit v0.121.7 | Cube Dev Team */
+//#region src/utils/styles.ts
+/**
+* Split properties into style and non-style properties.
+* Collects style-related props from `props` (based on `styleList`)
+* and merges them with `defaultStyles` and `props.styles`.
+*
+* @param props - Component prop map.
+* @param styleList - List of style property names to extract.
+* @param defaultStyles - Default style map of the component.
+* @param propMap - Props-to-style alias map (e.g. `{ bg: 'fill' }`).
+* @param ignoreList - Properties to skip during extraction.
+*/
+function extractStyles(props, styleList = [], defaultStyles, propMap, ignoreList = []) {
+	const ignoreSet = new Set(ignoreList);
+	const styleSet = new Set(styleList);
+	const styles = {
+		...defaultStyles,
+		...!ignoreSet.has("styles") && props.styles && typeof props.styles === "object" ? props.styles : void 0
+	};
+	for (const prop of Object.keys(props)) {
+		if (ignoreSet.has(prop)) continue;
+		const styleName = propMap?.[prop] ?? prop;
+		if (styleSet.has(styleName)) styles[styleName] = props[prop];
+	}
+	return styles;
+}
+
+//#endregion
+export { extractStyles };
+//# sourceMappingURL=styles.js.map

package/dist/utils/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","names":[],"sources":["../../src/utils/styles.ts"],"sourcesContent":["import type { Styles } from '@tenphi/tasty';\n\n/**\n * Split properties into style and non-style properties.\n * Collects style-related props from `props` (based on `styleList`)\n * and merges them with `defaultStyles` and `props.styles`.\n *\n * @param props - Component prop map.\n * @param styleList - List of style property names to extract.\n * @param defaultStyles - Default style map of the component.\n * @param propMap - Props-to-style alias map (e.g. `{ bg: 'fill' }`).\n * @param ignoreList - Properties to skip during extraction.\n */\nexport function extractStyles(\n  props: Record<string, unknown>,\n  styleList: readonly string[] = [],\n  defaultStyles?: Styles,\n  propMap?: Record<string, string>,\n  ignoreList: readonly string[] = [],\n): Styles {\n  const ignoreSet = new Set(ignoreList);\n  const styleSet = new Set(styleList);\n\n  const styles: Styles = {\n    ...defaultStyles,\n    ...(!ignoreSet.has('styles') &&\n    props.styles &&\n    typeof props.styles === 'object'\n      ? (props.styles as Styles)\n      : undefined),\n  };\n\n  for (const prop of Object.keys(props)) {\n    if (ignoreSet.has(prop)) continue;\n\n    const styleName = propMap?.[prop] ?? prop;\n\n    if (styleSet.has(styleName)) {\n      styles[styleName] = props[prop] as Styles[keyof Styles];\n    }\n  }\n\n  return styles;\n}\n"],"mappings":";;;;;;;;;;;;;AAaA,SAAgB,cACd,OACA,YAA+B,EAAE,EACjC,eACA,SACA,aAAgC,EAAE,EAC1B;CACR,MAAM,YAAY,IAAI,IAAI,WAAW;CACrC,MAAM,WAAW,IAAI,IAAI,UAAU;CAEnC,MAAM,SAAiB;EACrB,GAAG;EACH,GAAI,CAAC,UAAU,IAAI,SAAS,IAC5B,MAAM,UACN,OAAO,MAAM,WAAW,WACnB,MAAM,SACP;EACL;AAED,MAAK,MAAM,QAAQ,OAAO,KAAK,MAAM,EAAE;AACrC,MAAI,UAAU,IAAI,KAAK,CAAE;EAEzB,MAAM,YAAY,UAAU,SAAS;AAErC,MAAI,SAAS,IAAI,UAAU,CACzB,QAAO,aAAa,MAAM;;AAI9B,QAAO"}

package/dist/utils/tree.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.121.7 | 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.121.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.121.7 | Cube Dev Team */
 //#region src/utils/warnings.ts
 const SUGGESTED_PROP_MAP = {
 	disabled: "isDisabled",

package/dist/version.js

@@ -1,6 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.121.7 | Cube Dev Team */
 //#region src/version.ts
-const VERSION = "0.121.5";
+const VERSION = "0.121.7";
 if (typeof window !== "undefined") {
 	const version = VERSION;
 	window.CubeUIKit = window.CubeUIKit || { version };

package/docs/BaseProperties.md

@@ -63,7 +63,7 @@ Position and dimension styles: POSITION_STYLES, DIMENSION_STYLES, BLOCK_OUTER_ST
 ## Usage
 
 ```jsx
-<Button qa="submit-button" width="100%" padding="1x 2x">
+<Button qa="SubmitButton" width="100%" padding="1x 2x">
   Submit
 </Button>
 

package/docs/Utilities.md

@@ -0,0 +1,183 @@
+# Utilities
+
+Helper functions from `@tenphi/tasty` for building components with the style system.
+
+## extractStyles
+
+Splits component props into a style map and remaining props. Used in components that accept style properties as direct props (e.g. `width`, `fill`, `padding`).
+
+### Signature
+
+```ts
+function extractStyles(
+  props: Record<string, unknown>,
+  styleList?: readonly string[],
+  defaultStyles?: Styles,
+  propMap?: Record<string, string>,
+  ignoreList?: readonly string[],
+): Styles;
+```
+
+### Parameters
+
+- **`props`** — The component props object to extract styles from.
+- **`styleList`** — List of prop names to treat as style properties. Use predefined sets like `OUTER_STYLES`, `BLOCK_STYLES`, etc.
+- **`defaultStyles`** — Base style map to merge extracted styles into. Defaults to `{}`.
+- **`propMap`** — Optional alias map (`{ propName: 'styleName' }`) to rename props during extraction.
+- **`ignoreList`** — Props to skip. Pass `['styles']` to prevent merging the `styles` prop.
+
+### Behavior
+
+1. Starts with `defaultStyles` (if provided).
+2. Merges `props.styles` on top (unless `'styles'` is in `ignoreList`).
+3. Iterates over `props` — any prop whose name is in `styleList` is added to the result. Props override both `defaultStyles` and `props.styles`.
+4. Mutates nothing; returns a new object.
+
+### Predefined style lists
+
+| List | Contains |
+|------|----------|
+| `BASE_STYLES` | `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition` |
+| `POSITION_STYLES` | `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position` |
+| `DIMENSION_STYLES` | `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex` |
+| `BLOCK_INNER_STYLES` | `padding`, `paddingInline`, `paddingBlock`, `overflow`, `scrollbar`, `textAlign` |
+| `BLOCK_OUTER_STYLES` | `border`, `radius`, `shadow`, `outline` |
+| `BLOCK_STYLES` | `BLOCK_INNER_STYLES` + `BLOCK_OUTER_STYLES` |
+| `COLOR_STYLES` | `color`, `fill`, `fade`, `image` |
+| `TEXT_STYLES` | `textTransform`, `fontWeight`, `fontStyle` |
+| `FLOW_STYLES` | `flow`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas` |
+| `OUTER_STYLES` | `POSITION_STYLES` + `DIMENSION_STYLES` + `BLOCK_OUTER_STYLES` |
+| `INNER_STYLES` | `BASE_STYLES` + `COLOR_STYLES` + `BLOCK_INNER_STYLES` + `FLOW_STYLES` |
+| `CONTAINER_STYLES` | `BASE_STYLES` + `COLOR_STYLES` + `DIMENSION_STYLES` + `POSITION_STYLES` + `BLOCK_STYLES` + `FLOW_STYLES` |
+
+### Choosing style lists for multi-element components
+
+In components with a **wrapper + inner element** structure (e.g. input fields), use `extractStyles` once with a combined list for the wrapper. Inner elements should receive styles only through dedicated props like `inputStyles` or `triggerStyles`.
+
+```tsx
+import {
+  BASE_STYLES, OUTER_STYLES, BLOCK_STYLES, COLOR_STYLES,
+  extractStyles,
+} from '@tenphi/tasty';
+
+const PROP_STYLES = [
+  ...BASE_STYLES,
+  ...OUTER_STYLES,
+  ...BLOCK_STYLES,
+  ...COLOR_STYLES,
+];
+
+function MyInput({ inputStyles, ...props }) {
+  // All style props go to the wrapper — never to the inner element
+  let styles = extractStyles(props, PROP_STYLES);
+
+  return (
+    <Wrapper styles={styles}>
+      <InnerInput styles={inputStyles} />
+    </Wrapper>
+  );
+}
+```
+
+Avoid calling `extractStyles` twice on the same props with overlapping lists — this causes styles like `border` and `radius` to be applied to both elements.
+
+### Single-element usage
+
+For simple components with one root element, extract everything in one call:
+
+```tsx
+import { CONTAINER_STYLES, extractStyles, filterBaseProps } from '@tenphi/tasty';
+
+function MyComponent(props) {
+  const styles = extractStyles(props, CONTAINER_STYLES);
+
+  return (
+    <Element {...filterBaseProps(props, { eventProps: true })} styles={styles} />
+  );
+}
+```
+
+### Using `defaultStyles`
+
+Pre-populate styles that can be overridden by props:
+
+```tsx
+const styles = extractStyles(props, OUTER_STYLES, {
+  width: '100%',
+  position: 'relative',
+});
+// If props.width is set, it overrides '100%'
+```
+
+### Using `ignoreList`
+
+Prevent `props.styles` from being merged (useful when `styles` is handled separately):
+
+```tsx
+const inputStyles = extractStyles(props, ['resize'], baseInputStyles, undefined, ['styles']);
+```
+
+---
+
+## filterBaseProps
+
+Filters a props object down to only DOM-safe properties. Use this when spreading props onto a rendered element to prevent React warnings about unknown DOM attributes and to stop style props from leaking to the DOM.
+
+### Signature
+
+```ts
+function filterBaseProps(
+  props: Record<string, unknown>,
+  opts?: {
+    propNames?: Set<string>;
+    eventProps?: boolean;
+  },
+): Record<string, unknown>;
+```
+
+### Parameters
+
+- **`props`** — The full component props object.
+- **`opts.eventProps`** — When `true`, passes through event handlers (`on*` props) except React Aria interaction props (`onPress`, `onHoverStart`, etc.).
+- **`opts.propNames`** — Additional prop names to allow through (as a `Set<string>`).
+
+### What passes through
+
+| Category | Examples |
+|----------|----------|
+| DOM ids | `id` |
+| Base props | `role`, `as`, `children`, `style`, `className`, `href`, `target`, `tabIndex`, `hidden`, `disabled` |
+| ARIA attributes | `aria-label`, `aria-describedby`, etc. |
+| Data attributes | `data-qa`, `data-testid`, etc. |
+| Event handlers (opt-in) | `onClick`, `onFocus`, `onKeyDown`, etc. (when `eventProps: true`) |
+| Custom (opt-in) | Any prop name added to `opts.propNames` |
+
+Style props (`width`, `fill`, `padding`, `border`, etc.), tasty-specific props (`mods`, `qa`, `styles`), and React Aria interaction props (`onPress`, `onHoverStart`, `onHoverEnd`, `onPressStart`, `onPressEnd`) are filtered out.
+
+### Usage
+
+Pair with `extractStyles` — extract styles first, then filter what goes to the DOM:
+
+```tsx
+import { CONTAINER_STYLES, extractStyles, filterBaseProps } from '@tenphi/tasty';
+
+function MyComponent(props) {
+  const styles = extractStyles(props, CONTAINER_STYLES);
+
+  return (
+    <Element
+      {...filterBaseProps(props, { eventProps: true })}
+      styles={styles}
+    />
+  );
+}
+```
+
+Allow specific custom props through:
+
+```tsx
+const domProps = filterBaseProps(props, {
+  eventProps: true,
+  propNames: new Set(['htmlType', 'form']),
+});
+```

package/docs/components/Block.md

@@ -20,6 +20,17 @@ No component-specific props. Use style props directly.
 
 Supports [Base properties](../BaseProperties.md).
 
+### Style Properties
+
+These properties allow direct style application without using the `styles` prop:
+
+- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
+- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`
+- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
+- **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `paddingInline`, `paddingBlock`, `overflow`, `scrollbar`, `textAlign`
+- **Color:** `color`, `fill`, `fade`, `image`
+- **Flow:** `flow`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`
+
 ## Examples
 
 ```jsx

package/docs/components/CollectionItem.md

@@ -92,14 +92,43 @@ const items = [{
 
 ## Properties
 
-Extends all [Item component](./content/Item.md) props:
-
-- `children` - Item content
-- `icon` / `rightIcon` - Icons
-- `prefix` / `suffix` - Additional content
-- `description` - Secondary text
-- `textValue` - Text for filtering/accessibility
-- `onAction` - Action handler (Menu items)
+- **`icon`** `ReactNode | 'checkbox'` — Icon displayed before the content
+- **`rightIcon`** `ReactNode` — Icon displayed after the content
+- **`prefix`** `ReactNode` — Content rendered before the label
+- **`suffix`** `ReactNode` — Content rendered after the label
+- **`description`** `ReactNode` — Secondary text below the main content
+- **`tooltip`** `string | boolean | object` — Tooltip configuration
+- **`hotkeys`** `string` — Keyboard shortcut displayed and triggered
+- **`isSelected`** `boolean` — Whether the item shows as selected
+- **`isLoading`** `boolean` — Show loading state, replacing the icon slot with a spinner
+- **`actions`** `ReactNode` — Inline action buttons displayed on the right side
+- **`size`** `'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'inline'` (default: `medium`) — Size of the item
+- **`autoHideActions`** `boolean` (default: `false`) — When true, actions are hidden by default and shown on hover or focus
+- **`preserveActionsSpace`** `boolean` (default: `false`) — Preserve the actions width when hidden (only changes opacity, not layout)
+- **`disableActionsFocus`** `boolean` (default: `false`) — Disable focus on action buttons by setting tabIndex to -1
+- **`level`** `1 | 2 | 3 | 4 | 5 | 6` (default: `3`) — Heading level for the label element when type is "header" or "card"
+- **`highlight`** `string` — String to highlight within children text
+- **`highlightCaseSensitive`** `boolean` (default: `false`) — Whether highlight matching is case-sensitive
+- **`textValue`** `string` — Text for filtering and accessibility
+- **`onAction`** `() => void` — Callback fired when the item is activated (Menu items)
+- **`wrapper`** `(item: ReactElement) => ReactElement` — Function to wrap the rendered item
+
+Extends all [Item component](./content/Item.md) props.
+
+### Base Properties
+
+Supports [Base properties](../BaseProperties.md).
+
+### Style Properties
+
+These properties allow direct style application without using the `styles` prop:
+
+- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
+- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`
+- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
+- **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `paddingInline`, `paddingBlock`, `overflow`, `scrollbar`, `textAlign`
+- **Color:** `color`, `fill`, `fade`, `image`
+- **Flow:** `flow`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`
 
 ## Examples
 

package/docs/components/GridProvider.md

@@ -22,10 +22,25 @@ Provides CSS custom properties for responsive grid column calculations. Children
 - `--column-gap` — Gap between columns
 - `--column-width` — Calculated width per column
 
+### Base Properties
+
+Supports [Base properties](../BaseProperties.md).
+
 ### Style Defaults
 
 - `display` — `contents`
 
+### Style Properties
+
+These properties allow direct style application without using the `styles` prop:
+
+- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
+- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`
+- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
+- **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `paddingInline`, `paddingBlock`, `overflow`, `scrollbar`, `textAlign`
+- **Color:** `color`, `fill`, `fade`, `image`
+- **Flow:** `flow`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`
+
 ## Examples
 
 ```jsx

package/docs/components/Root.md

@@ -20,6 +20,7 @@ The root application wrapper. Provides theme context, global styles, portal cont
 - **`bodyStyles`** `Record<string, string>` — Raw CSS styles applied to the `<body>`
 - **`publicUrl`** `string` — Public URL for font loading
 - **`cursorStrategy`** `'web' | 'native'` (default: `'web'`) — Cursor style for interactive elements (`web` uses pointer, `native` uses default)
+- **`applyLegacyTokens`** `boolean` — *Deprecated.* Tokens are now always applied via GlobalStyles; this prop is ignored
 
 ### Style Defaults
 
@@ -31,6 +32,13 @@ The root application wrapper. Provides theme context, global styles, portal cont
 
 Supports [Base properties](../BaseProperties.md).
 
+### Style Properties
+
+These properties allow direct style application without using the `styles` prop:
+
+- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
+- **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `paddingInline`, `paddingBlock`, `overflow`, `scrollbar`, `textAlign`
+
 ## Examples
 
 ```jsx

package/docs/components/actions/Action.md

@@ -26,6 +26,18 @@ A low-level action element that can render as `<button>`, `<a>`, or `<span>`. Wh
 
 Supports [Base properties](../../BaseProperties.md). Extends React Aria `AriaButtonProps`.
 
+### Style Properties
+
+These properties allow direct style application without using the `styles` prop:
+
+- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
+- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`
+- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
+- **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `paddingInline`, `paddingBlock`, `overflow`, `scrollbar`, `textAlign`
+- **Color:** `color`, `fill`, `fade`, `image`
+- **Text:** `textTransform`, `fontWeight`, `fontStyle`
+- **Flow:** `flow`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`
+
 ## Examples
 
 ### Button action

package/docs/components/actions/Banner.md

@@ -19,9 +19,23 @@ Banner displays prominent messages and notifications to users. It supports diffe
 - **`isDismissable`** `boolean` (default: `false`) — Whether the banner shows a dismiss button
 - **`onDismiss`** `() => void` — Callback fired when the dismiss button is clicked
 - **`icon`** `ReactNode` — Custom icon to display; defaults to a theme-appropriate icon
+- **`rightIcon`** `ReactNode` — Icon displayed after the content
+- **`prefix`** `ReactNode` — Content rendered before the label
+- **`suffix`** `ReactNode` — Content rendered after the label
 - **`actions`** `ReactNode` — Action buttons displayed on the right side of the banner. Use `Banner.Action` for consistent styling
-- **`description`** `string` — Secondary text shown below the main content, truncated with ellipsis after two lines
-- **`shape`** `'sharp'` — Use `'sharp'` to remove rounded corners when stacking multiple banners
+- **`description`** `ReactNode` — Secondary text shown below the main content, truncated with ellipsis after two lines
+- **`tooltip`** `string | boolean | object` — Tooltip configuration
+- **`hotkeys`** `string` — Keyboard shortcut displayed and triggered
+- **`isDisabled`** `boolean` — Whether the banner is disabled
+- **`isSelected`** `boolean` (default: `false`) — Whether the banner shows as selected with a checkbox
+- **`isLoading`** `boolean` — Show loading state
+- **`autoHideActions`** `boolean` (default: `false`) — When true, actions are hidden by default and shown on hover or focus
+- **`preserveActionsSpace`** `boolean` (default: `false`) — Preserve the actions width when hidden (only changes opacity, not layout)
+- **`disableActionsFocus`** `boolean` (default: `false`) — Disable focus on action buttons by setting tabIndex to -1
+- **`level`** `1 | 2 | 3 | 4 | 5 | 6` (default: `3`) — Heading level for the label element when type is "header" or "card"
+- **`highlight`** `string` — String to highlight within children text
+- **`highlightCaseSensitive`** `boolean` (default: `false`) — Whether highlight matching is case-sensitive
+- **`shape`** `'card' | 'button' | 'sharp' | 'pill'` (default: `'button'`) — Shape of the banner's border radius. Use `'sharp'` to remove rounded corners when stacking multiple banners
 
 ### Base Properties
 
@@ -37,6 +51,18 @@ Customizes the root element of the component.
 - `Label` - The main text content area
 - `Actions` - Container for action buttons
 
+### Style Properties
+
+These properties allow direct style application without using the `styles` prop:
+
+- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
+- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`
+- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
+- **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `paddingInline`, `paddingBlock`, `overflow`, `scrollbar`, `textAlign`
+- **Color:** `color`, `fill`, `fade`, `image`
+- **Text:** `textTransform`, `fontWeight`, `fontStyle`
+- **Flow:** `flow`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`
+
 ### Modifiers
 
 The `mods` property accepts the following modifiers you can override:

package/docs/components/actions/Button.md

@@ -23,6 +23,7 @@ A versatile action component that triggers commands and navigates users.
 - **`children`** `ReactNode` — Button label or custom content
 - **`label`** `string` — Accessible label for the button (used as `aria-label`)
 - **`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
 - **`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
@@ -46,7 +47,15 @@ Customises the root element of the component.
 
 ### Style Properties
 
-These properties allow direct styling without using the `styles` prop: `width`, `height`.
+These properties allow direct style application without using the `styles` prop:
+
+- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
+- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`
+- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
+- **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `paddingInline`, `paddingBlock`, `overflow`, `scrollbar`, `textAlign`
+- **Color:** `color`, `fill`, `fade`, `image`
+- **Text:** `textTransform`, `fontWeight`, `fontStyle`
+- **Flow:** `flow`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`
 
 ### Modifiers
 

package/docs/components/actions/ButtonGroup.md

@@ -25,6 +25,17 @@ Inherits Space defaults:
 
 Supports [Base properties](../../BaseProperties.md).
 
+### Style Properties
+
+These properties allow direct style application without using the `styles` prop:
+
+- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
+- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`
+- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
+- **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `paddingInline`, `paddingBlock`, `overflow`, `scrollbar`, `textAlign`
+- **Color:** `color`, `fill`, `fade`, `image`
+- **Flow:** `flow`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`
+
 ## Examples
 
 ### Horizontal group