@mittwald/flow-react-components 1.5.0-next.4 → 1.5.0-next.40

package/dist/types/components/ActionGroup/ActionGroup.d.ts

@@ -8,8 +8,9 @@ export interface ActionGroupProps extends PropsWithChildren, FlowComponentProps<
     /** The size of the buttons and links inside the action group. @default "m" */
     size?: ButtonProps["size"];
     /**
-     * When set, the buttons are not sorted automatically but stay in source
-     * order. @default false
+     * When set, the buttons are not sorted into the slots `primary`, `secondary`
+     * and `abort` but stay in source order. Use it when the actions have no such
+     * hierarchy, e.g. a row of equal actions or icon buttons. @default false
      */
     preserveOrder?: boolean;
 }

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

@@ -3,7 +3,13 @@ import { FlowComponentProps } from '../../lib/componentFactory/flowComponent';
 import { AlphaColor } from '../../lib/types/props';
 import * as Aria from "react-aria-components";
 export interface ButtonProps extends PropsWithChildren<Aria.ButtonProps>, FlowComponentProps<HTMLButtonElement> {
-    /** Slot for button placement in action groups. */
+    /**
+     * Slot for button placement in action groups: `primary` (at the end),
+     * `secondary` (before the primary action) or `abort` (at the start). Without
+     * a slot, an action group places the colors primary, success and danger in
+     * `primary` and every other color in `abort`. A secondary-colored button that
+     * does not abort therefore needs `slot="secondary"`.
+     */
     slot?: string;
     /**
      * The color of the button.

package/dist/types/components/Button/stories/lib.d.ts

@@ -4,4 +4,4 @@ export declare const asyncFunction: (...args: unknown[]) => Promise<void>;
 export declare const asyncLongFunction: (...args: unknown[]) => Promise<void>;
 export declare const asyncLongFunctionWithError: (...args: unknown[]) => Promise<never>;
 export declare const asyncFunctionWithError: (...args: unknown[]) => Promise<never>;
-export declare const button: import("react").JSX.Element;
+export declare const button: import('react').JSX.Element;

package/dist/types/components/CartesianChart/components/ChartTooltip/TooltipLegendItem.d.ts

@@ -1 +1,3 @@
-export {};
+import { DefaultTooltipContentProps } from 'recharts';
+import { NameType, ValueType } from 'recharts/types/component/DefaultTooltipContent';
+export type TooltipPayloadItem = NonNullable<DefaultTooltipContentProps<ValueType, NameType>["payload"]>[number];

package/dist/types/components/CartesianChart/components/YAxis/YAxis.d.ts

@@ -4,6 +4,13 @@ import * as Recharts from "recharts";
 export type YAxisProps<TData extends ChartDataValue = ChartDataValue, TDataKey extends DataKey<TData> = DataKey<TData>, TDataMatch = DataKeyValue<TData, TDataKey>> = Pick<Recharts.YAxisProps, "className" | "orientation" | "allowDecimals" | "interval" | "minTickGap" | "scale" | "type" | "domain" | "hide" | "unit"> & {
     dataKey?: TDataKey;
     tickFormatter?: (value: TDataMatch, index: number) => string;
+    /**
+     * The width of the axis in pixels. `"auto"` sizes the axis to its widest tick
+     * label. Defaults to `"auto"` for a category axis (e.g. with `layout` set to
+     * `"vertical"`) and to `60` otherwise. Pin a number to align the plot areas
+     * of synchronized charts.
+     */
+    width?: number | "auto";
 };
 /**
  * `tickFormatter` is deliberately not part of the remote surface. A function

package/dist/types/components/CodeEditor/CodeEditor.d.ts

@@ -11,6 +11,13 @@ export interface CodeEditorProps extends Omit<ReactCodeMirrorProps, "theme" | "l
      * @default false
      */
     isReadOnly?: boolean;
+    /**
+     * Whether the editor is disabled. The code can neither be edited, focused nor
+     * copied.
+     *
+     * @default false
+     */
+    isDisabled?: boolean;
     /**
      * Whether the editor is displayed as invalid.
      *
@@ -19,8 +26,11 @@ export interface CodeEditorProps extends Omit<ReactCodeMirrorProps, "theme" | "l
     isInvalid?: boolean;
     /** The elements class name. */
     className?: string;
-    /** The language the code is highlighted as. */
-    language?: CodeEditorLanguage;
+    /**
+     * The language the code is highlighted as. A language the editor does not
+     * know is shown as plain text.
+     */
+    language?: CodeEditorLanguage | (string & {});
     /**
      * Whether a button to copy the code to the clipboard is shown.
      *

package/dist/types/components/CodeEditor/hooks/useCodeEditorExtensions.d.ts

@@ -1 +1,32 @@
-export {};
+export interface CodeEditorSetup {
+    /**
+     * Whether the line the cursor is on is highlighted.
+     *
+     * @default true
+     */
+    showActiveLineMarker?: boolean;
+    /**
+     * Whether the gutter offers controls to fold and unfold code blocks.
+     *
+     * @default true
+     */
+    showCodeFolding?: boolean;
+    /**
+     * Whether indentation levels are visualized with guide lines.
+     *
+     * @default true
+     */
+    showCodeIndentationMakers?: boolean;
+    /**
+     * Whether line numbers are shown in the gutter.
+     *
+     * @default true
+     */
+    showLineNumbers?: boolean;
+    /**
+     * Whether linter results are shown in the gutter.
+     *
+     * @default true
+     */
+    showLinterMarkers?: boolean;
+}

package/dist/types/components/CodeEditor/languages/all.d.ts

@@ -1 +1 @@
-export {};
+export declare const ALL_LANGUAGES: readonly ["apl", "asc", "asn", "asn1", "b", "bash", "bf", "BUILD", "bzl", "c", "c++", "cc", "cfg", "cjs", "cl", "clj", "cljc", "cljs", "cljx", "cmake", "cmake.in", "cob", "coffee", "cpp", "cpy", "cql", "cr", "cs", "css", "cts", "cxx", "cyp", "cypher", "d", "dart", "diff", "dotEnv", "dtd", "dyalog", "dyl", "dylan", "e", "ecl", "edn", "el", "elm", "erl", "f", "f77", "f90", "f95", "factor", "feature", "for", "forth", "fs", "fth", "fun", "go", "gradle", "groovy", "gss", "h", "h++", "handlebars", "hbs", "hh", "hpp", "hs", "htm", "html", "hx", "hxml", "hxx", "in", "ini", "ino", "intr", "j2", "jade", "java", "jinja", "jinja2", "jl", "js", "json", "jsonld", "jsx", "ksh", "kt", "kts", "less", "liquid", "lisp", "ls", "ltx", "lua", "m", "map", "markdown", "mbox", "md", "mjs", "mkd", "ml", "mli", "mll", "mly", "mm", "mo", "mps", "mrc", "msc", "mscgen", "mscin", "msgenny", "mts", "nb", "nix", "nq", "nsh", "nsi", "nt", "nut", "oz", "p", "pas", "patch", "pgp", "php", "php3", "php4", "php5", "php7", "phtml", "pig", "pl", "pls", "pm", "pp", "pro", "properties", "proto", "ps1", "psd1", "psm1", "pug", "pxd", "pxi", "py", "pyw", "pyx", "q", "r", "R", "rb", "rq", "rs", "s", "sas", "sass", "scala", "scm", "scss", "sh", "sieve", "sig", "siv", "smackspec", "sml", "solidity", "sparql", "spec", "sql", "ss", "st", "styl", "sv", "svelte", "svg", "svh", "swift", "tcl", "tex", "text", "textile", "toml", "ts", "tsx", "ttcn", "ttcn3", "ttcnpp", "ttl", "v", "vb", "vbs", "vhd", "vhdl", "vtl", "vue", "wast", "wat", "webidl", "wl", "wls", "xml", "xq", "xqm", "xquery", "xqy", "xsd", "xsl", "xu", "xy", "yaml", "yml", "ys", "z80"];

package/dist/types/components/CodeEditor/languages/index.d.ts

@@ -10,4 +10,5 @@ export type LanguageContainer = [
     () => ReturnType<typeof linter>
 ];
 declare const supportedCodeEditorLanguages: LanguageFactory;
+export declare const isCodeEditorLanguage: (language: string) => language is CodeEditorLanguage;
 export default supportedCodeEditorLanguages;

package/dist/types/components/FileField/FileField.d.ts

@@ -2,7 +2,7 @@ import { PropsWithChildren } from 'react';
 import { FileInputOnChangeHandler } from './components/FileInput';
 import { FlowComponentProps } from '../../lib/componentFactory/flowComponent';
 import type * as Aria from "react-aria-components";
-export interface FileFieldProps extends PropsWithChildren, FlowComponentProps<HTMLInputElement>, Pick<Aria.InputProps, "accept" | "multiple" | "name">, Pick<Aria.TextFieldProps, "isRequired" | "isInvalid" | "validationBehavior" | "isDisabled"> {
+export interface FileFieldProps extends PropsWithChildren, FlowComponentProps<HTMLInputElement>, Pick<Aria.InputProps, "accept" | "multiple" | "name" | "aria-describedby">, Pick<Aria.TextFieldProps, "isRequired" | "isInvalid" | "validationBehavior" | "isDisabled"> {
     /** Handler that is called when the file input changes. */
     onChange?: FileInputOnChangeHandler;
     /** Whether the component is read only. */

package/dist/types/components/Link/Link.d.ts

@@ -11,7 +11,11 @@ export interface LinkProps extends PropsWithChildren<Omit<Aria.LinkProps, "child
     color?: "default" | AlphaColor;
     /** Marks the link as the currently active one, e.g. in a navigation. */
     "aria-current"?: string;
-    /** The name of the slot the link is placed in. */
+    /**
+     * The name of the slot the link is placed in. In action groups: `primary` (at
+     * the end), `secondary` (before the primary action) or `abort` (at the
+     * start).
+     */
     slot?: string;
     /** The whiteSpace css value of the element. */
     whiteSpace?: CSSProperties["whiteSpace"];

package/dist/types/components/List/components/DataLoader/DataLoader.d.ts

@@ -1,2 +1,2 @@
-export declare const DataLoader: () => import("react").JSX.Element[];
+export declare const DataLoader: () => import('react').JSX.Element[];
 export default DataLoader;

package/dist/types/components/List/components/Items/components/Item/Item.d.ts

@@ -8,7 +8,7 @@ interface Props extends PropsWithChildren {
     list: ListModel<never>;
     isTile: boolean;
 }
-export declare const Item: import('react').MemoExoticComponent<(props: Props) => import("react").JSX.Element | null>;
+export declare const Item: import('react').MemoExoticComponent<(props: Props) => import('react').JSX.Element | null>;
 interface ItemContainerProps extends PropsWithChildren {
     id?: Key;
     data?: never;

package/dist/types/components/List/components/Items/components/Item/hooks/useGridItemProps.d.ts

@@ -14,6 +14,6 @@ export declare const useGridItemProps: (props: P, list: List<never>) => {
         ref: import('react').RefObject<HTMLDivElement | null>;
         onAction: () => void;
     };
-    children: import("react").JSX.Element;
+    children: import('react').JSX.Element;
 };
 export {};

package/dist/types/components/List/components/ListItemView/components/ListItemViewContent/ListItemViewContent.d.ts

@@ -11,5 +11,5 @@ export type ListItemViewContentProps = PropsWithChildren & Pick<ColumnLayoutProp
     viewMode?: ListViewMode;
 };
 /** @flr-generate all */
-export declare const ListItemViewContent: (props: ListItemViewContentProps) => import("react").JSX.Element;
+export declare const ListItemViewContent: (props: ListItemViewContentProps) => import('react').JSX.Element;
 export default ListItemViewContent;

package/dist/types/components/Modal/components/ModalTrigger/ModalTrigger.d.ts

@@ -6,11 +6,7 @@ export declare const ModalTrigger: import('react').FunctionComponent<{
     isDefaultOpen?: boolean | undefined;
     controller?: import('../../../../lib/controller').OverlayController | undefined;
     wrapWith?: (import('react').ReactElement | null) | undefined;
-    tunnel?: {
-        id: string;
-        component: import('../../../propTypes').FlowComponentName;
-        staticEntryId?: string;
-    } | null | undefined;
+    tunnel?: import('../../../../index/internal').TunnelTarget | undefined;
     ref?: import('react').Ref<HTMLDivElement> | undefined;
     key?: import('react').Key | null | undefined;
     children?: import('react').ReactNode;

package/dist/types/components/PasswordCreationField/components/ComplexityIndicator/ComplexityIndicator.d.ts

@@ -7,5 +7,10 @@ export interface ComplexityIndicatorProps {
     isEmptyValue: boolean;
     validationResultState: StateFromLatestPolicyValidationResult;
     policyValidationResult: ResolvedPolicyValidationResult;
+    /**
+     * The field is invalid for a reason outside the policy, e.g. a server error.
+     * The bar then shows danger like the field, not the password's strength.
+     */
+    isInvalid?: boolean;
 }
 export default ComplexityIndicator;

package/dist/types/components/SkeletonMode/SkeletonMode.d.ts

@@ -0,0 +1,16 @@
+import { FC, PropsWithChildren } from 'react';
+export interface SkeletonModeProps extends PropsWithChildren {
+    /**
+     * Whether the components inside render as skeleton. A nested `SkeletonMode`
+     * with `isEnabled={false}` renders its content as real UI.
+     *
+     * @default true
+     */
+    isEnabled?: boolean;
+}
+/**
+ * @flr-generate all
+ * @flowStatus beta, new
+ */
+export declare const SkeletonMode: FC<SkeletonModeProps>;
+export default SkeletonMode;

package/dist/types/components/SkeletonMode/components/SkeletonIconSurface/SkeletonIconSurface.d.ts

@@ -0,0 +1,10 @@
+import { FC, PropsWithChildren } from 'react';
+import { PropsWithClassName } from '../../../../lib/types/props';
+export type SkeletonIconSurfaceProps = PropsWithChildren & PropsWithClassName;
+/**
+ * A round skeleton surface in the size of the icon it wraps. The icon keeps
+ * rendering, invisible, so the surface takes its size from the icon's own size
+ * rules. `className` places the surface where the icon would sit.
+ */
+export declare const SkeletonIconSurface: FC<SkeletonIconSurfaceProps>;
+export default SkeletonIconSurface;

package/dist/types/components/SkeletonMode/components/SkeletonIconSurface/index.d.ts

@@ -0,0 +1,2 @@
+export * from './SkeletonIconSurface';
+export { default } from './SkeletonIconSurface';

package/dist/types/components/SkeletonMode/components/SkeletonRawText/SkeletonRawText.d.ts

@@ -0,0 +1,8 @@
+import { FC, PropsWithChildren } from 'react';
+/**
+ * The text rule for containers: turns raw string and number children into bars
+ * and leaves every element child to its own skeleton rendering. Outside an
+ * enabled `SkeletonMode` it renders its children unchanged.
+ */
+export declare const SkeletonRawText: FC<PropsWithChildren>;
+export default SkeletonRawText;

package/dist/types/components/SkeletonMode/components/SkeletonRawText/index.d.ts

@@ -0,0 +1,2 @@
+export * from './SkeletonRawText';
+export { default } from './SkeletonRawText';

package/dist/types/components/SkeletonMode/components/SkeletonTextContent/SkeletonTextContent.d.ts

@@ -0,0 +1,12 @@
+import { CSSProperties, FC, PropsWithChildren } from 'react';
+export interface SkeletonTextContentProps extends PropsWithChildren {
+    /** Width of the bar when there is no content to take the width from. */
+    defaultWidth: CSSProperties["width"];
+}
+/**
+ * The text rule of `SkeletonMode`: content becomes one bar per line in the
+ * width of that line, no content becomes a `SkeletonText` in `defaultWidth`.
+ * Outside an enabled `SkeletonMode` it renders its children unchanged.
+ */
+export declare const SkeletonTextContent: FC<SkeletonTextContentProps>;
+export default SkeletonTextContent;

package/dist/types/components/SkeletonMode/components/SkeletonTextContent/index.d.ts

@@ -0,0 +1,2 @@
+export * from './SkeletonTextContent';
+export { default } from './SkeletonTextContent';

package/dist/types/components/SkeletonMode/index.d.ts

@@ -0,0 +1,3 @@
+export * from './view';
+export { type SkeletonModeProps, SkeletonMode } from './SkeletonMode';
+export { default } from './SkeletonMode';

package/dist/types/components/SkeletonMode/lib/hasContent.d.ts

@@ -0,0 +1,3 @@
+import { ReactNode } from 'react';
+/** Whether `children` renders anything — `null`, booleans and empty text do not. */
+export declare const hasContent: (children: ReactNode) => boolean;

package/dist/types/components/SkeletonMode/lib/isTextChild.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+/**
+ * Whether `child` is a text node — locally a string or number, remotely a
+ * `RemoteTextRenderer` element.
+ */
+export declare const isTextChild: (child: ReactNode) => boolean;
+/** The text of a text node from {@link isTextChild}, `undefined` otherwise. */
+export declare const getTextOfChild: (child: ReactNode) => string | undefined;

package/dist/types/components/SkeletonMode/skeletonModeContext.d.ts

@@ -0,0 +1,16 @@
+import { FC, PropsWithChildren } from 'react';
+export interface SkeletonModeState {
+    /** Whether components render as skeleton. */
+    isEnabled: boolean;
+    /** Whether an enabled `SkeletonMode` above already announces the loading. */
+    isAnnounced: boolean;
+}
+export declare const skeletonModeContext: import('react').Context<SkeletonModeState>;
+/** Whether the calling component renders as skeleton. */
+export declare const useSkeletonMode: () => boolean;
+/**
+ * Renders its children as real UI below a component that already draws the
+ * skeleton for them — the Text inside a text bar or a button surface must not
+ * draw a second bar on top.
+ */
+export declare const SkeletonModeReset: FC<PropsWithChildren>;

package/dist/types/components/SkeletonMode/view.d.ts

@@ -0,0 +1,7 @@
+import { SkeletonMode } from './SkeletonMode';
+import { ViewComponent } from '../../lib/viewComponentContext';
+declare global {
+    interface FlowViewComponents {
+        SkeletonMode: ViewComponent<typeof SkeletonMode>;
+    }
+}

package/dist/types/components/public.d.ts

@@ -97,6 +97,7 @@ export * from './Separator';
 export * from './SettingsProvider';
 export * from './Kbd';
 export * from './Skeleton';
+export * from './SkeletonMode';
 export * from './SkeletonText';
 export * from './Slider';
 export * from './SuspenseTrigger';

package/dist/types/integrations/react-hook-form/components/Field/Field.d.ts

@@ -2,6 +2,6 @@ import { PropsWithChildren } from 'react';
 import { ControllerProps, FieldValues, UseFormReturn } from 'react-hook-form';
 export interface FieldProps<T extends FieldValues> extends Omit<ControllerProps<T>, "render">, PropsWithChildren {
 }
-export declare function Field<T extends FieldValues>(props: FieldProps<T>): import("react").JSX.Element;
+export declare function Field<T extends FieldValues>(props: FieldProps<T>): import('react').JSX.Element;
 export declare const typedField: <T extends FieldValues>(ignoredForm: UseFormReturn<T> | UseFormReturn<T>["control"]) => typeof Field<T>;
 export default Field;

package/dist/types/integrations/react-hook-form/components/Form/Form.d.ts

@@ -52,5 +52,5 @@ export interface FormProps<F extends FieldValues> extends Omit<ComponentProps<"f
      */
     confirmModalCloseOnUnsavedChanges?: boolean;
 }
-export declare function Form<F extends FieldValues>(props: FormProps<F>): import("react").JSX.Element;
+export declare function Form<F extends FieldValues>(props: FormProps<F>): import('react').JSX.Element;
 export default Form;

package/dist/types/integrations/react-hook-form/components/FormContextProvider/FormContextProvider.d.ts

@@ -18,7 +18,7 @@ export interface FormContextProviderProps extends PropsWithChildren {
     onAfterSuccessFeedback?: AfterFormSubmitCallback;
     rootErrorController: FormRootErrorController;
 }
-export declare const FormContextProvider: (props: FormContextProviderProps) => import("react").JSX.Element;
+export declare const FormContextProvider: (props: FormContextProviderProps) => import('react').JSX.Element;
 export declare const useFormContext: <F extends FieldValues>() => FormContext<F>;
 export declare const useOptionalFormContext: <F extends FieldValues>() => FormContext<F> | undefined;
 export default FormContextProvider;

package/dist/types/integrations/react-hook-form/components/FormRootError/FormRootError.d.ts

@@ -1,4 +1,14 @@
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
+import { FieldErrors } from 'react-hook-form';
+export type FormRootErrorValue = NonNullable<FieldErrors["root"]>;
+export interface FormRootErrorProps {
+    /**
+     * Custom content shown instead of the default alert. Rendered only while a
+     * root error is set. A function receives the root error, e.g. to pick the
+     * content by its `type`.
+     */
+    children?: ReactNode | ((error: FormRootErrorValue) => ReactNode);
+}
 /** @flowStatus new */
-export declare const FormRootError: FC;
+export declare const FormRootError: FC<FormRootErrorProps>;
 export default FormRootError;

package/dist/types/integrations/react-hook-form/components/FormSettingsProvider/FormSettingsProvider.d.ts

@@ -9,6 +9,6 @@ interface Context {
     submitInterceptor?: SubmitInterceptor;
 }
 export type FormSettingsProviderProps = Context & PropsWithChildren;
-export declare function FormSettingsProvider(props: FormSettingsProviderProps): import("react").JSX.Element;
+export declare function FormSettingsProvider(props: FormSettingsProviderProps): import('react').JSX.Element;
 export declare const useFormSettings: () => Context;
 export {};

package/dist/types/lib/dev/parkPointer.d.ts

@@ -0,0 +1 @@
+export declare const parkPointer: () => Promise<void>;

package/dist/types/lib/hooks/fieldErrorRenderedContext.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/lib/hooks/useFieldComponent.d.ts

@@ -1,22 +1,33 @@
 import { FC, PropsWithChildren } from 'react';
 import { PropsContext } from '../propsContext';
-import { default as clsx, ClassValue } from 'clsx';
+import { ClassValue } from 'clsx';
 import { FlowComponentName } from '../../components/propTypes';
 interface FieldComponentProps {
     className?: ClassValue;
     isRequired?: boolean;
     isDisabled?: boolean;
-    isInvalid?: boolean;
     "aria-describedby"?: string;
 }
 export interface UseFieldComponent {
     FieldErrorCaptureContext: FC<PropsWithChildren>;
     FieldErrorView: FC;
     fieldPropsContext: PropsContext;
-    fieldProps: {
+    /** For the field's outer element. */
+    wrapperProps: {
+        className: string;
+    };
+    /**
+     * For what assistive technology lands on — the input, or the group of a
+     * grouped control. Where the react-aria root forwards `aria-describedby` to
+     * its input itself, spread it on the root together with `wrapperProps`.
+     * Spread it after `rest`: it already contains the consumer's
+     * `aria-describedby`, which `rest` would otherwise put back alone.
+     */
+    controlProps: {
         "aria-describedby"?: string;
-        className?: ReturnType<typeof clsx>;
     };
+    /** The id of the error while one is rendered, without the consumer's ids. */
+    renderedFieldErrorId?: string;
 }
 export declare const useFieldComponent: (props: FieldComponentProps, component: FlowComponentName) => UseFieldComponent;
 export {};

package/dist/types/lib/hooks/useFieldError.d.ts

@@ -9,5 +9,11 @@ export declare const useFieldError: (options: UseFieldErrorOptions) => {
     readonly FieldErrorCaptureContext: React.FC<{
         children?: React.ReactNode | undefined;
     }>;
-    readonly FieldErrorView: () => React.JSX.Element | null;
+    readonly FieldErrorView: React.FC;
+    /**
+     * The id of the error while one is rendered for this field. A nested field
+     * (a `Checkbox` inside a `CheckboxButton`) renders its error at the outer
+     * one, so only the outer field ever gets an id here.
+     */
+    readonly renderedFieldErrorId: string | undefined;
 };

package/dist/types/lib/propsContext/nestedPropsContext/types.d.ts

@@ -1,2 +1,5 @@
 export declare const nestingLevelKey: "___nestingLevel";
 export type NestingLevelKey = typeof nestingLevelKey;
+export interface NestingLevelProps {
+    [nestingLevelKey]?: number;
+}

package/dist/types/lib/propsContext/overlayTriggerTunnel.d.ts

@@ -1,5 +1,5 @@
 import { PropsContext } from './types';
-import { PropsWithTunnel } from '../types/props';
+import { TunnelTarget } from '../types/props';
 /**
  * Props context entries that send every overlay trigger into `tunnel`.
  *
@@ -20,5 +20,5 @@ import { PropsWithTunnel } from '../types/props';
  * Spread the entries before the context's own, so a single trigger can still be
  * sent somewhere else (see `Label`).
  */
-export declare const overlayTriggersTunneledTo: (tunnel: PropsWithTunnel["tunnel"]) => PropsContext;
+export declare const overlayTriggersTunneledTo: (tunnel: TunnelTarget) => PropsContext;
 export default overlayTriggersTunneledTo;

package/dist/types/lib/theming/hooks/useDesignTokens.d.ts

@@ -6498,6 +6498,18 @@ export declare const useDesignTokens: () => {
                 path: string[];
             };
         };
+        "kbd-kbd": {
+            spacing: {
+                value: string;
+                path: string[];
+            };
+        };
+        "kbd-text": {
+            spacing: {
+                value: string;
+                path: string[];
+            };
+        };
     };
     "layout-card": {
         "background-color": {

package/dist/types/lib/types/props.d.ts

@@ -1,3 +1,4 @@
+import { FlowComponentName } from '../../components/propTypes';
 import { ExoticComponent, HTMLAttributes } from 'react';
 export declare const statusTypes: readonly ["info", "success", "warning", "danger", "unavailable"];
 export type Status = (typeof statusTypes)[number];
@@ -5,6 +6,19 @@ export type PropsWithStatus<T extends Status = Status, P = unknown> = P & {
     /** The elements status */
     status?: T;
 };
+export type TunnelTarget = {
+    id: string;
+    component: FlowComponentName;
+    /**
+     * A stable entry id instead of a generated one. Needed wherever the same
+     * component is rendered more than once for a single logical element:
+     * react-aria renders collection children twice — once into its hidden
+     * collection document, once for real — and a generated id would register each
+     * render as its own entry, so the tunnel exit renders every element twice.
+     * Must be unique among the siblings of one tunnel.
+     */
+    staticEntryId?: string;
+} | null;
 export interface PropsWithTunnel {
 }
 export interface PropsWithClassName {

package/dist/types/status/component-status.json.d.ts

@@ -381,6 +381,10 @@ declare const _default: {
     "level": "stable",
     "isNew": false
   },
+  "@mittwald/flow-react-components#SkeletonMode": {
+    "level": "beta",
+    "isNew": true
+  },
   "@mittwald/flow-react-components#SkeletonText": {
     "level": "stable",
     "isNew": false

package/dist/types/views/SkeletonModeView.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { SkeletonModeProps } from '../components/SkeletonMode/SkeletonMode';
+declare const SkeletonModeView: FC<SkeletonModeProps>;
+export default SkeletonModeView;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/flow-react-components",
-  "version": "1.5.0-next.4",
+  "version": "1.5.0-next.40",
   "type": "module",
   "description": "A React implementation of Flow, mittwald’s design system",
   "homepage": "https://flow.mittwald.de",
@@ -68,6 +68,7 @@
     "dev": "storybook dev --port 6006",
     "test:browser": "vitest run --project=browser* --browser.headless",
     "test:browser:dev": "vitest dev --project=browser*",
+    "test:browser:prepare": "if [ -z \"$CI\" ]; then playwright install firefox webkit; fi",
     "test:compile": "tsc --noEmit && tsc --noEmit -p tsconfig.vite.json",
     "test:unit": "vitest run --project=unit*",
     "test:unit:dev": "vitest dev --project=unit*"
@@ -83,9 +84,9 @@
     "@internationalized/string-compiler": "^3.4.1",
     "@lezer/common": "^1.5.2",
     "@lezer/highlight": "^1.2.3",
-    "@mittwald/flow-icons": "^1.5.0-next.4",
+    "@mittwald/flow-icons": "^1.5.0-next.40",
     "@mittwald/password-tools-js": "^3.0.0",
-    "@mittwald/react-tunnel": "^1.5.0-next.4",
+    "@mittwald/react-tunnel": "^1.5.0-next.40",
     "@mittwald/react-use-promise": "^4.2.2",
     "@react-aria/form": "^3.2.1",
     "@react-aria/i18n": "^3.13.1",
@@ -138,12 +139,12 @@
     "@internationalized/date": "^3.12.3",
     "@lezer/generator": "^1.8.0",
     "@lezer/lr": "^1.4.10",
-    "@mittwald/flow-core": "1.5.0-next.4",
-    "@mittwald/flow-design-tokens": "1.5.0-next.4",
-    "@mittwald/flow-icons-base": "1.5.0-next.4",
+    "@mittwald/flow-core": "1.5.0-next.40",
+    "@mittwald/flow-design-tokens": "1.5.0-next.40",
+    "@mittwald/flow-icons-base": "1.5.0-next.40",
     "@mittwald/react-use-promise": "^4.2.2",
     "@mittwald/remote-dom-react": "1.2.2-mittwald.10",
-    "@mittwald/typescript-config": "1.5.0-next.4",
+    "@mittwald/typescript-config": "1.5.0-next.40",
     "@nx/storybook": "^22.7.6",
     "@storybook/addon-a11y": "^10.5.10",
     "@storybook/addon-actions": "^9.0.8",
@@ -153,7 +154,7 @@
     "@storybook/react-vite": "^10.5.10",
     "@tabler/icons-react": "^3.46.0",
     "@teispace/next-themes": "^2.0.4",
-    "@types/node": "25.9.7",
+    "@types/node": "25.9.8",
     "@typescript/native": "npm:typescript@^7.0.2",
     "@vitejs/plugin-react": "5.2.0",
     "@vitest/browser": "^4.1.11",
@@ -162,6 +163,7 @@
     "autoprefixer": "^10.5.4",
     "camelcase": "^9.0.0",
     "decamelize": "^6.0.1",
+    "eslint": "^10.9.0",
     "fs-jetpack": "^5.1.0",
     "glob": "^13.0.6",
     "happy-dom": "^20.11.6",
@@ -185,6 +187,7 @@
     "stylelint": "^17.14.1",
     "tsx": "^4.23.12",
     "typescript": "^6.0.3",
+    "typescript-eslint": "^8.67.0",
     "unplugin-dts": "^1.0.3",
     "vite": "^8.2.2",
     "vite-plugin-externalize-deps": "^0.10.0",
@@ -195,7 +198,7 @@
   },
   "peerDependencies": {
     "@internationalized/date": "^3.12.2",
-    "@mittwald/flow-icons-pro": "1.5.0-next.4",
+    "@mittwald/flow-icons-pro": "1.5.0-next.40",
     "@mittwald/react-use-promise": "^4.2.2",
     "next": "^16.2.3",
     "react": "^19.2.0",
@@ -219,5 +222,5 @@
   "browserslist": [
     "baseline widely available"
   ],
-  "gitHead": "df1f240e826f1ccf4932daa323f0bd11c802112e"
+  "gitHead": "04f02e2e9537ecf94f78050ae7cce9030a7748b1"
 }