@cube-dev/ui-kit 0.208.0 → 0.210.0

package/dist/tokens/color-theme.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.208.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.210.0 | Cube Dev Team */
 import { colorSeed } from "./color-seed.js";
 import { DEFAULT_HUE, getPaletteConfig, getPaletteVersion, usePaletteValue } from "./palette-config.js";
 import { tintRecipe } from "./palette.js";

package/dist/tokens/colors.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.208.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.210.0 | Cube Dev Team */
 import { getPaletteVersion } from "./palette-config.js";
 import { BASE_TOKENS } from "./base.js";
 import { lazyStyles } from "./lazy-styles.js";

package/dist/tokens/layout.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.208.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.210.0 | Cube Dev Team */
 //#region src/tokens/layout.ts
 /**
 * Layout-related tokens for common UI dimensions.

package/dist/tokens/lazy-styles.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.208.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.210.0 | Cube Dev Team */
 //#region src/tokens/lazy-styles.ts
 /**
 * Proxy that defers to `factory()` on every property / enumeration access.

package/dist/tokens/legacy-color.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.208.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.210.0 | Cube Dev Team */
 import { parseSrgbColor } from "../utils/colors.js";
 import { srgbToHex } from "@tenphi/glaze";
 //#region src/tokens/legacy-color.ts

package/dist/tokens/palette-config.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.208.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.210.0 | Cube Dev Team */
 import { colorSeed } from "./color-seed.js";
 import { c } from "react/compiler-runtime";
 import { useSyncExternalStore } from "react";

package/dist/tokens/palette.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.208.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.210.0 | Cube Dev Team */
 import { SURFACE_SATURATION_SHARE, getPaletteConfig, getPaletteVersion, resolvePaletteConfig } from "./palette-config.js";
 import { lazyStyles } from "./lazy-styles.js";
 import { apcaContrast, glaze, okhslToLinearSrgb, variantToOkhsl } from "@tenphi/glaze";

package/dist/tokens/resolve.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.208.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.210.0 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "../utils/react/useLayoutEffect.js";
 import { warn } from "../utils/warnings.js";
 import { getPaletteVersion, usePaletteVersion } from "./palette-config.js";

package/dist/tokens/shadows.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.208.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.210.0 | Cube Dev Team */
 //#region src/tokens/shadows.ts
 /**
 * Shadow tokens using tasty shorthand syntax.

package/dist/tokens/sizes.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.208.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.210.0 | Cube Dev Team */
 //#region src/tokens/sizes.ts
 /**
 * Component size values in pixels.

package/dist/tokens/spacing.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.208.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.210.0 | Cube Dev Team */
 //#region src/tokens/spacing.ts
 /**
 * Spacing tokens using tasty multiplier syntax.

package/dist/tokens/typography.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.208.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.210.0 | Cube Dev Team */
 //#region src/tokens/typography.ts
 /**
 * Typography presets for headings, text, and special styles.

package/dist/utils/ResizeSensor.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.208.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.210.0 | Cube Dev Team */
 //#region src/utils/ResizeSensor.ts
 /**
 * Iterate over each of the provided element(s).

package/dist/utils/colors.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.208.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.210.0 | Cube Dev Team */
 import { hslToSrgb, okhslToOklch, okhslToSrgb, okhstToOkhsl, oklabToOkhsl, parseHexAlpha } from "@tenphi/glaze";
 //#region src/utils/colors.ts
 /**

package/dist/utils/dotize.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.208.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.210.0 | Cube Dev Team */
 //#region src/utils/dotize.ts
 /**
 * Flattens a nested object into dot paths: `{ a: { b: 1 } }` becomes

package/dist/utils/is-dev-env.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.208.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.210.0 | Cube Dev Team */
 //#region src/utils/is-dev-env.ts
 /**
 * `NODE_ENV` as the environment that is actually running reports it, or

package/dist/utils/modules.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.208.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.210.0 | Cube Dev Team */
 //#region src/utils/modules.ts
 function extractModule(promise) {
 	return promise.then((module) => module.default || module);

package/dist/utils/promise.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.208.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.210.0 | Cube Dev Team */
 //#region src/utils/promise.ts
 function timeout(ms = 30) {
 	return new Promise((resolve) => {

package/dist/utils/raf.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.208.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.210.0 | Cube Dev Team */
 //#region src/utils/raf.ts
 /**
 * Chains N requestAnimationFrame calls and returns a cancel function.

package/dist/utils/random.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.208.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.210.0 | Cube Dev Team */
 //#region src/utils/random.ts
 function random(min, max) {
 	const realMin = min < max ? min : max;

package/dist/utils/range.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.208.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.210.0 | Cube Dev Team */
 //#region src/utils/range.ts
 function range(count) {
 	return Array.from({ length: count }, (_, i) => i);

package/dist/utils/react/RenderCache.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.208.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.210.0 | Cube Dev Team */
 import { useRef } from "react";
 import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
 //#region src/utils/react/RenderCache.tsx

package/dist/utils/react/Slots.js

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.208.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.210.0 | Cube Dev Team */
 import { chain } from "./chain.js";
 import { useLayoutEffect } from "./useLayoutEffect.js";
 import { mergeProps } from "./mergeProps.js";

package/dist/utils/react/interactions.js

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.208.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.210.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.208.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.210.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.208.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.210.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.208.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.210.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.208.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.210.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.208.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.210.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.208.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.210.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.208.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.210.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.208.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.210.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.208.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.210.0 | Cube Dev Team */
 //#region src/version.ts
-const VERSION = "0.208.0";
-const TASTY_VERSION = "3.17.1";
+const VERSION = "0.210.0";
+const TASTY_VERSION = "3.18.0";
 if (typeof window !== "undefined") {
 	const version = VERSION;
 	const tastyVersion = TASTY_VERSION;

package/docs/Usage.md

@@ -412,7 +412,7 @@ Most components are a design contract: customize them through their own props (`
 The package's `tasty.config.ts` lists the other components as `protectedComponents`, and `tasty/no-protected-restyle` from `@tenphi/eslint-plugin-tasty` 1.12.0 or newer reports a restyle of one in your code:
 
 - instance `styles`, and every `*Styles` prop such as `inputStyles`;
-- style props other than the ones that place or size the component (`width`, `height`, `gridArea`, `margin`, `inset`, …). Containers (`Card`, `Panel`, `ResizablePanel`, `Content`, `Header`, `Footer`, `Alert`, `Result`, `Skeleton`, and `Layout` and `GridLayout` with their sub-components) also keep the ones that lay out their content: `display`, `padding`, `gap`, `flow`, `place*`, `align*`, `justify*`, `grid*`, `overflow` and `scrollbar`. `Placeholder` keeps `radius`, the shape of what it stands in for. Root `styles` that sets only allowed props passes too;
+- style props other than the ones that place or size the component (`width`, `height`, `gridArea`, `margin`, `inset`, …). Containers (`Card`, `Panel`, `ResizablePanel`, `Content`, `Header`, `Footer`, `Alert`, `Result`, `Skeleton`, and `Layout` and `GridLayout` with their sub-components) also keep the ones that lay out their content: `display`, `padding`, `gap`, `flow`, `place*`, `align*`, `justify*`, `grid*`, `overflow`, `scrollbar`, `textAlign`, and `container` for container queries. A container that draws no fill and no border of its own (`Layout`, `GridLayout`, `Panel`, `ResizablePanel`, `Content`, `Header` and `Footer`) also keeps `fill` and `border`. `Layout`'s sections (`Layout.Content`, `Header`, `Footer`, `Toolbar`, `Block`, `Flex`, `Grid`, `Center` and `Container`) keep `fill`, but not `border`: the border that separates stacked sections is UI Kit's. `Placeholder` keeps `radius`, the shape of what it stands in for. Root `styles` that sets only allowed props passes too;
 - `tasty()` wrappers that restyle a protected component, and wrappers of those wrappers.
 
 On an input, the style props that place or size it act on its outer element: the field wrapper when it renders (see [Field properties](./FieldProperties.md)), the input itself otherwise. Its `styles` always style the input, so a root `styles` that only sizes it passes the rule but sizes the input inside the field, not the field. To size the input alone, beside a side label for example, use its `controlWidth` prop. Input components take no other style props.
@@ -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/content/Layout.md

@@ -110,6 +110,7 @@ A semantic page header with title, breadcrumbs, subtitle, and action areas.
 
 - **`title`** `ReactNode` — Page/section title. A string title that runs out of room is truncated and shown in full in a tooltip; when the title and `extra` both overflow, they share the shortfall
 - **`level`** `1-6` (default: `3`) — Heading level for accessibility
+- **`titlePreset`** `h1-h6` (default: the preset of `level`) — The title's typography preset, apart from its level: `level={1} titlePreset="h3"` gives an `h1` in the document outline that looks like an `h3`
 - **`breadcrumbs`** `[label, href][]` — Navigation breadcrumbs
 - **`subtitle`** `ReactNode` — Text below the title
 - **`suffix`** `ReactNode` — Content next to the title
@@ -451,6 +452,14 @@ A variant of Layout that enables CSS Grid for the content area.
 </Layout>
 ```
 
+### Page Title Sized Apart From Its Level
+
+A page keeps one `h1`, but in an app's chrome it often looks like an `h3`. `titlePreset` sets the title's look; `level` still sets its heading element.
+
+```jsx
+<Layout.Header title="Page title" level={1} titlePreset="h3" />
+```
+
 ### With Back Button
 
 ```jsx