@epam/ai-dial-ui-kit 0.15.4 → 0.16.0-dev.11

package/dist/migration-guides/0.16.0/tailwind-v4-stylesheet.md

@@ -0,0 +1,98 @@
+# Migrating to the Tailwind CSS v4 stylesheet — v0.15.x → v0.16.0
+
+## Why this changed
+
+The kit's `styles.css` is now built with Tailwind CSS v4 instead of v3. `tailwind-merge`, which the components use to merge class names, already targets v4 class names, so the kit had been merging against one Tailwind version while building with another.
+
+Class names, props and theme variables are unchanged. What changed is how the shipped stylesheet takes part in your page's cascade and what its preflight resets. Typecheck cannot detect either change, so they show up only when the page is rendered.
+
+## What changed
+
+| Area                                                                                                       | v0.15.x (Tailwind v3)                              | v0.16.0 (Tailwind v4)                       |
+| ---------------------------------------------------------------------------------------------------------- | -------------------------------------------------- | ------------------------------------------- |
+| Variant utilities (`hover:`, `focus-visible:`, `disabled:`, `placeholder:`, `before:`, `mobile:`, `md:` …) | Unlayered, after `@layer ui`                       | Inside `@layer ui`                          |
+| Base utilities (`flex`, `bg-*`, `text-*` …)                                                                | `@layer ui`                                        | `@layer ui` (now `ui.utilities`)            |
+| Kit classes (`dial-*`, `dial-kit-*`)                                                                       | Unlayered                                          | Unlayered                                   |
+| `hover:` utilities                                                                                         | Applied on every device                            | Applied only where `(hover: hover)` matches |
+| `input`, `select`, `textarea`                                                                              | Browser default background and radius              | Transparent background, no radius           |
+| `margin` / `padding` reset                                                                                 | Listed elements (`h1`–`h6`, `p`, `ul`, `button` …) | Every element                               |
+| `[hidden]`                                                                                                 | `display: none`                                    | `display: none !important`                  |
+| Placeholder colour, pointer cursor on buttons, centred `<dialog>`                                          | v3 values                                          | Unchanged: the kit keeps the v3 values      |
+| Tailwind theme variables on `:root`                                                                        | None                                               | None: values are written into the utilities |
+| Browser baseline                                                                                           | Native CSS nesting (Safari 16.5+, Chrome 112+)     | Safari 16.4+, Chrome 111+, Firefox 128+     |
+
+### Variant utilities and your own CSS
+
+The kit puts Tailwind in a cascade layer named `ui` so that unlayered CSS (your app's styles and the kit's own `dial-*` classes) always beats a plain utility. Tailwind v3 placed variant utilities outside that layer. They competed with your unlayered CSS on specificity and source order, and often won, because `.hover\:bg-x:hover` is more specific than a single class.
+
+In v4 they are inside `@layer ui`, so any unlayered rule in your app that sets the same property now wins. For example, take a kit element with a `hover:` background. If your stylesheet also sets that element's `background-color`, the hover state disappears.
+
+## Step-by-step migration
+
+### 1. Find CSS that targets kit elements
+
+Look for unlayered rules in your app that style elements the kit renders, especially rules that set colour, background, border or outline:
+
+```bash
+grep -rnE "\.dial-|\[class\*=\"dial-|\.ag-" src/ --include=*.css --include=*.scss
+```
+
+Where such a rule should give way to the kit's interactive states, put it in a layer that comes before `ui`, or scope it to the resting state:
+
+**Before:**
+
+```css
+.my-toolbar .dial-kit-primary-ghost-button {
+  background-color: var(--my-toolbar-bg);
+}
+```
+
+**After:**
+
+```css
+@layer app {
+  .my-toolbar .dial-kit-primary-ghost-button {
+    background-color: var(--my-toolbar-bg);
+  }
+}
+```
+
+Declare the order once, before the kit's stylesheet is loaded: `@layer app, ui;`.
+
+### 2. Restore form-control defaults if your page relied on them
+
+The kit's preflight reaches every element on the page, not only the kit's own. If your own `input`, `select` or `textarea` elements carry no background or radius class and should keep the browser's look, restore it in your stylesheet:
+
+```css
+input,
+select,
+textarea {
+  background-color: Field;
+  border-radius: revert;
+}
+```
+
+The same applies to elements that relied on the browser's default `margin` or `padding` (`td`, `option`): set them explicitly.
+
+### 3. Check `hidden` elements
+
+An element with the `hidden` attribute is now hidden even when it also has a display utility such as `flex`. If you toggle visibility with both, drop the attribute or the utility.
+
+### 4. Check touch devices
+
+`hover:` utilities no longer apply on devices without a hovering pointer, so a state that a tap used to trigger as a "sticky hover" no longer shows. Use `active:` or `focus-visible:` where a touch state is intended.
+
+### 5. Verify
+
+```bash
+npm run typecheck
+npm run test
+```
+
+Then open the screens that use the kit in a desktop browser and on a touch device, and check hover, focus and disabled states, form fields and popups.
+
+## Notes
+
+- Hosts that build with Tailwind v4 themselves keep their own theme. The kit writes theme values directly into its utilities and declares no `--font-sans`, `--spacing`, `--radius-*` or `--color-*` on `:root`, so it cannot override yours.
+- The kit's stylesheet registers Tailwind v4's `--tw-*` custom properties (`@property`) and declares a top-level `@layer properties`. A host on Tailwind v4 declares the same names with the same definitions.
+- `@apply dial-…` against the kit's classes was not supported before and is still not supported. Tailwind v4's `@apply` accepts only utilities.

package/dist/migration-guides/README.md

@@ -30,6 +30,8 @@ migration-guides/
 | 0.14.0 | [shadow-token-per-step-rename](0.14.0/shadow-token-per-step-rename.md) | Shadow scale rebuilt per step: `sm` moves to the side panels, controls keep their shadow under `dial-kit-control-shadow` |
 | 0.15.0 | [legacy-theme-variable-fallbacks-removal](0.15.0/legacy-theme-variable-fallbacks-removal.md) | Old theme variable names (`--bg-control-neutral-hover`, `--stroke-focus-black`, `--bg-control-accent-gradient-*`) dropped from the fallback chains |
 | 0.15.0 | [slider-redesign](0.15.0/slider-redesign.md) | `Slider` redrawn: 12px accent thumb with a hover/focus halo, accent-tint track; adds `showTooltip`, `showTicks`, `leftContent`, `rightContent` |
+| 0.16.0 | [tailwind-v4-stylesheet](0.16.0/tailwind-v4-stylesheet.md) | `styles.css` built with Tailwind v4: variant utilities move into `@layer ui`, v4 preflight, new browser baseline |
+| 0.16.0 | [legacy-file-manager-removal](0.16.0/legacy-file-manager-removal.md) | Legacy `DialFileManager`, its helpers and the `./file-manager` subpath removed; import them from `@epam/ai-dial-react-file-manager` |
 
 ---
 

package/dist/node_modules/react-dnd/dist/hooks/useCollector.js

@@ -1,4 +1,4 @@
-import s from "../../../../_virtual/index3.js";
+import s from "../../../../_virtual/index.js";
 import { useState as f, useCallback as a } from "react";
 import { useIsomorphicLayoutEffect as i } from "./useIsomorphicLayoutEffect.js";
 function n(e, c, t) {

package/dist/src/components/ButtonDropdown/constants.d.ts

@@ -1,2 +1,2 @@
-export declare const buttonChevronDown: import("react/jsx-runtime").JSX.Element;
-export declare const buttonChevronUp: import("react/jsx-runtime").JSX.Element;
+export declare const buttonChevronDown: import('react/jsx-runtime').JSX.Element;
+export declare const buttonChevronUp: import('react/jsx-runtime').JSX.Element;

package/dist/src/components/Dropdown/constants.d.ts

@@ -5,4 +5,4 @@ export declare const dropdownItemDisabledClassName = "opacity-75 !cursor-not-all
 export declare const dropdownItemDangerClassName = "text-error";
 export declare const dropdownDividerClassName = "my-1 border-t border-hover border-secondary";
 export declare const dropdownGap = 4;
-export declare const submenuCaretIcon: import("react/jsx-runtime").JSX.Element;
+export declare const submenuCaretIcon: import('react/jsx-runtime').JSX.Element;

package/dist/src/components/Grid/Grid.d.ts

@@ -117,4 +117,4 @@ export interface DialGridProps<T extends object = Record<string, unknown>> {
  * @param [selectionMode] - Could be GridSelectionMode.MULTIPLE or GridSelectionMode.SINGLE to enable selection column
  * @param [allowDisabledContextMenu] - Enables context menu actions even if row itself is disabled for selection
  */
-export declare const DialGrid: <T extends object>({ columnDefs, rowData, additionalGridOptions, getContextMenuItems, className, ariaLabel, wrapCustomCellRenderers, disabledRowIds, selectedRowIds, onSelectionChange, onGridApiChange, getRowId, alternateOddRowColors, filterPlaceholder, emptyStateIcon, emptyStateTitle, emptyStateDescription, loading, wrapperBorder, withoutHeaderBorders, allowDisabledContextMenu, selectionMode, }: DialGridProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const DialGrid: <T extends object>({ columnDefs, rowData, additionalGridOptions, getContextMenuItems, className, ariaLabel, wrapCustomCellRenderers, disabledRowIds, selectedRowIds, onSelectionChange, onGridApiChange, getRowId, alternateOddRowColors, filterPlaceholder, emptyStateIcon, emptyStateTitle, emptyStateDescription, loading, wrapperBorder, withoutHeaderBorders, allowDisabledContextMenu, selectionMode, }: DialGridProps<T>) => import('react/jsx-runtime').JSX.Element;

package/dist/src/components/JsonEditor/lazy.d.ts

@@ -11,4 +11,4 @@
  * Vite/Rolldown versions - see `openspec/changes/isolate-heavy-feature-modules`
  * Section 9's `diagnosis-baseline.txt` for the measured reproduction).
  */
-export declare const LazyDialJsonEditor: () => Promise<typeof import("./JsonEditor")>;
+export declare const LazyDialJsonEditor: () => Promise<typeof import('./JsonEditor')>;

package/dist/src/components/MarkdownEditor/lazy.d.ts

@@ -4,4 +4,4 @@
  * re-export this same binding instead of each declaring their own copy -
  * see `src/components/JsonEditor/lazy.ts`'s comment for why.
  */
-export declare const LazyDialMarkdownEditor: () => Promise<typeof import("./MarkdownEditor")>;
+export declare const LazyDialMarkdownEditor: () => Promise<typeof import('./MarkdownEditor')>;

package/dist/src/components/New/Avatar/Avatar.d.ts

@@ -1,5 +1,6 @@
 import { FC, SyntheticEvent } from 'react';
 import { AvatarShape } from '../../../types/avatar';
+import { AvatarColorClasses } from '../../../utils/avatar';
 /** Props for `Avatar`. */
 export interface AvatarProps {
     /** Display name the initials and the colour are derived from. */
@@ -14,6 +15,8 @@ export interface AvatarProps {
     size?: number;
     /** Outline of the avatar. */
     shape?: AvatarShape;
+    /** Explicit colour pair overriding the deterministic pick from `name`. */
+    color?: AvatarColorClasses;
     /** Additional CSS classes for the avatar. */
     className?: string;
     /** Type-scale class for the initials. When set, it replaces the font size derived from `size`. */
@@ -28,9 +31,11 @@ export interface AvatarProps {
  * Design system 2.0
  *
  * The same name always gets the same colour, drawn from the theme's visual
- * tokens, so a list of avatars stays stable between renders and sessions. An
- * image that is missing or fails to load falls back to the initials; a new
- * `src` tries the image again.
+ * tokens, so a list of avatars stays stable between renders and sessions; pass
+ * `color` to pin one entry of `AVATAR_PALETTE` instead, so every avatar of a
+ * kind shares one colour regardless of name or locale. An image that is
+ * missing or fails to load falls back to the initials; a new `src` tries the
+ * image again.
  *
  * An avatar with an `alt` is a `role="img"` named by it, whether it shows the
  * image or the initials. Without one it is decorative and hidden from
@@ -48,6 +53,7 @@ export interface AvatarProps {
  * @param [alt=''] - Accessible name; empty makes the avatar decorative
  * @param [size=32] - Width and height in px
  * @param [shape=AvatarShape.Circle] - Outline of the avatar
+ * @param [color] - Explicit colour pair overriding the deterministic pick from `name`
  * @param [className] - Additional CSS classes for the avatar
  * @param [textClassName] - Type-scale class for the initials, replacing the size-derived font size
  * @param [onImageError] - Called when the image fails to load

package/dist/src/components/New/Breadcrumbs/constants.d.ts

@@ -29,7 +29,7 @@ export declare const currentSizeClassName: Record<BreadcrumbsSize, string>;
  */
 export declare const segmentWidthClassName: Record<'first' | 'middle' | 'last', string>;
 /** The box that draws a segment, around its icon and its label. */
-export declare const segmentClassName = "flex min-w-0 flex-1 items-center gap-1 rounded-sm transition-colors";
+export declare const segmentClassName = "flex min-w-0 flex-1 items-center gap-1 rounded-xs transition-colors";
 /**
  * A segment the user can follow. Secondary until hovered, then accent — the
  * same pairing the kit's other inline links use.
@@ -49,7 +49,7 @@ export declare const separatorClassName = "inline-flex flex-none items-center le
  * glyph to the 24×24 of WCAG 2.5.8; the enhanced 44×44 target would overhang
  * the segments on either side of it (see the README exception table).
  */
-export declare const overflowButtonClassName = "dial-kit-minimum-target flex shrink-0 items-center rounded-sm text-secondary transition-colors hover:text-accent focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-focus";
+export declare const overflowButtonClassName = "dial-kit-minimum-target flex shrink-0 items-center rounded-xs text-secondary transition-colors hover:text-accent focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-focus";
 /**
  * Smallest trail the collapse can produce: the root, the ellipsis and the
  * current page. Below that there is nothing left to hide behind the ellipsis.

package/dist/src/components/New/ButtonDropdown/constants.d.ts

@@ -1 +1 @@
-export declare const getButtonChevron: (isOpen: boolean) => import("react/jsx-runtime").JSX.Element;
+export declare const getButtonChevron: (isOpen: boolean) => import('react/jsx-runtime').JSX.Element;

package/dist/src/components/New/Calendar/constants.d.ts

@@ -1,17 +1,17 @@
 import { CalendarMode } from '../../../types/calendar';
 export declare const DEFAULT_CALENDAR_LOCALE = "en-GB";
 export declare const calendarModeDefaultPlaceholder: Record<CalendarMode, string>;
-export declare const calendarFieldBaseClassName = "flex w-full items-center justify-between gap-2 rounded-xl border border-secondary bg-layer-raised px-4 py-3 dial-small-text text-primary outline-none transition-colors hover:border-accent-alpha focus-within:border-accent-focus";
+export declare const calendarFieldBaseClassName = "flex w-full items-center justify-between gap-2 rounded-xl border border-secondary bg-layer-raised px-4 py-3 dial-small-text text-primary outline-hidden transition-colors hover:border-accent-alpha focus-within:border-accent-focus";
 export declare const calendarFieldDisabledClassName = "!cursor-not-allowed !border-transparent bg-layer-sunken text-control-disable-primary hover:!border-transparent";
 export declare const calendarFieldInvalidClassName = "!border-error";
 export declare const calendarPopoverClassName = "z-floating flex w-[248px] flex-col gap-4 rounded-lg bg-layer-raised px-2 py-4 shadow-md";
-export declare const calendarDayButtonBaseClassName = "flex size-10 items-center justify-center rounded-full dial-small-text text-primary hover:bg-control-accent-alpha-hover hover:text-primary focus:outline-none focus-visible:outline focus-visible:outline-focus";
+export declare const calendarDayButtonBaseClassName = "flex size-10 items-center justify-center rounded-full dial-small-text text-primary hover:bg-control-accent-alpha-hover hover:text-primary focus:outline-hidden focus-visible:outline focus-visible:outline-focus";
 export declare const calendarDaySelectedClassName = "bg-control-accent text-control-permanent";
 export declare const calendarDayTodayClassName = "text-accent dial-small-semi-text";
 export declare const calendarDayOutsideClassName = "text-control-disable-primary";
 export declare const calendarFieldIconClassName = "text-secondary";
-export declare const calendarIcon: import("react/jsx-runtime").JSX.Element;
+export declare const calendarIcon: import('react/jsx-runtime').JSX.Element;
 export declare const calendarNavIcons: {
-    prev: import("react/jsx-runtime").JSX.Element;
-    next: import("react/jsx-runtime").JSX.Element;
+    prev: import('react/jsx-runtime').JSX.Element;
+    next: import('react/jsx-runtime').JSX.Element;
 };

package/dist/src/components/New/Dropdown/constants.d.ts

@@ -12,4 +12,4 @@ export declare const dropdownItemListClassName: string;
 export declare const dropdownItemBaseClassName: string;
 export declare const dropdownDividerClassName = "my-1 border-t border-tertiary";
 export declare const dropdownGap = 4;
-export declare const submenuCaretIcon: import("react/jsx-runtime").JSX.Element;
+export declare const submenuCaretIcon: import('react/jsx-runtime').JSX.Element;

package/dist/src/components/New/FilterChips/FilterChips.d.ts

@@ -66,4 +66,4 @@ export interface FilterChipsProps<T extends string = string> {
  * @param [aria-label] - Names the row as a whole
  * @param [aria-labelledby] - Names the row from an existing element, e.g. a visible heading
  */
-export declare const FilterChips: <T extends string = string>({ items, value, onChange, stretch, className, chipClassName, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, }: FilterChipsProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const FilterChips: <T extends string = string>({ items, value, onChange, stretch, className, chipClassName, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, }: FilterChipsProps<T>) => import('react/jsx-runtime').JSX.Element;

package/dist/src/components/New/Grid/Grid.d.ts

@@ -132,4 +132,4 @@ export interface GridProps<T extends object = Record<string, unknown>> {
  * @param [selectAllLabel='Select all rows'] - Accessible name of the select-all control.
  * @param [colorScheme='light'] - AG Grid color scheme. `dark` paints native controls dark.
  */
-export declare const Grid: <T extends object>({ columnDefs, rowData, additionalGridOptions, getContextMenuItems, className, ariaLabel, wrapCustomCellRenderers, disabledRowIds, selectedRowIds, onSelectionChange, onGridApiChange, getRowId, alternateOddRowColors, filterPlaceholder, emptyStateIcon, emptyStateTitle, emptyStateDescription, loading, wrapperBorder, withoutHeaderBorders, allowDisabledContextMenu, selectionMode, selectRowLabel, selectAllLabel, colorScheme, }: GridProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const Grid: <T extends object>({ columnDefs, rowData, additionalGridOptions, getContextMenuItems, className, ariaLabel, wrapCustomCellRenderers, disabledRowIds, selectedRowIds, onSelectionChange, onGridApiChange, getRowId, alternateOddRowColors, filterPlaceholder, emptyStateIcon, emptyStateTitle, emptyStateDescription, loading, wrapperBorder, withoutHeaderBorders, allowDisabledContextMenu, selectionMode, selectRowLabel, selectAllLabel, colorScheme, }: GridProps<T>) => import('react/jsx-runtime').JSX.Element;

package/dist/src/components/New/Grid/components/SelectionCell.d.ts

@@ -18,4 +18,4 @@ export interface SelectionCellProps<T> {
  * `rowSelected` event, so a selection made anywhere — another cell, the header,
  * or the `selectedRowIds` prop — is reflected here without refreshing the cell.
  */
-export declare const SelectionCell: <T>({ params, mode, label, radioName, rowId, disabled, }: SelectionCellProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectionCell: <T>({ params, mode, label, radioName, rowId, disabled, }: SelectionCellProps<T>) => import('react/jsx-runtime').JSX.Element;

package/dist/src/components/New/Grid/components/SelectionHeader.d.ts

@@ -11,4 +11,4 @@ export interface SelectionHeaderProps<T> extends IHeaderParams<T> {
  * rows put it in the `mixed` state, and disabled rows are excluded from the
  * count so a grid whose selectable rows are all selected still reads as full.
  */
-export declare const SelectionHeader: <T>({ api, label, }: SelectionHeaderProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectionHeader: <T>({ api, label, }: SelectionHeaderProps<T>) => import('react/jsx-runtime').JSX.Element;

package/dist/src/components/New/InteractiveTooltip/constants.d.ts

@@ -11,7 +11,7 @@ export declare const INTERACTIVE_TOOLTIP_GAP = 8;
 export declare const INTERACTIVE_TOOLTIP_HOVER_OPEN_DELAY = 400;
 /**
  * The panel sits one step of the overlay ladder (`z-interactive-tooltip`, see
- * `zIndex` in `tailwind.config.js`) above the surface it is anchored to — a
+ * `--z-index-*` in `src/styles/theme.scss`) above the surface it is anchored to — a
  * dropdown or select overlay, both `z-floating` — since it can be opened from
  * a row inside one of them.
  *

package/dist/src/components/New/MarkdownEditor/lazy.d.ts

@@ -4,4 +4,4 @@
  * re-export this same binding instead of each declaring their own copy -
  * see `src/components/JsonEditor/lazy.ts`'s comment for why.
  */
-export declare const LazyMarkdownEditor: () => Promise<typeof import("./MarkdownEditor")>;
+export declare const LazyMarkdownEditor: () => Promise<typeof import('./MarkdownEditor')>;

package/dist/src/components/New/MenuItem/constants.d.ts

@@ -2,4 +2,4 @@
  * Marks the chosen row in a `MenuItemMark.Check` list. Decorative: the row's
  * `aria-checked`/`aria-selected` already carries the state.
  */
-export declare const menuItemCheckIcon: import("react/jsx-runtime").JSX.Element;
+export declare const menuItemCheckIcon: import('react/jsx-runtime').JSX.Element;

package/dist/src/components/New/SegmentedControl/SegmentedControl.d.ts

@@ -51,4 +51,4 @@ export interface SegmentedControlProps<T extends string> {
  * @param [segmentClassName] - Additional classes for every segment
  * @param [aria-label] - Names the group as a whole
  */
-export declare const SegmentedControl: <T extends string>({ items, value, onChange, disabled, className, segmentClassName: segmentClassNameProp, "aria-label": ariaLabel, }: SegmentedControlProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const SegmentedControl: <T extends string>({ items, value, onChange, disabled, className, segmentClassName: segmentClassNameProp, "aria-label": ariaLabel, }: SegmentedControlProps<T>) => import('react/jsx-runtime').JSX.Element;

package/dist/src/components/New/Select/constants.d.ts

@@ -27,7 +27,7 @@ export declare const selectOptionsScrollClassName: string;
 export declare const selectSubMenuGap = 4;
 export declare const selectSubMenuClassName: string;
 /** Marks an option that opens a nested list. Matches the dropdown's caret. */
-export declare const selectSubMenuCaretIcon: import("react/jsx-runtime").JSX.Element;
+export declare const selectSubMenuCaretIcon: import('react/jsx-runtime').JSX.Element;
 /** Classes for the chevron rendered as the field's trailing icon. */
 export declare const selectFieldIconClassName = "text-secondary transition-transform";
 /**
@@ -35,6 +35,6 @@ export declare const selectFieldIconClassName = "text-secondary transition-trans
  * short enough to scan at a glance does not need to be filtered.
  */
 export declare const selectSearchThreshold = 8;
-export declare const selectSearchIcon: import("react/jsx-runtime").JSX.Element;
-export declare const selectCloseIcon: import("react/jsx-runtime").JSX.Element;
-export declare const selectEmptyStateIcon: import("react/jsx-runtime").JSX.Element;
+export declare const selectSearchIcon: import('react/jsx-runtime').JSX.Element;
+export declare const selectCloseIcon: import('react/jsx-runtime').JSX.Element;
+export declare const selectEmptyStateIcon: import('react/jsx-runtime').JSX.Element;

package/dist/src/components/New/Tooltip/constants.d.ts

@@ -19,8 +19,8 @@ export declare const HOVER_OPEN_DELAY = 500;
  */
 export declare const arrowClassName = "fill-control-inverted";
 /**
- * Tooltips sit at the top of the overlay ladder (`z-tooltip`, see `zIndex` in
- * `tailwind.config.js`) — above popups (`z-popup`), dropdowns and the calendar
+ * Tooltips sit at the top of the overlay ladder (`z-tooltip`, see `--z-index-*` in
+ * `src/styles/theme.scss`) — above popups (`z-popup`), dropdowns and the calendar
  * (`z-floating`) and interactive tooltips — since they can be triggered by a
  * control inside any of them.
  *

package/dist/src/components/SegmentedControl/SegmentedControl.d.ts

@@ -37,4 +37,4 @@ export interface DialSegmentedControlProps<T extends string> {
  * @param [className] - Additional classes applied to the container.
  * @param [ariaLabel] - Accessible label for the control (applied to the `tablist`).
  */
-export declare const DialSegmentedControl: <T extends string>({ options, value, onChange, disabled, className, ariaLabel, }: DialSegmentedControlProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const DialSegmentedControl: <T extends string>({ options, value, onChange, disabled, className, ariaLabel, }: DialSegmentedControlProps<T>) => import('react/jsx-runtime').JSX.Element;

package/dist/src/components/Select/constants.d.ts

@@ -1,9 +1,9 @@
 export declare const selectTriggerBaseClassName = "dial-input flex w-full items-center justify-between gap-2 dial-small-text cursor-pointer";
 export declare const selectOverlayBaseClassName = "w-full rounded flex flex-col";
-export declare const selectOptionBaseClassName = "flex w-full items-center justify-between gap-2 px-3 h-[34px] dial-small-text text-primary truncate hover:bg-accent-primary-alpha focus:bg-accent-primary-alpha focus:outline-none";
+export declare const selectOptionBaseClassName = "flex w-full items-center justify-between gap-2 px-3 h-[34px] dial-small-text text-primary truncate hover:bg-accent-primary-alpha focus:bg-accent-primary-alpha focus:outline-hidden";
 export declare const selectOptionSelectedClassName = "bg-accent-primary-alpha";
-export declare const selectOptionSingleSelectedClassName = "bg-accent-primary-alpha border-l border-accent-primary border-1";
+export declare const selectOptionSingleSelectedClassName = "bg-accent-primary-alpha border-l border-accent-primary";
 export declare const selectOptionDisabledClassName = "opacity-75";
 export declare const dropdownMenuMaxHeight = 352;
 export declare const selectSubMenuGap = 4;
-export declare const selectChevronIcon: import("react/jsx-runtime").JSX.Element;
+export declare const selectChevronIcon: import('react/jsx-runtime').JSX.Element;

package/dist/src/index.d.ts

@@ -96,11 +96,6 @@ export { DialDropdown } from './components/Dropdown/Dropdown';
 export { DialButtonDropdown } from './components/ButtonDropdown/ButtonDropdown';
 export { DialDropdownIcon } from './components/DropdownIcon/DropdownIcon';
 export type { DialDropdownIconProps } from './components/DropdownIcon/DropdownIcon';
-export { DialFileManager } from './components/FileManager/FileManager';
-export type { FileManagerGridRow } from './components/FileManager/FileManagerContext';
-export type { GridOptions, ToolbarOptions, BulkActionsToolbarOptions, } from './components/FileManager/FileManager';
-export { DialDestinationFolderPopup } from './components/FileManager/components/DestinationFolderPopup/DestinationFolderPopup';
-export { DialFoldersTree } from './components/FileManager/components/FoldersTree/FoldersTree';
 export { EditorThemes } from './types/editor';
 export { ButtonVariant, ButtonAppearance } from './types/button';
 export { RadioGroupOrientation } from './types/radio-group';
@@ -113,16 +108,12 @@ export { ScreenResolution, TabOrientation, TabView } from './types/tab';
 export type { DialBreadcrumbPathItem } from './models/breadcrumb';
 export { FormItemOrientation } from './types/form-item';
 export { SelectSize, SelectVariant } from './types/select';
-export { DialFileManagerTabs, DialFileManagerActions, FileManagerColumnKey, } from './types/file-manager';
 export { FlexibleActionsDirection } from './types/flexible-actions';
 export { DialItemType } from './types/item';
 export { ResizableContainerSide } from './types/resizable-container';
 export { SkeletonVariant, SkeletonAvatarSize, SkeletonAvatarShape, } from './types/skeleton';
-export { useDialFileManagerTabs } from './components/FileManager/hooks/use-file-manager-tabs';
 export { EDITABLE_CONTAINER_ATTRIBUTE, editableContainerProps, useEditableItem, } from './hooks/use-editable-item';
 export type { UseEditableItemOptions } from './hooks/use-editable-item';
-export { FileManagerProvider } from './components/FileManager/FileManagerProvider';
-export { useFileManagerContext } from './components/FileManager/hooks/use-file-manager-context';
 export { StepStatus } from './models/step';
 export type { Step } from './models/step';
 export type { RadioButtonWithContent } from './models/radio';
@@ -134,13 +125,11 @@ export type { DialModifiedEntity } from './models/base-entity';
 export type { DialFile } from './models/file';
 export { DialFileNodeType, DialFilePermission, DialFileResourceType, } from './models/file';
 export type { DialRootFolder } from './models/file';
-export { type DialCopiedItem, type DialDeletedItem, type DialUploadFileItem, type DialFileManagerActionsRef, type DialFileAcceptType, } from './models/file-manager';
 export { GridSelectionMode } from './models/selection-mode';
 export { mergeClasses } from './utils/merge-classes';
 export { wrapInRootFolder } from './utils/flat-to-hierarchy-convertor.ts';
 export { getTimezoneLabel } from './utils/timezone';
 export type { TimezoneLabelOptions } from './utils/timezone';
-export { NAME_COLUMN, SIZE_COLUMN, UPDATED_AT_COLUMN, } from './constants/file-grid-columns';
 export { DIAL_ICON_SIZE, BASE_ICON_PROPS, BASE_ICON_SIZE, } from './constants/icon.ts';
 export { NOT_ALLOWED_SYMBOLS, NOT_ALLOWED_SPACES, NOT_ALLOWED_SYMBOLS_REGEXP, NOT_ALLOWED_SPACES_REGEXP, } from './constants/validation.ts';
 export { DIAL_KIT_CLASS } from './constants/public-class-names';
@@ -249,8 +238,9 @@ export type { BadgeProps } from './components/New/Badge/Badge';
 export { BadgeColor, BadgeVariant } from './types/badge';
 export { Avatar } from './components/New/Avatar/Avatar';
 export type { AvatarProps } from './components/New/Avatar/Avatar';
-export { AvatarShape } from './types/avatar';
-export { extractInitials } from './utils/avatar';
+export { AvatarColor, AvatarShape } from './types/avatar';
+export { AVATAR_PALETTE, extractInitials } from './utils/avatar';
+export type { AvatarColorClasses } from './utils/avatar';
 export { EntityIdentity } from './components/New/EntityIdentity/EntityIdentity';
 export type { EntityIdentityProps, EntityIdentityItem, EntityIdentityLabels, } from './components/New/EntityIdentity/EntityIdentity';
 export { EntityType } from './types/entity-type';

package/dist/src/subpaths/editors.d.ts

@@ -16,7 +16,7 @@
 export { LazyDialJsonEditor } from '../components/JsonEditor/lazy';
 export { LazyDialMarkdownEditor } from '../components/MarkdownEditor/lazy';
 export { LazyMarkdownEditor } from '../components/New/MarkdownEditor/lazy';
-export declare const LazyDialMarkdownEditorContainer: () => Promise<typeof import("../components/MarkdownEditor/MarkdownEditorContainer")>;
+export declare const LazyDialMarkdownEditorContainer: () => Promise<typeof import('../components/MarkdownEditor/MarkdownEditorContainer')>;
 export { EditorThemes } from '../types/editor';
 export type { MarkdownEditorProps } from '../components/New/MarkdownEditor/MarkdownEditor';
 export type { DialMarkdownEditorContainerProps } from '../components/MarkdownEditor/MarkdownEditorContainer';

package/dist/src/types/avatar.d.ts

@@ -5,3 +5,12 @@ export declare enum AvatarShape {
     /** A rounded square — the avatar of an application, model or other entity. */
     Square = "square"
 }
+export declare enum AvatarColor {
+    Green1 = "green-1",
+    Violet2 = "violet-2",
+    Brown = "brown",
+    Red = "red",
+    Green2 = "green-2",
+    Blue = "blue",
+    Violet1 = "violet-1"
+}

package/dist/src/utils/avatar.d.ts

@@ -1,3 +1,4 @@
+import { AvatarColor } from '../types/avatar';
 /** A background and text colour pair for an initials avatar, as Tailwind classes. */
 export interface AvatarColorClasses {
     /** Background class, bound to a `--bg-visual-*` token. */
@@ -5,7 +6,7 @@ export interface AvatarColorClasses {
     /** Text class, bound to the matching `--text-visual-*` token. */
     foreground: string;
 }
-export declare const AVATAR_PALETTE: readonly AvatarColorClasses[];
+export declare const AVATAR_PALETTE: Record<AvatarColor, AvatarColorClasses>;
 /** Returns the palette entry for a name; the same name always gets the same colours. */
 export declare const pickAvatarColor: (name: string) => AvatarColorClasses;
 /** Returns 1–2 uppercase initials derived from a display name, or `'?'` when it has no letters. */

package/dist/src/utils/sub-menu-floating.d.ts

@@ -64,5 +64,5 @@ interface SubMenuPanelProps {
  * Shared floating panel wrapper (FloatingPortal → FloatingFocusManager → container div).
  * Used by DropdownSubMenuItem and SelectSubMenuItem.
  */
-export declare const SubMenuPanel: ({ refs, floatingStyles, context, getFloatingProps, role, surfaceClassName, className, children, }: SubMenuPanelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SubMenuPanel: ({ refs, floatingStyles, context, getFloatingProps, role, surfaceClassName, className, children, }: SubMenuPanelProps) => import('react/jsx-runtime').JSX.Element;
 export {};

package/dist/types/avatar.js

@@ -1,4 +1,5 @@
-var e = /* @__PURE__ */ ((r) => (r.Circle = "circle", r.Square = "square", r))(e || {});
+var n = /* @__PURE__ */ ((e) => (e.Circle = "circle", e.Square = "square", e))(n || {}), i = /* @__PURE__ */ ((e) => (e.Green1 = "green-1", e.Violet2 = "violet-2", e.Brown = "brown", e.Red = "red", e.Green2 = "green-2", e.Blue = "blue", e.Violet1 = "violet-1", e))(i || {});
 export {
-  e as AvatarShape
+  i as AvatarColor,
+  n as AvatarShape
 };

package/dist/utils/avatar.js

@@ -1,22 +1,45 @@
-const o = [
-  { background: "bg-green-1", foreground: "text-green-2" },
-  { background: "bg-violet-2", foreground: "text-violet-1" },
-  { background: "bg-brown", foreground: "text-brown-2" },
-  { background: "bg-red", foreground: "text-red" },
-  { background: "bg-green-2", foreground: "text-green-3" },
-  { background: "bg-blue", foreground: "text-accent" },
-  { background: "bg-violet-1", foreground: "text-violet-2" }
-], c = (t) => {
-  let e = 0;
-  for (let r = 0; r < t.length; r++)
-    e += t.charCodeAt(r);
-  return o[e % o.length];
-}, n = (t) => t.match(new RegExp("\\p{L}", "u"))?.[0] ?? "", l = (t) => {
-  const e = t.trim().split(/\s+/).filter(Boolean);
-  return e.length === 0 ? "?" : e.length >= 2 ? (n(e[0]) + n(e[1])).toUpperCase() || "?" : e[0].replace(/[^\p{L}]/gu, "").slice(0, 2).toUpperCase() || "?";
+import { AvatarColor as t } from "../types/avatar.js";
+const l = {
+  [t.Green1]: {
+    background: "bg-green-1",
+    foreground: "text-green-2"
+  },
+  [t.Violet2]: {
+    background: "bg-violet-2",
+    foreground: "text-violet-1"
+  },
+  [t.Brown]: {
+    background: "bg-brown",
+    foreground: "text-brown-2"
+  },
+  [t.Red]: {
+    background: "bg-red",
+    foreground: "text-red"
+  },
+  [t.Green2]: {
+    background: "bg-green-2",
+    foreground: "text-green-3"
+  },
+  [t.Blue]: {
+    background: "bg-blue",
+    foreground: "text-accent"
+  },
+  [t.Violet1]: {
+    background: "bg-violet-1",
+    foreground: "text-violet-2"
+  }
+}, c = (r) => {
+  const e = Object.values(l);
+  let n = 0;
+  for (let o = 0; o < r.length; o++)
+    n += r.charCodeAt(o);
+  return e[n % e.length];
+}, g = (r) => r.match(new RegExp("\\p{L}", "u"))?.[0] ?? "", u = (r) => {
+  const e = r.trim().split(/\s+/).filter(Boolean);
+  return e.length === 0 ? "?" : e.length >= 2 ? (g(e[0]) + g(e[1])).toUpperCase() || "?" : e[0].replace(/[^\p{L}]/gu, "").slice(0, 2).toUpperCase() || "?";
 };
 export {
-  o as AVATAR_PALETTE,
-  l as extractInitials,
+  l as AVATAR_PALETTE,
+  u as extractInitials,
   c as pickAvatarColor
 };

package/dist/utils/sub-menu-floating.js

@@ -14,7 +14,7 @@ const Z = '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"],
   return n === -1 ? s === 1 ? 0 : o - 1 : (n + s + o) % o;
 };
 function le(t, n = "menu", o = !1, s) {
-  const [r, i] = b(!1), u = M(), { refs: a, elements: p, floatingStyles: S, context: c } = k({
+  const [r, i] = b(!1), u = M(), { refs: a, elements: d, floatingStyles: S, context: c } = k({
     nodeId: u,
     placement: "right-start",
     open: r,
@@ -40,13 +40,13 @@ function le(t, n = "menu", o = !1, s) {
   }), T = z(c, { role: n }), {
     getReferenceProps: g,
     getFloatingProps: y
-  } = X([O, D, R, T]), [w, h] = b(!1), d = p.floating;
+  } = X([O, D, R, T]), [h, w] = b(!1), p = d.floating;
   Q(() => {
-    !r || !w || d == null || (A(d)[0]?.focus(), h(!1));
-  }, [r, w, d]);
+    !r || !h || p == null || (A(p)[0]?.focus(), w(!1));
+  }, [r, h, p]);
   const F = f(
     (e) => {
-      o || !(e.key === v(e.currentTarget) || e.key === "Enter" || e.key === " ") || (e.preventDefault(), e.stopPropagation(), i(!0), h(!0));
+      o || !(e.key === v(e.currentTarget) || e.key === "Enter" || e.key === " ") || (e.preventDefault(), e.stopPropagation(), i(!0), w(!0));
     },
     [o]
   ), E = f(
@@ -97,7 +97,7 @@ const ne = "rounded bg-layer-0 shadow", ue = ({
   className: u,
   children: a
 }) => {
-  const p = W();
+  const d = W();
   return /* @__PURE__ */ m(Y, { children: /* @__PURE__ */ m(
     G,
     {
@@ -112,9 +112,9 @@ const ne = "rounded bg-layer-0 shadow", ue = ({
           style: n,
           role: r,
           className: J(
-            "z-floating overflow-auto text-primary focus-visible:outline-none",
+            "z-floating overflow-auto text-primary focus-visible:outline-hidden",
             i ?? ne,
-            p,
+            d,
             u
           ),
           ...s(),