@cube-dev/ui-kit 0.208.0 → 0.210.0

package/README.md

@@ -143,7 +143,7 @@ pnpm chromatic        # Run visual regression tests
 
 ### Agent reviews
 
-Local agent reviews follow the [UI Kit review rules](docs/rules/review.md), including [Entropy review](docs/rules/entropy.md#entropy-review). Use `$ui-review` in Codex or `/ui-review` in Claude for a full review, and `$entropy-review` or `/entropy-review` respectively for a focused complexity assessment.
+Local agent reviews follow the [UI Kit review rules](docs/rules/review.md), including [Entropy review](docs/rules/entropy.md#entropy-review). Use `$ui-review` in Codex or `/ui-review` in Claude for a full review, and `$entropy-review` or `/entropy-review` respectively for a focused complexity assessment. `$implement` or `/implement` takes a task from its Linear issue to a merged PR with these reviews as its review rounds; agents also use it when asked to implement a task end to end.
 
 ### Project Structure
 

package/dist/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @cube-dev/ui-kit
 
+## 0.210.0
+
+### Minor Changes
+
+- [#1633](https://github.com/cube-js/cube-ui-kit/pull/1633) [`ccdf7a83e`](https://github.com/cube-js/cube-ui-kit/commit/ccdf7a83e0f92f1bd87fd76b62f55c80c9da38e7) Thanks [@tenphi](https://github.com/tenphi)! - `Layout.Header` takes a `titlePreset` prop (`h1`–`h6`) that sets the title's typography preset apart from its `level`, so a page title can be an `h1` in the document outline and look like an `h3`: `<Layout.Header title="Billing" level={1} titlePreset="h3" />`. It replaces a `styles={{ Title: { preset } }}` override, which `tasty/no-protected-restyle` reports.
+
+### Patch Changes
+
+- [#1633](https://github.com/cube-js/cube-ui-kit/pull/1633) [`ccdf7a83e`](https://github.com/cube-js/cube-ui-kit/commit/ccdf7a83e0f92f1bd87fd76b62f55c80c9da38e7) Thanks [@tenphi](https://github.com/tenphi)! - The published `tasty.config.ts` lets a container that draws no fill and no border of its own (`Layout`, `GridLayout`, `Panel`, `ResizablePanel`, `Content`, `Header` and `Footer`) keep `fill` and `border`, so `tasty/no-protected-restyle` accepts a page backdrop such as `<Layout fill="#surface-2">` or a divider such as `<Panel border="top">`. `Layout`'s sections (`Layout.Content`, `Layout.Header`, `Layout.Toolbar` and the rest) keep `fill` only: the border that separates stacked sections is UI Kit's. `Card`, `Layout.Panel` and the other containers with a surface of their own stay as they were. Every container also keeps `textAlign`, which aligns the content it holds, and `container`, which names it for its content's container queries.
+
+## 0.209.0
+
+### Minor Changes
+
+- [#1632](https://github.com/cube-js/cube-ui-kit/pull/1632) [`0191fdd15`](https://github.com/cube-js/cube-ui-kit/commit/0191fdd15921ce26e1e8ddd689bde5a1a919b4fd) Thanks [@tenphi](https://github.com/tenphi)! - `Button` can collapse to fit a narrow window or container. `collapseState` says when: `true` for `@mobile`, a viewport narrower than 920px, or any state or condition, such as `'@(page, w < 864px)'`; it works in CSS, so crossing it re-renders only the button. `isCollapsed` collapses it from JavaScript, and `autoCollapse` collapses it while the row it sits in can't fit every child at full width, which follows the real width of the labels in any language. The button collapses when any of them says so. Collapsed, a button with an icon shows only the icon, its label kept as the accessible name and shown as the tooltip, and a button with a `shortLabel` shows that label instead. A button with neither warns that it has nothing to collapse to. UI Kit now registers the `@mobile` state (`@media(w < 920px)`) for every component's styles.
+
+- [#1630](https://github.com/cube-js/cube-ui-kit/pull/1630) [`8e4f68651`](https://github.com/cube-js/cube-ui-kit/commit/8e4f6865122dd51e4c0578fc054874955754b130) Thanks [@tenphi](https://github.com/tenphi)! - `FileInput` is easier to read and lines up with the inputs around it. The "Choose file" chip's label uses the accent text color instead of the accent fill, so it meets WCAG AA in light, dark and both high-contrast schemes (it was as low as 2.8:1 in dark), and it is medium weight with hover, pressed and drag-over feedback. "No file selected" (or the `placeholder`) is a softer gray than a chosen file name, still AA. The box is drawn like a text input's box: the same height at each `size` (28, 32 and 40px; `size` used to have no effect), the same border, focus and validation colors, and it now fills the width of its field as other inputs do. Pass `controlWidth` (or `width`) to make it narrower; a file name that does not fit ends in an ellipsis. Disabled uses the disabled colors. The pointer cursor now also shows over the "Choose file" chip. Space now opens the file dialog, as Enter does.
+
+### Patch Changes
+
+- [#1632](https://github.com/cube-js/cube-ui-kit/pull/1632) [`0191fdd15`](https://github.com/cube-js/cube-ui-kit/commit/0191fdd15921ce26e1e8ddd689bde5a1a919b4fd) Thanks [@tenphi](https://github.com/tenphi)! - UI Kit runs on Tasty 3.18.0 (`@tenphi/tasty`). A state alias, global or local to a component's styles, can now use other aliases in its expression, such as `'@compact': '@mobile & !expanded'`; before, Tasty dropped such an alias with a warning. A circular alias never matches and warns with `CIRCULAR_STATE_ALIAS`.
+
+- [#1632](https://github.com/cube-js/cube-ui-kit/pull/1632) [`0191fdd15`](https://github.com/cube-js/cube-ui-kit/commit/0191fdd15921ce26e1e8ddd689bde5a1a919b4fd) Thanks [@tenphi](https://github.com/tenphi)! - A `Button` whose label starts or stops truncating, for example when its container is resized, keeps its DOM node and its keyboard focus. The automatic tooltip used to wrap the button only while the label was cut off, so React replaced the `<button>` element each time and focus dropped to the page. The tooltip is now mounted beside the element instead of around it, and only while there is one. The same applies to every component with an automatic or toggled tooltip: `Item`, `ItemButton` and `Menu` items, `TextItem`, the `Layout.Header` title, `InlineInput`, `Checkbox`, `Switch`, `Radio` and text inputs. A component whose tooltip never turns on runs none of the tooltip's logic. `Item`'s private `isDynamicLabel` prop is removed: it kept the tooltip mounted only to avoid that remount.
+
 ## 0.208.0
 
 ### Minor Changes

package/dist/README.md

@@ -143,7 +143,7 @@ pnpm chromatic        # Run visual regression tests
 
 ### Agent reviews
 
-Local agent reviews follow the [UI Kit review rules](docs/rules/review.md), including [Entropy review](docs/rules/entropy.md#entropy-review). Use `$ui-review` in Codex or `/ui-review` in Claude for a full review, and `$entropy-review` or `/entropy-review` respectively for a focused complexity assessment.
+Local agent reviews follow the [UI Kit review rules](docs/rules/review.md), including [Entropy review](docs/rules/entropy.md#entropy-review). Use `$ui-review` in Codex or `/ui-review` in Claude for a full review, and `$entropy-review` or `/entropy-review` respectively for a focused complexity assessment. `$implement` or `/implement` takes a task from its Linear issue to a merged PR with these reviews as its review rounds; agents also use it when asked to implement a task end to end.
 
 ### Project Structure
 

package/dist/_internal/hooks/use-debounced-value.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, useState } from "react";
 //#region src/_internal/hooks/use-debounced-value.ts

package/dist/_internal/hooks/use-deprecation-warning.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 { deprecationWarning } from "../../utils/warnings.js";
 import { c } from "react/compiler-runtime";
 import React, { useEffect } from "react";

package/dist/_internal/hooks/use-event.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 { useSyncRef } from "./use-sync-ref.js";
 import { c } from "react/compiler-runtime";
 //#region src/_internal/hooks/use-event.ts

package/dist/_internal/hooks/use-is-first-render.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";
 //#region src/_internal/hooks/use-is-first-render.ts
 function useIsFirstRender() {

package/dist/_internal/hooks/use-sync-ref.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 { c } from "react/compiler-runtime";
 import { useRef } from "react";

package/dist/_internal/hooks/use-timer/timer.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/_internal/hooks/use-timer/timer.ts
 var Timer = class {
 	callback;

package/dist/_internal/hooks/use-timer/use-timer.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 "../use-event.js";
 import { Timer } from "./timer.js";
 import { c } from "react/compiler-runtime";

package/dist/_internal/hooks/use-warn.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 "./use-event.js";
 import { warn } from "../../utils/warnings.js";
 import { useRef } from "react";

package/dist/components/Block.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 { extractStyles } from "../utils/styles.js";
 import { c } from "react/compiler-runtime";
 import { CONTAINER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";

package/dist/components/CollectionItem.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 { ItemAction } from "./actions/ItemAction/ItemAction.js";
 import { ItemBadge } from "./content/ItemBadge/ItemBadge.js";
 import { Item } from "react-stately";

package/dist/components/GlobalStyles.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 { mergeStyleLayers } from "../utils/styles.js";
 import { usePaletteValue } from "../tokens/palette-config.js";
 import { getTokens } from "../tokens/all-tokens.js";

package/dist/components/GridProvider.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 { useCombinedRefs } from "../utils/react/useCombinedRefs.js";
 import { filterBaseProps, tasty } from "@tenphi/tasty";
 import { forwardRef, useCallback, useEffect, useState } from "react";

package/dist/components/HiddenInput.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 { tasty } from "@tenphi/tasty";
 //#region src/components/HiddenInput.tsx
 const HiddenInput = tasty({

package/dist/components/Root.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 { extractStyles } from "../utils/styles.js";
 import { PortalProvider } from "./portal/PortalProvider.js";
 import { TASTY_VERSION, VERSION } from "../version.js";
@@ -17,7 +17,10 @@ import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ModalProvider } from "react-aria";
 //#region src/components/Root.tsx
-setGlobalPredefinedStates(AMBIENT_PREDEFINED_STATES);
+setGlobalPredefinedStates({
+	...AMBIENT_PREDEFINED_STATES,
+	"@mobile": "@media(w < 920px)"
+});
 configure({
 	batchInjection: true,
 	units: {

package/dist/components/Root.js.map

@@ -1 +1 @@
-{"version":3,"file":"Root.js","names":["BASE_STYLES","BaseProps","BLOCK_STYLES","configure","filterBaseProps","setGlobalPredefinedStates","tasty","TastyBatchProvider","useEffect","useLayoutEffect","useRef","useState","ModalProvider","I18nProvider","Provider","NavigationAdapter","TrackingProps","TrackingProvider","PaletteConfig","setPaletteConfig","EventBusProvider","AMBIENT_PREDEFINED_STATES","extractStyles","TASTY_VERSION","VERSION","GlobalStyles","AlertDialogApiProvider","OverlayProvider","PortalProvider","i18n","I18nInstance","batchInjection","units","x","r","cr","bw","ow","recipes","reset","margin","padding","border","outline","boxSizing","button","appearance","touchAction","textDecoration","fill","color","cursor","disabled","input","wordSpacing","caretColor","shadow","preset","hide","RootElement","id","styles","display","STYLES","CubeRootProps","tokens","key","palette","bodyStyles","fontDisplay","fonts","publicUrl","navigation","font","monospaceFont","applyLegacyTokens","tracking","cursorStrategy","locale","Root","allProps","$","_c","children","t0","_applyLegacyTokens","t1","style","props","undefined","t2","t3","t4","ref","rootRef","setRootRef","t5","current","t6","Symbol","for","T0","T1","T2","T3","t7","event","T4","t10","eventProps","t11","t12","$pointer","t13","t14","t15","t8","t9","t16","t17","t18","t19","_c","I18nProvider"],"sources":["../../src/components/Root.tsx"],"sourcesContent":["import {\n  BASE_STYLES,\n  BaseProps,\n  BLOCK_STYLES,\n  configure,\n  filterBaseProps,\n  setGlobalPredefinedStates,\n  tasty,\n  TastyBatchProvider,\n} from '@tenphi/tasty';\nimport { useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport { ModalProvider } from 'react-aria';\n\nimport { I18nProvider } from '../i18n/I18nProvider';\nimport { Provider } from '../provider';\nimport { NavigationAdapter } from '../providers/navigation.types';\nimport { TrackingProps, TrackingProvider } from '../providers/TrackingProvider';\nimport { PaletteConfig, setPaletteConfig } from '../tokens/palette-config';\nimport { EventBusProvider } from '../utils/react/useEventBus';\nimport { AMBIENT_PREDEFINED_STATES } from '../utils/react/useScheme';\nimport { extractStyles } from '../utils/styles';\nimport { TASTY_VERSION, VERSION } from '../version';\n\nimport { GlobalStyles } from './GlobalStyles';\nimport { AlertDialogApiProvider } from './overlays/AlertDialog/AlertDialogApiProvider';\nimport { OverlayProvider } from './overlays/Notifications/OverlayProvider';\nimport { PortalProvider } from './portal/PortalProvider';\n\nimport type { i18n as I18nInstance } from 'i18next';\n\n// Color-scheme aliases for the Glaze-generated palette (see `src/tokens/palette.ts`).\n// Attribute opt-in wins over system preference:\n//   <html data-scheme=\"dark\">    → forces the dark scheme\n//   <html data-contrast=\"high\">  → forces the high-contrast scheme\n// Otherwise falls back to the user's `prefers-color-scheme` / `prefers-contrast`.\n// `@reduced-motion`, registered beside them, follows `prefers-reduced-motion:\n// reduce` alone.\n//\n// The strings live in `useScheme.ts`, which also reads the same two conditions\n// from JS (`useScheme()` / `useHighContrast()`) — one definition, so the CSS and\n// the JS answers cannot drift apart.\nsetGlobalPredefinedStates(AMBIENT_PREDEFINED_STATES);\n\nconfigure({\n  // Collapse the kit's stylesheet writes into one style invalidation per commit\n  // instead of one per component. Only takes effect inside a\n  // `<TastyBatchProvider>` window, and windows have to be opened per portal\n  // boundary because a commit that mounts a portal does not re-render `<Root>`.\n  // The kit opens three: here, in `<Portal>` (tooltips, Select and\n  // ListBoxPopover lists, notifications, AlertDialogZone) and in `<Overlay>`\n  // (popovers, modals, trays — i.e. Dialog and Menu). Writes in any commit\n  // without a window go straight through exactly as before, so a\n  // `useLayoutEffect` can never measure an element whose rules have not landed.\n  batchInjection: true,\n  units: {\n    x: 'var(--gap)',\n    r: 'var(--radius)',\n    cr: 'var(--card-radius)',\n    bw: 'var(--border-width)',\n    ow: 'var(--outline-width)',\n  },\n  recipes: {\n    reset: {\n      margin: 0,\n      padding: 0,\n      border: 0,\n      outline: 0,\n      boxSizing: 'border-box',\n    },\n    button: {\n      appearance: 'none',\n      touchAction: 'manipulation',\n      textDecoration: 'none',\n      '-webkit-tap-highlight-color': 'transparent',\n      fill: '#clear',\n      color: 'inherit',\n      cursor: {\n        '': 'default',\n        ':is(a)': 'pointer',\n        ':is(button)': '$pointer',\n        disabled: 'not-allowed',\n      },\n    },\n    input: {\n      appearance: 'none',\n      wordSpacing: 'initial',\n      color: 'inherit',\n      fill: '#clear',\n    },\n    'input-autofill': {\n      '@autofill': ':-webkit-autofill | :autofill',\n      appearance: {\n        '@autofill': 'none',\n      },\n      '-webkit-text-fill-color': {\n        '': 'currentColor',\n        '@autofill': '#primary-text',\n      },\n      caretColor: {\n        '@autofill': '#primary-text',\n      },\n      shadow: {\n        '@autofill': '0 0 0 9999rem #surface inset',\n      },\n      preset: {\n        '@autofill': 'inherit',\n      },\n      '-webkit-opacity': {\n        '': false,\n        '[disabled]': '1',\n      },\n    },\n    'input-placeholder': {\n      '-webkit-text-fill-color': '#placeholder',\n      color: '#placeholder',\n    },\n    'input-search-cancel-button': {\n      hide: true,\n      appearance: 'none',\n    },\n  },\n});\n\nconst RootElement = tasty({\n  id: 'cube-ui-kit-root',\n  styles: {\n    display: 'contents',\n    color: '#dark-02',\n    preset: 't3',\n  },\n});\n\nconst STYLES = [...BASE_STYLES, ...BLOCK_STYLES];\n\nexport interface CubeRootProps extends BaseProps {\n  tokens?: { [key: string]: string };\n  /**\n   * Tune the generated color palette. Every zone — `accent`, `base` and each status\n   * theme — takes the same seed: a color, or `{ hue, saturation }`. Plus the global\n   * `surfaceMode`, `pastel` and `contrastLevel`. Omitted fields take their default, so\n   * this prop describes the whole palette and dropping a field from it drops the\n   * customization.\n   *\n   * Removing the prop entirely is the one thing that does *not* reset the\n   * palette, so `<Root>` with no `palette` cannot clobber a host's imperative\n   * `setPaletteConfig()` call. Pass `{}` to ask for the default.\n   *\n   * The first mount applies it during render, so the first paint is already\n   * tuned; a later change applies in a layout effect, before paint.\n   *\n   * The palette is global process state, so this is a declarative wrapper over\n   * `setPaletteConfig()`; both drive the same store, and the last write wins.\n   * Root's layout effect runs after its descendants' in the same commit, so a\n   * descendant's `setPaletteConfig()` from a layout effect in that commit loses\n   * to the prop; write from a passive effect or an event handler instead.\n   * See `Getting Started/Theming` in Storybook.\n   */\n  palette?: PaletteConfig;\n  bodyStyles?: { [key: string]: string };\n  fontDisplay?: 'auto' | 'block' | 'swap' | 'fallback' | 'optional';\n  fonts?: boolean;\n  publicUrl?: string;\n  navigation?: NavigationAdapter;\n  font?: string;\n  monospaceFont?: string;\n  /** @deprecated Tokens are now always applied via GlobalStyles */\n  applyLegacyTokens?: boolean;\n  tracking?: TrackingProps;\n  cursorStrategy?: 'web' | 'native';\n  /**\n   * i18next instance for this tree. During SSR, pass a request-local instance\n   * created with `createUIKitI18n(locale)`.\n   */\n  i18n?: I18nInstance;\n  /** Override the React Aria formatting locale. */\n  locale?: string;\n}\n\nexport function Root(allProps: CubeRootProps) {\n  let {\n    children,\n    /** Raw css styles for body element */\n    bodyStyles,\n    fontDisplay = 'swap',\n    fonts,\n    publicUrl,\n    navigation,\n    font,\n    monospaceFont,\n    applyLegacyTokens: _applyLegacyTokens, // deprecated, ignored\n    tracking,\n    cursorStrategy = 'web',\n    style,\n    tokens,\n    palette,\n    i18n,\n    locale,\n    ...props\n  } = allProps;\n\n  // The first mount applies the palette during render, so the first paint and\n  // SSR output already use it and `GlobalStyles` below reads it directly. A lazy\n  // initializer runs once per mount, which React Compiler preserves; a `useMemo`\n  // compiles to a call on every render. A later change waits for the layout\n  // effect: a write notifies every palette subscriber, and React rejects\n  // updating another component while this one renders. Updates from a layout\n  // effect still land before paint. `setPaletteConfig` is a no-op when the\n  // resolved config is unchanged, so the effect's mount pass, an inline object\n  // literal and StrictMode's double calls cost nothing.\n  //\n  // A `<Root>` that mounts while another tree already subscribes, with a\n  // different palette, still notifies that tree during its first render.\n  useState(() => {\n    if (palette) setPaletteConfig(palette);\n  });\n\n  useLayoutEffect(() => {\n    if (palette) setPaletteConfig(palette);\n  }, [palette]);\n\n  const ref = useRef(null);\n\n  const [rootRef, setRootRef] = useState();\n\n  useEffect(() => {\n    if (!rootRef) {\n      // @ts-ignore\n      setRootRef(ref?.current);\n    }\n  }, []);\n\n  const styles = extractStyles(props, STYLES);\n\n  return (\n    <TastyBatchProvider>\n      <I18nProvider i18n={i18n} locale={locale}>\n        <Provider navigation={navigation} root={rootRef}>\n          <TrackingProvider event={tracking?.event}>\n            <RootElement\n              ref={ref}\n              data-uikit={VERSION}\n              data-tasty={TASTY_VERSION}\n              data-font-display={fontDisplay}\n              {...filterBaseProps(props, { eventProps: true })}\n              styles={styles}\n              tokens={{\n                $pointer: cursorStrategy === 'web' ? 'pointer' : 'default',\n                ...tokens,\n              }}\n              // oxlint-disable-next-line tasty/no-style-prop -- forwards the consumer's public `style` prop\n              style={style}\n            >\n              <GlobalStyles\n                bodyStyles={bodyStyles}\n                publicUrl={publicUrl}\n                fonts={fonts}\n                font={font}\n                monospaceFont={monospaceFont}\n                fontDisplay={fontDisplay}\n              />\n              <ModalProvider>\n                <PortalProvider value={ref}>\n                  <EventBusProvider>\n                    <OverlayProvider>\n                      <AlertDialogApiProvider>\n                        {children}\n                      </AlertDialogApiProvider>\n                    </OverlayProvider>\n                  </EventBusProvider>\n                </PortalProvider>\n              </ModalProvider>\n            </RootElement>\n          </TrackingProvider>\n        </Provider>\n      </I18nProvider>\n    </TastyBatchProvider>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"Root.js","names":["BASE_STYLES","BaseProps","BLOCK_STYLES","configure","filterBaseProps","setGlobalPredefinedStates","tasty","TastyBatchProvider","useEffect","useLayoutEffect","useRef","useState","ModalProvider","I18nProvider","Provider","NavigationAdapter","TrackingProps","TrackingProvider","PaletteConfig","setPaletteConfig","EventBusProvider","AMBIENT_PREDEFINED_STATES","extractStyles","TASTY_VERSION","VERSION","GlobalStyles","AlertDialogApiProvider","OverlayProvider","PortalProvider","i18n","I18nInstance","batchInjection","units","x","r","cr","bw","ow","recipes","reset","margin","padding","border","outline","boxSizing","button","appearance","touchAction","textDecoration","fill","color","cursor","disabled","input","wordSpacing","caretColor","shadow","preset","hide","RootElement","id","styles","display","STYLES","CubeRootProps","tokens","key","palette","bodyStyles","fontDisplay","fonts","publicUrl","navigation","font","monospaceFont","applyLegacyTokens","tracking","cursorStrategy","locale","Root","allProps","$","_c","children","t0","_applyLegacyTokens","t1","style","props","undefined","t2","t3","t4","ref","rootRef","setRootRef","t5","current","t6","Symbol","for","T0","T1","T2","T3","t7","event","T4","t10","eventProps","t11","t12","$pointer","t13","t14","t15","t8","t9","t16","t17","t18","t19","_c","I18nProvider"],"sources":["../../src/components/Root.tsx"],"sourcesContent":["import {\n  BASE_STYLES,\n  BaseProps,\n  BLOCK_STYLES,\n  configure,\n  filterBaseProps,\n  setGlobalPredefinedStates,\n  tasty,\n  TastyBatchProvider,\n} from '@tenphi/tasty';\nimport { useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport { ModalProvider } from 'react-aria';\n\nimport { I18nProvider } from '../i18n/I18nProvider';\nimport { Provider } from '../provider';\nimport { NavigationAdapter } from '../providers/navigation.types';\nimport { TrackingProps, TrackingProvider } from '../providers/TrackingProvider';\nimport { PaletteConfig, setPaletteConfig } from '../tokens/palette-config';\nimport { EventBusProvider } from '../utils/react/useEventBus';\nimport { AMBIENT_PREDEFINED_STATES } from '../utils/react/useScheme';\nimport { extractStyles } from '../utils/styles';\nimport { TASTY_VERSION, VERSION } from '../version';\n\nimport { GlobalStyles } from './GlobalStyles';\nimport { AlertDialogApiProvider } from './overlays/AlertDialog/AlertDialogApiProvider';\nimport { OverlayProvider } from './overlays/Notifications/OverlayProvider';\nimport { PortalProvider } from './portal/PortalProvider';\n\nimport type { i18n as I18nInstance } from 'i18next';\n\n// Color-scheme aliases for the Glaze-generated palette (see `src/tokens/palette.ts`).\n// Attribute opt-in wins over system preference:\n//   <html data-scheme=\"dark\">    → forces the dark scheme\n//   <html data-contrast=\"high\">  → forces the high-contrast scheme\n// Otherwise falls back to the user's `prefers-color-scheme` / `prefers-contrast`.\n// `@reduced-motion`, registered beside them, follows `prefers-reduced-motion:\n// reduce` alone.\n//\n// The strings live in `useScheme.ts`, which also reads the same two conditions\n// from JS (`useScheme()` / `useHighContrast()`) — one definition, so the CSS and\n// the JS answers cannot drift apart.\nsetGlobalPredefinedStates({\n  ...AMBIENT_PREDEFINED_STATES,\n  // A viewport too narrow for the desktop layout. `<Button collapseState>`\n  // collapses there. Cube Cloud defines the same value.\n  '@mobile': '@media(w < 920px)',\n});\n\nconfigure({\n  // Collapse the kit's stylesheet writes into one style invalidation per commit\n  // instead of one per component. Only takes effect inside a\n  // `<TastyBatchProvider>` window, and windows have to be opened per portal\n  // boundary because a commit that mounts a portal does not re-render `<Root>`.\n  // The kit opens three: here, in `<Portal>` (tooltips, Select and\n  // ListBoxPopover lists, notifications, AlertDialogZone) and in `<Overlay>`\n  // (popovers, modals, trays — i.e. Dialog and Menu). Writes in any commit\n  // without a window go straight through exactly as before, so a\n  // `useLayoutEffect` can never measure an element whose rules have not landed.\n  batchInjection: true,\n  units: {\n    x: 'var(--gap)',\n    r: 'var(--radius)',\n    cr: 'var(--card-radius)',\n    bw: 'var(--border-width)',\n    ow: 'var(--outline-width)',\n  },\n  recipes: {\n    reset: {\n      margin: 0,\n      padding: 0,\n      border: 0,\n      outline: 0,\n      boxSizing: 'border-box',\n    },\n    button: {\n      appearance: 'none',\n      touchAction: 'manipulation',\n      textDecoration: 'none',\n      '-webkit-tap-highlight-color': 'transparent',\n      fill: '#clear',\n      color: 'inherit',\n      cursor: {\n        '': 'default',\n        ':is(a)': 'pointer',\n        ':is(button)': '$pointer',\n        disabled: 'not-allowed',\n      },\n    },\n    input: {\n      appearance: 'none',\n      wordSpacing: 'initial',\n      color: 'inherit',\n      fill: '#clear',\n    },\n    'input-autofill': {\n      '@autofill': ':-webkit-autofill | :autofill',\n      appearance: {\n        '@autofill': 'none',\n      },\n      '-webkit-text-fill-color': {\n        '': 'currentColor',\n        '@autofill': '#primary-text',\n      },\n      caretColor: {\n        '@autofill': '#primary-text',\n      },\n      shadow: {\n        '@autofill': '0 0 0 9999rem #surface inset',\n      },\n      preset: {\n        '@autofill': 'inherit',\n      },\n      '-webkit-opacity': {\n        '': false,\n        '[disabled]': '1',\n      },\n    },\n    'input-placeholder': {\n      '-webkit-text-fill-color': '#placeholder',\n      color: '#placeholder',\n    },\n    'input-search-cancel-button': {\n      hide: true,\n      appearance: 'none',\n    },\n  },\n});\n\nconst RootElement = tasty({\n  id: 'cube-ui-kit-root',\n  styles: {\n    display: 'contents',\n    color: '#dark-02',\n    preset: 't3',\n  },\n});\n\nconst STYLES = [...BASE_STYLES, ...BLOCK_STYLES];\n\nexport interface CubeRootProps extends BaseProps {\n  tokens?: { [key: string]: string };\n  /**\n   * Tune the generated color palette. Every zone — `accent`, `base` and each status\n   * theme — takes the same seed: a color, or `{ hue, saturation }`. Plus the global\n   * `surfaceMode`, `pastel` and `contrastLevel`. Omitted fields take their default, so\n   * this prop describes the whole palette and dropping a field from it drops the\n   * customization.\n   *\n   * Removing the prop entirely is the one thing that does *not* reset the\n   * palette, so `<Root>` with no `palette` cannot clobber a host's imperative\n   * `setPaletteConfig()` call. Pass `{}` to ask for the default.\n   *\n   * The first mount applies it during render, so the first paint is already\n   * tuned; a later change applies in a layout effect, before paint.\n   *\n   * The palette is global process state, so this is a declarative wrapper over\n   * `setPaletteConfig()`; both drive the same store, and the last write wins.\n   * Root's layout effect runs after its descendants' in the same commit, so a\n   * descendant's `setPaletteConfig()` from a layout effect in that commit loses\n   * to the prop; write from a passive effect or an event handler instead.\n   * See `Getting Started/Theming` in Storybook.\n   */\n  palette?: PaletteConfig;\n  bodyStyles?: { [key: string]: string };\n  fontDisplay?: 'auto' | 'block' | 'swap' | 'fallback' | 'optional';\n  fonts?: boolean;\n  publicUrl?: string;\n  navigation?: NavigationAdapter;\n  font?: string;\n  monospaceFont?: string;\n  /** @deprecated Tokens are now always applied via GlobalStyles */\n  applyLegacyTokens?: boolean;\n  tracking?: TrackingProps;\n  cursorStrategy?: 'web' | 'native';\n  /**\n   * i18next instance for this tree. During SSR, pass a request-local instance\n   * created with `createUIKitI18n(locale)`.\n   */\n  i18n?: I18nInstance;\n  /** Override the React Aria formatting locale. */\n  locale?: string;\n}\n\nexport function Root(allProps: CubeRootProps) {\n  let {\n    children,\n    /** Raw css styles for body element */\n    bodyStyles,\n    fontDisplay = 'swap',\n    fonts,\n    publicUrl,\n    navigation,\n    font,\n    monospaceFont,\n    applyLegacyTokens: _applyLegacyTokens, // deprecated, ignored\n    tracking,\n    cursorStrategy = 'web',\n    style,\n    tokens,\n    palette,\n    i18n,\n    locale,\n    ...props\n  } = allProps;\n\n  // The first mount applies the palette during render, so the first paint and\n  // SSR output already use it and `GlobalStyles` below reads it directly. A lazy\n  // initializer runs once per mount, which React Compiler preserves; a `useMemo`\n  // compiles to a call on every render. A later change waits for the layout\n  // effect: a write notifies every palette subscriber, and React rejects\n  // updating another component while this one renders. Updates from a layout\n  // effect still land before paint. `setPaletteConfig` is a no-op when the\n  // resolved config is unchanged, so the effect's mount pass, an inline object\n  // literal and StrictMode's double calls cost nothing.\n  //\n  // A `<Root>` that mounts while another tree already subscribes, with a\n  // different palette, still notifies that tree during its first render.\n  useState(() => {\n    if (palette) setPaletteConfig(palette);\n  });\n\n  useLayoutEffect(() => {\n    if (palette) setPaletteConfig(palette);\n  }, [palette]);\n\n  const ref = useRef(null);\n\n  const [rootRef, setRootRef] = useState();\n\n  useEffect(() => {\n    if (!rootRef) {\n      // @ts-ignore\n      setRootRef(ref?.current);\n    }\n  }, []);\n\n  const styles = extractStyles(props, STYLES);\n\n  return (\n    <TastyBatchProvider>\n      <I18nProvider i18n={i18n} locale={locale}>\n        <Provider navigation={navigation} root={rootRef}>\n          <TrackingProvider event={tracking?.event}>\n            <RootElement\n              ref={ref}\n              data-uikit={VERSION}\n              data-tasty={TASTY_VERSION}\n              data-font-display={fontDisplay}\n              {...filterBaseProps(props, { eventProps: true })}\n              styles={styles}\n              tokens={{\n                $pointer: cursorStrategy === 'web' ? 'pointer' : 'default',\n                ...tokens,\n              }}\n              // oxlint-disable-next-line tasty/no-style-prop -- forwards the consumer's public `style` prop\n              style={style}\n            >\n              <GlobalStyles\n                bodyStyles={bodyStyles}\n                publicUrl={publicUrl}\n                fonts={fonts}\n                font={font}\n                monospaceFont={monospaceFont}\n                fontDisplay={fontDisplay}\n              />\n              <ModalProvider>\n                <PortalProvider value={ref}>\n                  <EventBusProvider>\n                    <OverlayProvider>\n                      <AlertDialogApiProvider>\n                        {children}\n                      </AlertDialogApiProvider>\n                    </OverlayProvider>\n                  </EventBusProvider>\n                </PortalProvider>\n              </ModalProvider>\n            </RootElement>\n          </TrackingProvider>\n        </Provider>\n      </I18nProvider>\n    </TastyBatchProvider>\n  );\n}\n"],"mappings":"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"}

package/dist/components/actions/Action/Action.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 { extractStyles } from "../../../utils/styles.js";
 import { useAction } from "../use-action.js";
 import { c } from "react/compiler-runtime";

package/dist/components/actions/Banner/Banner.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 { useI18n } from "../../../i18n/useI18n.js";
 import { Item as _Item } from "../../content/Item/Item.js";

package/dist/components/actions/Button/AutoCollapseObserver.js

@@ -0,0 +1,215 @@
+/** @license MIT | @cube-dev/ui-kit v0.210.0 | Cube Dev Team */
+import { useLayoutEffect as useLayoutEffect$1 } from "../../../utils/react/useLayoutEffect.js";
+import { c } from "react/compiler-runtime";
+import { useEffectEvent, useRef } from "react";
+import { flushSync } from "react-dom";
+//#region src/components/actions/Button/AutoCollapseObserver.tsx
+const rows = /* @__PURE__ */ new WeakMap();
+const pendingRows = /* @__PURE__ */ new Set();
+/**
+* One observer for every row. It watches the rows alone: collapsing changes
+* the buttons' widths but not their row's, so it never reports its own
+* decision back.
+*/
+let rowObserver = null;
+function getRowObserver() {
+	rowObserver ??= new ResizeObserver((records) => {
+		for (const record of records) scheduleRowCheck(record.target);
+	});
+	return rowObserver;
+}
+function px(value) {
+	return parseFloat(value) || 0;
+}
+function getContentWidth(row) {
+	const style = getComputedStyle(row);
+	return row.clientWidth - px(style.paddingLeft) - px(style.paddingRight);
+}
+function getLabel(element) {
+	return element.querySelector(":scope > [data-element=\"Label\"]");
+}
+/**
+* Whether a button shows its collapsed form, whichever trigger collapsed it.
+* Read from the styles the collapse applies rather than from widths: a label
+* squeezed to nothing is not collapsed.
+*/
+function isShownCollapsed(element, label) {
+	if (element.dataset.collapse === "label") {
+		const full = label.querySelector(":scope > [data-element=\"FullLabel\"]");
+		return !!full && getComputedStyle(full).display === "none";
+	}
+	return getComputedStyle(label).maxWidth === "0px";
+}
+/**
+* How much wider the row has to be for its expanded buttons to show their
+* labels whole: what their labels cut off, plus what overflows the row. A
+* button another trigger collapsed has no label on show, so it adds nothing.
+*/
+function getShortfall(row, state) {
+	let shortfall = Math.max(0, row.scrollWidth - row.clientWidth);
+	for (const { element } of state.entries) {
+		const label = getLabel(element);
+		if (!label || isShownCollapsed(element, label)) continue;
+		shortfall += Math.max(0, label.scrollWidth - label.clientWidth);
+	}
+	return shortfall;
+}
+/** Whether the row's buttons should be collapsed now. */
+function decide(row, state) {
+	const width = getContentWidth(row);
+	if (state.isStale) state.neededWidth = void 0;
+	if (state.isCollapsed) return state.neededWidth !== void 0 && width + .5 < state.neededWidth;
+	const shortfall = getShortfall(row, state);
+	if (shortfall <= 0) return false;
+	state.neededWidth = Math.max(state.neededWidth ?? 0, width + shortfall);
+	return true;
+}
+/**
+* Checks every queued row and applies the decisions in one synchronous render,
+* before paint, as `useAutoTooltip` applies its overflow verdicts. A row that
+* expanded is checked once more, which can only collapse it again.
+*/
+function runRowChecks() {
+	const queued = Array.from(pendingRows);
+	pendingRows.clear();
+	const changes = [];
+	const expanded = [];
+	for (const row of queued) {
+		const state = rows.get(row);
+		if (!state || !state.entries.size || !row.isConnected) continue;
+		const wasCollapsed = state.isCollapsed;
+		const isCollapsed = decide(row, state);
+		state.isCollapsed = isCollapsed;
+		state.isStale = false;
+		if (wasCollapsed && !isCollapsed) expanded.push(row);
+		for (const entry of state.entries) if (entry.isCollapsed !== isCollapsed) changes.push([entry, isCollapsed]);
+	}
+	if (changes.length) flushSync(() => {
+		for (const [entry, isCollapsed] of changes) {
+			entry.isCollapsed = isCollapsed;
+			entry.notify(isCollapsed);
+		}
+	});
+	for (const row of expanded) scheduleRowCheck(row);
+}
+function scheduleRowCheck(row, isStale = false) {
+	const state = rows.get(row);
+	if (!state) return;
+	if (isStale) state.isStale = true;
+	if (!pendingRows.size) queueMicrotask(runRowChecks);
+	pendingRows.add(row);
+}
+function joinRow(row, element, notify) {
+	let state = rows.get(row);
+	if (!state) {
+		const childObserver = new MutationObserver(() => scheduleRowCheck(row, true));
+		state = {
+			entries: /* @__PURE__ */ new Set(),
+			isCollapsed: false,
+			neededWidth: void 0,
+			isStale: false,
+			childObserver
+		};
+		rows.set(row, state);
+		getRowObserver().observe(row);
+		childObserver.observe(row, { childList: true });
+	}
+	const entry = {
+		element,
+		notify,
+		isCollapsed: false
+	};
+	const joined = state;
+	joined.entries.add(entry);
+	scheduleRowCheck(row, true);
+	return () => {
+		joined.entries.delete(entry);
+		if (joined.entries.size) scheduleRowCheck(row, true);
+		else {
+			rows.delete(row);
+			rowObserver?.unobserve(row);
+			joined.childObserver.disconnect();
+		}
+	};
+}
+/**
+* Renders nothing. `Button` mounts it only with `autoCollapse`, so a button
+* without the prop runs none of this.
+*/
+function AutoCollapseObserver(t0) {
+	const $ = c(13);
+	const { targetRef, contentKey, isLabelCut, onChange } = t0;
+	let t1;
+	if ($[0] !== onChange) {
+		t1 = (isCollapsed) => {
+			onChange(isCollapsed);
+		};
+		$[0] = onChange;
+		$[1] = t1;
+	} else t1 = $[1];
+	const notify = useEffectEvent(t1);
+	const rowRef = useRef(null);
+	let t2;
+	if ($[2] !== notify || $[3] !== targetRef) {
+		t2 = () => {
+			let leave;
+			let isActive = true;
+			queueMicrotask(() => {
+				const element = targetRef.current;
+				const row = element?.parentElement;
+				if (!isActive || !element || !row) return;
+				rowRef.current = row;
+				leave = joinRow(row, element, (isCollapsed_0) => notify(isCollapsed_0));
+			});
+			return () => {
+				isActive = false;
+				rowRef.current = null;
+				leave?.();
+				notify(false);
+			};
+		};
+		$[2] = notify;
+		$[3] = targetRef;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== targetRef) {
+		t3 = [targetRef];
+		$[5] = targetRef;
+		$[6] = t3;
+	} else t3 = $[6];
+	useLayoutEffect$1(t2, t3);
+	let t4;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = () => {
+			if (rowRef.current) scheduleRowCheck(rowRef.current, true);
+		};
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== contentKey) {
+		t5 = [contentKey];
+		$[8] = contentKey;
+		$[9] = t5;
+	} else t5 = $[9];
+	useLayoutEffect$1(t4, t5);
+	let t6;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = () => {
+			if (rowRef.current) scheduleRowCheck(rowRef.current);
+		};
+		$[10] = t6;
+	} else t6 = $[10];
+	let t7;
+	if ($[11] !== isLabelCut) {
+		t7 = [isLabelCut];
+		$[11] = isLabelCut;
+		$[12] = t7;
+	} else t7 = $[12];
+	useLayoutEffect$1(t6, t7);
+	return null;
+}
+//#endregion
+export { AutoCollapseObserver };
+
+//# sourceMappingURL=AutoCollapseObserver.js.map

package/dist/components/actions/Button/AutoCollapseObserver.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutoCollapseObserver.js","names":["RefObject","useEffectEvent","useRef","flushSync","useLayoutEffect","RowEntry","element","HTMLElement","notify","isCollapsed","RowState","entries","Set","neededWidth","isStale","childObserver","MutationObserver","rows","WeakMap","pendingRows","rowObserver","ResizeObserver","getRowObserver","records","record","scheduleRowCheck","target","px","value","parseFloat","getContentWidth","row","style","getComputedStyle","clientWidth","paddingLeft","paddingRight","getLabel","querySelector","isShownCollapsed","label","dataset","collapse","full","display","maxWidth","getShortfall","state","shortfall","Math","max","scrollWidth","decide","width","undefined","runRowChecks","queued","Array","from","clear","changes","expanded","get","size","isConnected","wasCollapsed","push","entry","length","queueMicrotask","add","joinRow","set","observe","childList","joined","delete","unobserve","disconnect","AutoCollapseObserverProps","targetRef","contentKey","isLabelCut","onChange","AutoCollapseObserver","t0","$","_c","t1","rowRef","t2","leave","isActive","current","parentElement","isCollapsed_0","t3","t4","Symbol","for","t5","t6","t7","_c"],"sources":["../../../../src/components/actions/Button/AutoCollapseObserver.tsx"],"sourcesContent":["import { RefObject, useEffectEvent, useRef } from 'react';\nimport { flushSync } from 'react-dom';\n\nimport { useLayoutEffect } from '../../../utils/react/useLayoutEffect';\n\n/**\n * Collapses the `Button`s with `autoCollapse` in a row while the row can't fit\n * them expanded, and expands them once it can. The row is the button's parent\n * element, and its buttons collapse together.\n *\n * The decision reads the buttons, not their siblings:\n *\n * - **Expanded**, the row is too narrow when one of its buttons' labels is cut\n *   off, or the row overflows. The row then collapses its buttons, and\n *   remembers how wide it would have had to be: its width plus everything that\n *   was cut off.\n * - **Collapsed**, the row expands its buttons once it is that wide. The freed\n *   width may have gone to a sibling that grows or to an auto margin, so\n *   adding up the siblings' widths would never show the row fitting again.\n * - **After expanding**, the row checks again, before paint. If the buttons\n *   are cut off after all, they collapse again with the larger width\n *   remembered, so the estimate only grows and the decision settles.\n *\n * When something the needed width depends on changes while collapsed (a\n * button's content, a child added or removed), the remembered width is stale:\n * the row expands, checks and collapses again if it has to, all before paint.\n *\n * A row as wide as its content always fits, so its buttons never collapse: its\n * width has to come from its container (a block, `flex: 1`, a fixed width).\n * Wrapping and vertical rows give their buttons room by wrapping or stacking,\n * so their buttons never collapse either.\n */\n\ninterface RowEntry {\n  element: HTMLElement;\n  notify: (isCollapsed: boolean) => void;\n  isCollapsed: boolean;\n}\n\ninterface RowState {\n  entries: Set<RowEntry>;\n  isCollapsed: boolean;\n  /** The row's content width at which its buttons fit expanded. */\n  neededWidth: number | undefined;\n  /** The needed width may be wrong: try expanded, then check. */\n  isStale: boolean;\n  /** Children added or removed change what the row needs. */\n  childObserver: MutationObserver;\n}\n\nconst rows = new WeakMap<HTMLElement, RowState>();\nconst pendingRows = new Set<HTMLElement>();\n\n/**\n * One observer for every row. It watches the rows alone: collapsing changes\n * the buttons' widths but not their row's, so it never reports its own\n * decision back.\n */\nlet rowObserver: ResizeObserver | null = null;\n\nfunction getRowObserver() {\n  rowObserver ??= new ResizeObserver((records) => {\n    for (const record of records) {\n      scheduleRowCheck(record.target as HTMLElement);\n    }\n  });\n\n  return rowObserver;\n}\n\nfunction px(value: string) {\n  return parseFloat(value) || 0;\n}\n\nfunction getContentWidth(row: HTMLElement) {\n  const style = getComputedStyle(row);\n\n  return row.clientWidth - px(style.paddingLeft) - px(style.paddingRight);\n}\n\nfunction getLabel(element: HTMLElement) {\n  return element.querySelector<HTMLElement>(':scope > [data-element=\"Label\"]');\n}\n\n/**\n * Whether a button shows its collapsed form, whichever trigger collapsed it.\n * Read from the styles the collapse applies rather than from widths: a label\n * squeezed to nothing is not collapsed.\n */\nfunction isShownCollapsed(element: HTMLElement, label: HTMLElement) {\n  if (element.dataset.collapse === 'label') {\n    const full = label.querySelector<HTMLElement>(\n      ':scope > [data-element=\"FullLabel\"]',\n    );\n\n    return !!full && getComputedStyle(full).display === 'none';\n  }\n\n  return getComputedStyle(label).maxWidth === '0px';\n}\n\n/**\n * How much wider the row has to be for its expanded buttons to show their\n * labels whole: what their labels cut off, plus what overflows the row. A\n * button another trigger collapsed has no label on show, so it adds nothing.\n */\nfunction getShortfall(row: HTMLElement, state: RowState) {\n  let shortfall = Math.max(0, row.scrollWidth - row.clientWidth);\n\n  for (const { element } of state.entries) {\n    const label = getLabel(element);\n\n    if (!label || isShownCollapsed(element, label)) continue;\n\n    shortfall += Math.max(0, label.scrollWidth - label.clientWidth);\n  }\n\n  return shortfall;\n}\n\n/** Whether the row's buttons should be collapsed now. */\nfunction decide(row: HTMLElement, state: RowState) {\n  const width = getContentWidth(row);\n\n  // What the row remembered was measured on content that has since changed.\n  if (state.isStale) state.neededWidth = undefined;\n\n  if (state.isCollapsed) {\n    // Half a pixel of slack for sub-pixel widths, so an exact fit expands.\n    return state.neededWidth !== undefined && width + 0.5 < state.neededWidth;\n  }\n\n  const shortfall = getShortfall(row, state);\n\n  if (shortfall <= 0) return false;\n\n  state.neededWidth = Math.max(state.neededWidth ?? 0, width + shortfall);\n\n  return true;\n}\n\n/**\n * Checks every queued row and applies the decisions in one synchronous render,\n * before paint, as `useAutoTooltip` applies its overflow verdicts. A row that\n * expanded is checked once more, which can only collapse it again.\n */\nfunction runRowChecks() {\n  const queued = Array.from(pendingRows);\n\n  pendingRows.clear();\n\n  const changes: [RowEntry, boolean][] = [];\n  const expanded: HTMLElement[] = [];\n\n  for (const row of queued) {\n    const state = rows.get(row);\n\n    if (!state || !state.entries.size || !row.isConnected) continue;\n\n    const wasCollapsed = state.isCollapsed;\n    const isCollapsed = decide(row, state);\n\n    state.isCollapsed = isCollapsed;\n    state.isStale = false;\n    if (wasCollapsed && !isCollapsed) expanded.push(row);\n\n    for (const entry of state.entries) {\n      if (entry.isCollapsed !== isCollapsed) changes.push([entry, isCollapsed]);\n    }\n  }\n\n  if (changes.length) {\n    flushSync(() => {\n      for (const [entry, isCollapsed] of changes) {\n        entry.isCollapsed = isCollapsed;\n        entry.notify(isCollapsed);\n      }\n    });\n  }\n\n  for (const row of expanded) scheduleRowCheck(row);\n}\n\nfunction scheduleRowCheck(row: HTMLElement, isStale = false) {\n  const state = rows.get(row);\n\n  if (!state) return;\n  if (isStale) state.isStale = true;\n  if (!pendingRows.size) queueMicrotask(runRowChecks);\n\n  pendingRows.add(row);\n}\n\nfunction joinRow(\n  row: HTMLElement,\n  element: HTMLElement,\n  notify: RowEntry['notify'],\n) {\n  let state = rows.get(row);\n\n  if (!state) {\n    const childObserver = new MutationObserver(() =>\n      scheduleRowCheck(row, true),\n    );\n\n    state = {\n      entries: new Set(),\n      isCollapsed: false,\n      neededWidth: undefined,\n      isStale: false,\n      childObserver,\n    };\n    rows.set(row, state);\n    getRowObserver().observe(row);\n    childObserver.observe(row, { childList: true });\n  }\n\n  const entry: RowEntry = { element, notify, isCollapsed: false };\n  const joined = state;\n\n  joined.entries.add(entry);\n  scheduleRowCheck(row, true);\n\n  return () => {\n    joined.entries.delete(entry);\n\n    if (joined.entries.size) {\n      // The row may fit its remaining buttons now.\n      scheduleRowCheck(row, true);\n    } else {\n      rows.delete(row);\n      rowObserver?.unobserve(row);\n      joined.childObserver.disconnect();\n    }\n  };\n}\n\nexport interface AutoCollapseObserverProps {\n  /** The button element; its parent is the measured row. */\n  targetRef: RefObject<HTMLElement | null>;\n  /**\n   * Changes whenever the button's full width can: its label, short label,\n   * icons, size, and whether another trigger collapses it.\n   */\n  contentKey: string;\n  /**\n   * Whether the button's label is cut off, from its automatic tooltip. A\n   * sibling that grows squeezes the button without resizing the row.\n   */\n  isLabelCut: boolean;\n  onChange: (isCollapsed: boolean) => void;\n}\n\n/**\n * Renders nothing. `Button` mounts it only with `autoCollapse`, so a button\n * without the prop runs none of this.\n */\nexport function AutoCollapseObserver({\n  targetRef,\n  contentKey,\n  isLabelCut,\n  onChange,\n}: AutoCollapseObserverProps) {\n  const notify = useEffectEvent((isCollapsed: boolean) => {\n    onChange(isCollapsed);\n  });\n  // The row joined. The button's ref can't be read from this child's layout\n  // effects: on every update React detaches the button's callback ref before\n  // they run and attaches it again only after them.\n  const rowRef = useRef<HTMLElement | null>(null);\n\n  useLayoutEffect(() => {\n    let leave: (() => void) | undefined;\n    let isActive = true;\n\n    // The button's ref is attached after this child's layout effect, so the\n    // row is joined once the commit has finished, still before paint.\n    queueMicrotask(() => {\n      const element = targetRef.current;\n      const row = element?.parentElement;\n\n      if (!isActive || !element || !row) return;\n\n      rowRef.current = row;\n      leave = joinRow(row, element, (isCollapsed) => notify(isCollapsed));\n    });\n\n    return () => {\n      isActive = false;\n      rowRef.current = null;\n      leave?.();\n      notify(false);\n    };\n  }, [targetRef]);\n\n  // What the button needs changed, so what the row remembers may be wrong.\n  // Joining checks the row anyway, so before that there is nothing to do.\n  useLayoutEffect(() => {\n    if (rowRef.current) scheduleRowCheck(rowRef.current, true);\n  }, [contentKey]);\n\n  // The row didn't resize, but the button may no longer fit it.\n  useLayoutEffect(() => {\n    if (rowRef.current) scheduleRowCheck(rowRef.current);\n  }, [isLabelCut]);\n\n  return null;\n}\n"],"mappings":"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"}

package/dist/components/actions/Button/Button.d.ts

@@ -3,6 +3,7 @@ import { CubeTooltipProviderProps } from "../../overlays/Tooltip/TooltipProvider
 import { DynamicIcon } from "../../../utils/react/resolveIcon.js";
 import { CubeActionProps } from "../Action/Action.js";
 import { Mods, Styles } from "@tenphi/tasty";
+import { ReactNode } from "react";
 import { Placement } from "react-aria";
 //#region src/components/actions/Button/Button.d.ts
 /** Known modifiers for Button component */
@@ -16,6 +17,13 @@ export type ButtonMods = Mods<{
   'single-icon'?: boolean;
   'text-only'?: boolean;
   'raw-children'?: boolean;
+  /**
+   * Collapsed by `isCollapsed` or `autoCollapse`; `collapseState` collapses
+   * through CSS instead.
+   */
+  collapsed?: boolean;
+  /** What a collapsing button collapses to: its icon, or its `shortLabel`. */
+  collapse?: 'icon' | 'label';
 }>;
 export interface CubeButtonProps extends CubeActionProps {
   icon?: DynamicIcon<ButtonMods>;
@@ -35,6 +43,36 @@ export interface CubeButtonProps extends CubeActionProps {
    * A `link` button and the joined edges inside a `Button.Split` keep their own radius.
    */
   shape?: 'button' | 'card' | 'sharp' | 'pill';
+  /**
+   * When the button collapses, so it fits a narrow window or container:
+   * - `true` - On `@mobile`, a viewport narrower than 920px
+   * - a string - Any state or condition, such as `'@compact'`,
+   *   `'@(page, w < 864px)'` or `'@media(w < 600px)'`. A container condition
+   *   needs that container around the button.
+   *
+   * Collapsed, a button with an icon shows only the icon: its label stays its
+   * accessible name and shows as its tooltip. A `shortLabel` replaces the label
+   * instead. The button collapses when any of `collapseState`, `isCollapsed`
+   * and `autoCollapse` says so.
+   */
+  collapseState?: boolean | string;
+  /**
+   * Collapses the button from JavaScript, as `collapseState` does from CSS.
+   */
+  isCollapsed?: 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. It
+   * follows the real width of the labels, so it holds in every locale. The
+   * row's width has to come from its own container: a row as wide as its
+   * content always fits.
+   */
+  autoCollapse?: boolean;
+  /**
+   * The label shown while the button is collapsed, beside its icon if it has
+   * one. Without it, a collapsed button shows only its icon.
+   */
+  shortLabel?: ReactNode;
   /**
    * Tooltip content and configuration:
    * - string: simple tooltip text