@gooddata/sdk-ui-kit 11.57.0-alpha.2 → 11.57.0-alpha.4

package/esm/@ui/UiToolbar/UiToolbar.d.ts

@@ -0,0 +1,52 @@
+import { type ReactNode } from "react";
+import { type UiToolbarNamingConfig } from "./context.js";
+/**
+ * @internal
+ */
+export interface IUiToolbarProps {
+    /**
+     * The toolbar needs an accessible name.
+     */
+    accessibilityConfig: UiToolbarNamingConfig;
+    children: ReactNode;
+    /**
+     * Side of the toolbar on which item tooltips open. Use "above" for a toolbar docked at the bottom.
+     * @defaultValue "below"
+     */
+    tooltipPlacement?: "below" | "above";
+    /**
+     * Keep disabled items reachable with arrow keys.
+     * @defaultValue true
+     */
+    isDisabledFocusable?: boolean;
+    /**
+     * Wrap from the last item to the first one and back.
+     * @defaultValue true
+     */
+    loop?: boolean;
+    dataTestId?: string;
+}
+/**
+ * Horizontal toolbar with one tab stop. Arrow keys move between items, Home and End jump to the
+ * ends, and the last focused item is remembered when focus leaves and comes back. Inside a
+ * {@link UiToolbarSegmentedControl} the arrows change the selection first and continue to the
+ * neighbouring item at the ends.
+ *
+ * Editable values inside a toolbar must be text-like inputs (`type="text"` with an `inputMode`, or
+ * a textarea): the arrows move the caret and hand off to the neighbouring item at the text edges.
+ * Inputs without a caret API, such as `type="number"`, cannot hand off; wrap such custom controls in
+ * an element with {@link TOOLBAR_SKIP_ATTR} so they keep their own keyboard handling.
+ *
+ * @example
+ * ```
+ * <UiToolbar accessibilityConfig={{ ariaLabel: "Formatting" }}>
+ *     <UiToolbarIconButton icon="bold" label="Bold" isSelected onClick={toggleBold} />
+ *     <UiToolbarDivider />
+ *     <UiToolbarButton label="Reset" onClick={reset} />
+ * </UiToolbar>
+ * ```
+ *
+ * @internal
+ */
+export declare const UiToolbar: import("react").ForwardRefExoticComponent<IUiToolbarProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=UiToolbar.d.ts.map

package/esm/@ui/UiToolbar/UiToolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UiToolbar.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiToolbar/UiToolbar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAoD,MAAM,OAAO,CAAC;AAYzF,OAAO,EAAiD,KAAK,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAIzG;;GAEG;AACH,MAAM,WAAW,eAAe;IAC5B;;OAEG;IACH,mBAAmB,EAAE,qBAAqB,CAAC;IAC3C,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACrC;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAID;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,SAAS,4GAgDpB,CAAC"}

package/esm/@ui/UiToolbar/UiToolbar.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// (C) 2026 GoodData Corporation
+import { forwardRef, useImperativeHandle, useMemo, useRef } from "react";
+import { FloatingDelayGroup } from "@floating-ui/react";
+import { accessibilityConfigToAttributes } from "../../typings/utilities.js";
+import { bem } from "../@utils/bem.js";
+import { TOOLBAR_TOOLTIP_CLOSE_DELAY, TOOLBAR_TOOLTIP_OPEN_DELAY, TOOLBAR_TOOLTIP_WARM_TIMEOUT, } from "./constants.js";
+import { UiToolbarContext } from "./context.js";
+import { TOOLBAR_ROOT_ATTR } from "./rovingFocusUtils.js";
+import { useToolbarRovingFocus } from "./useToolbarRovingFocus.js";
+const { b } = bem("gd-ui-kit-toolbar");
+/**
+ * Horizontal toolbar with one tab stop. Arrow keys move between items, Home and End jump to the
+ * ends, and the last focused item is remembered when focus leaves and comes back. Inside a
+ * {@link UiToolbarSegmentedControl} the arrows change the selection first and continue to the
+ * neighbouring item at the ends.
+ *
+ * Editable values inside a toolbar must be text-like inputs (`type="text"` with an `inputMode`, or
+ * a textarea): the arrows move the caret and hand off to the neighbouring item at the text edges.
+ * Inputs without a caret API, such as `type="number"`, cannot hand off; wrap such custom controls in
+ * an element with {@link TOOLBAR_SKIP_ATTR} so they keep their own keyboard handling.
+ *
+ * @example
+ * ```
+ * <UiToolbar accessibilityConfig={{ ariaLabel: "Formatting" }}>
+ *     <UiToolbarIconButton icon="bold" label="Bold" isSelected onClick={toggleBold} />
+ *     <UiToolbarDivider />
+ *     <UiToolbarButton label="Reset" onClick={reset} />
+ * </UiToolbar>
+ * ```
+ *
+ * @internal
+ */
+export const UiToolbar = forwardRef(function UiToolbar({ accessibilityConfig, children, tooltipPlacement = "below", isDisabledFocusable = true, loop = true, dataTestId, }, ref) {
+    const containerRef = useRef(null);
+    useImperativeHandle(ref, () => containerRef.current, []);
+    const { onKeyDown, onFocusCapture, onBlurCapture } = useToolbarRovingFocus({
+        containerRef,
+        isDisabledFocusable,
+        loop,
+    });
+    const contextValue = useMemo(() => ({ tooltipArrowPlacement: tooltipPlacement === "above" ? "bottom" : "top" }), [tooltipPlacement]);
+    return (_jsx(UiToolbarContext.Provider, { value: contextValue, children: _jsx(FloatingDelayGroup, { delay: { open: TOOLBAR_TOOLTIP_OPEN_DELAY, close: TOOLBAR_TOOLTIP_CLOSE_DELAY }, timeoutMs: TOOLBAR_TOOLTIP_WARM_TIMEOUT, children: _jsx("div", { ref: containerRef, className: b(), ...accessibilityConfigToAttributes(accessibilityConfig), role: "toolbar", "aria-orientation": "horizontal", [TOOLBAR_ROOT_ATTR]: "", "data-testid": dataTestId, onKeyDown: onKeyDown, onFocusCapture: onFocusCapture, onBlurCapture: onBlurCapture, children: children }) }) }));
+});

package/esm/@ui/UiToolbar/UiToolbarChevron.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Popup affordance of the toolbar selects. It rotates instead of swapping the icon, so the flip
+ * animates. Decorative: the owning control carries the accessible name and `aria-expanded`.
+ */
+export declare function UiToolbarChevron({ isOpen }: {
+    isOpen: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=UiToolbarChevron.d.ts.map

package/esm/@ui/UiToolbar/UiToolbarChevron.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UiToolbarChevron.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiToolbar/UiToolbarChevron.tsx"],"names":[],"mappings":"AAOA;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,OAAO,CAAA;CAAE,2CAM/D"}

package/esm/@ui/UiToolbar/UiToolbarChevron.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// (C) 2026 GoodData Corporation
+import { bem } from "../@utils/bem.js";
+import { UiIcon } from "../UiIcon/UiIcon.js";
+const { b } = bem("gd-ui-kit-toolbar-chevron");
+/**
+ * Popup affordance of the toolbar selects. It rotates instead of swapping the icon, so the flip
+ * animates. Decorative: the owning control carries the accessible name and `aria-expanded`.
+ */
+export function UiToolbarChevron({ isOpen }) {
+    return (_jsx("span", { className: b({ isOpen }), children: _jsx(UiIcon, { type: "navigateDown", size: 14, layout: "block", accessibilityConfig: { ariaHidden: true } }) }));
+}

package/esm/@ui/UiToolbar/UiToolbarItemTooltip.d.ts

@@ -0,0 +1,14 @@
+import { type ReactNode } from "react";
+export interface IUiToolbarItemTooltipProps {
+    content: ReactNode;
+    children: ReactNode;
+    /**
+     * Hides the tooltip, for example while the item's popup is open.
+     */
+    isDisabled?: boolean;
+}
+/**
+ * Tooltip of a toolbar item. It is visual only: the item keeps its own accessible name.
+ */
+export declare function UiToolbarItemTooltip({ content, children, isDisabled }: IUiToolbarItemTooltipProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=UiToolbarItemTooltip.d.ts.map

package/esm/@ui/UiToolbar/UiToolbarItemTooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UiToolbarItemTooltip.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiToolbar/UiToolbarItemTooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAWvC,MAAM,WAAW,0BAA0B;IACvC,OAAO,EAAE,SAAS,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAkB,EAAE,EAAE,0BAA0B,2CAoBzG"}

package/esm/@ui/UiToolbar/UiToolbarItemTooltip.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { UiTooltip } from "../UiTooltip/UiTooltip.js";
+import { TOOLBAR_TOOLTIP_CLOSE_DELAY, TOOLBAR_TOOLTIP_OFFSET, TOOLBAR_TOOLTIP_OPEN_DELAY, } from "./constants.js";
+import { useUiToolbarContextOptional } from "./context.js";
+/**
+ * Tooltip of a toolbar item. It is visual only: the item keeps its own accessible name.
+ */
+export function UiToolbarItemTooltip({ content, children, isDisabled = false }) {
+    const toolbar = useUiToolbarContextOptional();
+    return (_jsx(UiTooltip, { anchor: children, content: content, triggerBy: ["hover", "focus"], arrowPlacement: toolbar?.tooltipArrowPlacement ?? "top", offset: TOOLBAR_TOOLTIP_OFFSET, hoverOpenDelay: TOOLBAR_TOOLTIP_OPEN_DELAY, hoverCloseDelay: TOOLBAR_TOOLTIP_CLOSE_DELAY, delayGroup: toolbar !== null, closeOnAnchorClick: true, accessibilityHidden: true, component: "span", inlineAnchor: true, disabled: isDisabled }));
+}

package/esm/@ui/UiToolbar/constants.d.ts

@@ -0,0 +1,5 @@
+export declare const TOOLBAR_TOOLTIP_OPEN_DELAY = 300;
+export declare const TOOLBAR_TOOLTIP_CLOSE_DELAY = 100;
+export declare const TOOLBAR_TOOLTIP_WARM_TIMEOUT = 500;
+export declare const TOOLBAR_TOOLTIP_OFFSET: number;
+//# sourceMappingURL=constants.d.ts.map

package/esm/@ui/UiToolbar/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiToolbar/constants.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,0BAA0B,MAAM,CAAC;AAC9C,eAAO,MAAM,2BAA2B,MAAM,CAAC;AAC/C,eAAO,MAAM,4BAA4B,MAAM,CAAC;AAChD,eAAO,MAAM,sBAAsB,QAAmB,CAAC"}

package/esm/@ui/UiToolbar/constants.js

@@ -0,0 +1,6 @@
+// (C) 2026 GoodData Corporation
+import { ARROW_HEIGHT } from "../UiTooltip/constants.js";
+export const TOOLBAR_TOOLTIP_OPEN_DELAY = 300;
+export const TOOLBAR_TOOLTIP_CLOSE_DELAY = 100;
+export const TOOLBAR_TOOLTIP_WARM_TIMEOUT = 500;
+export const TOOLBAR_TOOLTIP_OFFSET = ARROW_HEIGHT + 2;

package/esm/@ui/UiToolbar/context.d.ts

@@ -0,0 +1,23 @@
+import { type IAccessibilityConfigBase } from "../../typings/accessibility.js";
+import { type TooltipArrowPlacement } from "../UiTooltip/types.js";
+/**
+ * An accessible name for a toolbar or a group: a label, or a reference to a labelling element.
+ *
+ * @internal
+ */
+export type UiToolbarNamingConfig = {
+    ariaLabel: NonNullable<IAccessibilityConfigBase["ariaLabel"]>;
+    ariaLabelledBy?: IAccessibilityConfigBase["ariaLabelledBy"];
+} | {
+    ariaLabel?: IAccessibilityConfigBase["ariaLabel"];
+    ariaLabelledBy: NonNullable<IAccessibilityConfigBase["ariaLabelledBy"]>;
+};
+/**
+ * @internal
+ */
+export interface IUiToolbarContextValue {
+    tooltipArrowPlacement: Extract<TooltipArrowPlacement, "top" | "bottom">;
+}
+export declare const UiToolbarContext: import("react").Context<IUiToolbarContextValue | null>;
+export declare function useUiToolbarContextOptional(): IUiToolbarContextValue | null;
+//# sourceMappingURL=context.d.ts.map

package/esm/@ui/UiToolbar/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiToolbar/context.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAC/E,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAEnE;;;;GAIG;AACH,MAAM,MAAM,qBAAqB,GAC3B;IACI,SAAS,EAAE,WAAW,CAAC,wBAAwB,CAAC,WAAW,CAAC,CAAC,CAAC;IAC9D,cAAc,CAAC,EAAE,wBAAwB,CAAC,gBAAgB,CAAC,CAAC;CAC/D,GACD;IACI,SAAS,CAAC,EAAE,wBAAwB,CAAC,WAAW,CAAC,CAAC;IAClD,cAAc,EAAE,WAAW,CAAC,wBAAwB,CAAC,gBAAgB,CAAC,CAAC,CAAC;CAC3E,CAAC;AAER;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACnC,qBAAqB,EAAE,OAAO,CAAC,qBAAqB,EAAE,KAAK,GAAG,QAAQ,CAAC,CAAC;CAC3E;AAED,eAAO,MAAM,gBAAgB,wDAAqD,CAAC;AAEnF,wBAAgB,2BAA2B,IAAI,sBAAsB,GAAG,IAAI,CAE3E"}

package/esm/@ui/UiToolbar/context.js

@@ -0,0 +1,6 @@
+// (C) 2026 GoodData Corporation
+import { createContext, useContext } from "react";
+export const UiToolbarContext = createContext(null);
+export function useUiToolbarContextOptional() {
+    return useContext(UiToolbarContext);
+}

package/esm/@ui/UiToolbar/rovingFocusUtils.d.ts

@@ -0,0 +1,55 @@
+/**
+ * Marks an element that holds several focusable children but counts as one toolbar stop (a radiogroup).
+ */
+export declare const TOOLBAR_COMPOSITE_ATTR = "data-gd-toolbar-composite";
+/**
+ * Marks a subtree the toolbar keyboard navigation must ignore. Set it as a data attribute on a
+ * wrapper element inside a {@link UiToolbar}.
+ *
+ * @internal
+ */
+export declare const TOOLBAR_SKIP_ATTR = "data-gd-toolbar-skip";
+/**
+ * Set on every element whose tabindex the toolbar wrote, so the write can be undone when the element
+ * leaves the managed set.
+ */
+export declare const TOOLBAR_MANAGED_ATTR = "data-gd-toolbar-managed";
+/**
+ * Marks the root of a {@link UiToolbar}; composites use it to tell a managing toolbar from any other
+ * `role="toolbar"` element.
+ */
+export declare const TOOLBAR_ROOT_ATTR = "data-gd-toolbar";
+export interface IRovingFocusOptions {
+    isDisabledFocusable: boolean;
+}
+/**
+ * True while the element is still one of the container's eligible focus targets.
+ */
+export declare function isEligibleFocusable(container: HTMLElement, element: HTMLElement, options: IRovingFocusOptions): boolean;
+/**
+ * True when the element sits in a subtree marked with {@link TOOLBAR_SKIP_ATTR} below the container.
+ */
+export declare function isSkipped(container: HTMLElement, element: HTMLElement): boolean;
+export declare function isEligible(element: HTMLElement, options: IRovingFocusOptions): boolean;
+export declare function getFocusableDescendants(container: HTMLElement): HTMLElement[];
+export declare function getToolbarStops(container: HTMLElement, options: IRovingFocusOptions): HTMLElement[];
+export declare function resolveStop(container: HTMLElement, element: Element | null): HTMLElement | null;
+export declare function getStopFocusTarget(stop: HTMLElement, remembered: HTMLElement | null, options: IRovingFocusOptions): HTMLElement | null;
+/**
+ * Makes exactly one focusable descendant reachable with Tab and returns it.
+ */
+export declare function applyRovingTabIndex(container: HTMLElement, remembered: HTMLElement | null, options: IRovingFocusOptions): HTMLElement | null;
+export declare function isCaretAtEdge(target: EventTarget | null, direction: "ArrowLeft" | "ArrowRight"): boolean;
+/**
+ * True for elements that use arrow, Home and End keys to move a caret or a value.
+ */
+export declare function isEditingTarget(target: EventTarget | null): boolean;
+/**
+ * True when Alt, Ctrl or Meta is held. Those arrow combinations belong to the browser or the OS.
+ */
+export declare function hasSystemModifier(event: {
+    altKey: boolean;
+    ctrlKey: boolean;
+    metaKey: boolean;
+}): boolean;
+//# sourceMappingURL=rovingFocusUtils.d.ts.map

package/esm/@ui/UiToolbar/rovingFocusUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rovingFocusUtils.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiToolbar/rovingFocusUtils.ts"],"names":[],"mappings":"AAIA;;GAEG;AACH,eAAO,MAAM,sBAAsB,8BAA8B,CAAC;AAElE;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,yBAAyB,CAAC;AAExD;;;GAGG;AACH,eAAO,MAAM,oBAAoB,4BAA4B,CAAC;AAE9D;;;GAGG;AACH,eAAO,MAAM,iBAAiB,oBAAoB,CAAC;AAEnD,MAAM,WAAW,mBAAmB;IAChC,mBAAmB,EAAE,OAAO,CAAC;CAChC;AAmDD;;GAEG;AACH,wBAAgB,mBAAmB,CAC/B,SAAS,EAAE,WAAW,EACtB,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,mBAAmB,GAC7B,OAAO,CAET;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,WAAW,GAAG,OAAO,CAG/E;AAYD,wBAAgB,UAAU,CAAC,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,mBAAmB,GAAG,OAAO,CAEtF;AAOD,wBAAgB,uBAAuB,CAAC,SAAS,EAAE,WAAW,GAAG,WAAW,EAAE,CAI7E;AAMD,wBAAgB,eAAe,CAAC,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,mBAAmB,GAAG,WAAW,EAAE,CAoBnG;AAED,wBAAgB,WAAW,CAAC,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,OAAO,GAAG,IAAI,GAAG,WAAW,GAAG,IAAI,CAM/F;AAED,wBAAgB,kBAAkB,CAC9B,IAAI,EAAE,WAAW,EACjB,UAAU,EAAE,WAAW,GAAG,IAAI,EAC9B,OAAO,EAAE,mBAAmB,GAC7B,WAAW,GAAG,IAAI,CAYpB;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAC/B,SAAS,EAAE,WAAW,EACtB,UAAU,EAAE,WAAW,GAAG,IAAI,EAC9B,OAAO,EAAE,mBAAmB,GAC7B,WAAW,GAAG,IAAI,CAyBpB;AA0CD,wBAAgB,aAAa,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI,EAAE,SAAS,EAAE,WAAW,GAAG,YAAY,GAAG,OAAO,CAgBxG;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI,GAAG,OAAO,CAQnE;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE;IAAE,MAAM,EAAE,OAAO,CAAC;IAAC,OAAO,EAAE,OAAO,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,GAAG,OAAO,CAEzG"}

package/esm/@ui/UiToolbar/rovingFocusUtils.js

@@ -0,0 +1,220 @@
+// (C) 2026 GoodData Corporation
+import { focusableElementsSelector } from "../../utils/domUtilities.js";
+/**
+ * Marks an element that holds several focusable children but counts as one toolbar stop (a radiogroup).
+ */
+export const TOOLBAR_COMPOSITE_ATTR = "data-gd-toolbar-composite";
+/**
+ * Marks a subtree the toolbar keyboard navigation must ignore. Set it as a data attribute on a
+ * wrapper element inside a {@link UiToolbar}.
+ *
+ * @internal
+ */
+export const TOOLBAR_SKIP_ATTR = "data-gd-toolbar-skip";
+/**
+ * Set on every element whose tabindex the toolbar wrote, so the write can be undone when the element
+ * leaves the managed set.
+ */
+export const TOOLBAR_MANAGED_ATTR = "data-gd-toolbar-managed";
+/**
+ * Marks the root of a {@link UiToolbar}; composites use it to tell a managing toolbar from any other
+ * `role="toolbar"` element.
+ */
+export const TOOLBAR_ROOT_ATTR = "data-gd-toolbar";
+function matchesDisabled(element) {
+    try {
+        return element.matches(":disabled");
+    }
+    catch {
+        return false;
+    }
+}
+// A disabled fieldset disables its descendants too, except those in its first legend.
+function isNativelyDisabled(element) {
+    if (("disabled" in element && element.disabled === true) ||
+        matchesDisabled(element)) {
+        return true;
+    }
+    const fieldset = element.closest("fieldset[disabled]");
+    if (fieldset === null) {
+        return false;
+    }
+    const legend = fieldset.querySelector(":scope > legend");
+    return legend === null || !legend.contains(element);
+}
+function isHiddenByStyle(element) {
+    const style = element.ownerDocument.defaultView?.getComputedStyle(element);
+    return style !== undefined && (style.display === "none" || style.visibility === "hidden");
+}
+/**
+ * Hidden by an attribute or by CSS, on the element or on any ancestor below the container.
+ */
+function isHidden(container, element) {
+    const hidden = element.closest('[hidden], [aria-hidden="true"]');
+    if (hidden !== null && hidden !== container && container.contains(hidden)) {
+        return true;
+    }
+    for (let node = element; node !== null && node !== container; node = node.parentElement) {
+        if (isHiddenByStyle(node)) {
+            return true;
+        }
+    }
+    return false;
+}
+/**
+ * True while the element is still one of the container's eligible focus targets.
+ */
+export function isEligibleFocusable(container, element, options) {
+    return element.isConnected && isFocusable(container, element) && isEligible(element, options);
+}
+/**
+ * True when the element sits in a subtree marked with {@link TOOLBAR_SKIP_ATTR} below the container.
+ */
+export function isSkipped(container, element) {
+    const skipped = element.closest(`[${TOOLBAR_SKIP_ATTR}]`);
+    return skipped !== null && skipped !== container && container.contains(skipped);
+}
+function isFocusable(container, element) {
+    return (element.matches(focusableElementsSelector) &&
+        !isNativelyDisabled(element) &&
+        element.getAttribute("role") !== "separator" &&
+        !isHidden(container, element) &&
+        !isSkipped(container, element));
+}
+export function isEligible(element, options) {
+    return options.isDisabledFocusable || element.getAttribute("aria-disabled") !== "true";
+}
+function getCompositeOf(container, element) {
+    const composite = element.parentElement?.closest(`[${TOOLBAR_COMPOSITE_ATTR}]`) ?? null;
+    return composite !== null && composite !== container && container.contains(composite) ? composite : null;
+}
+export function getFocusableDescendants(container) {
+    return Array.from(container.querySelectorAll(focusableElementsSelector)).filter((element) => isFocusable(container, element));
+}
+function getEligibleWithin(composite, options) {
+    return getFocusableDescendants(composite).filter((element) => isEligible(element, options));
+}
+export function getToolbarStops(container, options) {
+    const candidates = container.querySelectorAll(`${focusableElementsSelector}, [${TOOLBAR_COMPOSITE_ATTR}]`);
+    return Array.from(candidates).filter((element) => {
+        if (element.hasAttribute(TOOLBAR_COMPOSITE_ATTR)) {
+            return (!isHidden(container, element) &&
+                !isSkipped(container, element) &&
+                getEligibleWithin(element, options).length > 0);
+        }
+        return (getCompositeOf(container, element) === null &&
+            isFocusable(container, element) &&
+            isEligible(element, options));
+    });
+}
+export function resolveStop(container, element) {
+    if (!(element instanceof HTMLElement) || !container.contains(element)) {
+        return null;
+    }
+    return getCompositeOf(container, element) ?? element;
+}
+export function getStopFocusTarget(stop, remembered, options) {
+    if (!stop.hasAttribute(TOOLBAR_COMPOSITE_ATTR)) {
+        return stop;
+    }
+    const within = getEligibleWithin(stop, options);
+    if (remembered && within.includes(remembered)) {
+        return remembered;
+    }
+    return within.find((element) => element.getAttribute("aria-checked") === "true") ?? within[0] ?? null;
+}
+/**
+ * Makes exactly one focusable descendant reachable with Tab and returns it.
+ */
+export function applyRovingTabIndex(container, remembered, options) {
+    const stops = getToolbarStops(container, options);
+    let stop = remembered ? resolveStop(container, remembered) : null;
+    if (stop === null || !stops.includes(stop)) {
+        stop = stops[0] ?? null;
+    }
+    const target = stop === null ? null : (getStopFocusTarget(stop, remembered, options) ?? stops[0]);
+    // Hidden and disabled descendants are reset too, so a stop that became hidden or disabled cannot
+    // keep tabindex 0. An element that moved into a skipped subtree gets the toolbar's write undone.
+    for (const element of container.querySelectorAll(focusableElementsSelector)) {
+        if (isSkipped(container, element)) {
+            if (element.hasAttribute(TOOLBAR_MANAGED_ATTR)) {
+                element.removeAttribute("tabindex");
+                element.removeAttribute(TOOLBAR_MANAGED_ATTR);
+            }
+            continue;
+        }
+        element.tabIndex = element === target ? 0 : -1;
+        element.setAttribute(TOOLBAR_MANAGED_ATTR, "");
+    }
+    return target;
+}
+const NON_EDITING_INPUT_TYPES = new Set(["button", "checkbox", "radio", "submit", "reset", "image", "file"]);
+/**
+ * The logical offset a horizontal arrow leaves the text at. In an RTL field offset 0 sits at the
+ * visual right edge, so the two arrows swap.
+ *
+ * An explicit `dir` attribute wins over the computed style: it is what a consumer sets to mark a
+ * right-to-left value, and test environments do not resolve it into `direction`.
+ */
+function isStartEdgeKey(target, direction) {
+    const declared = target.closest("[dir]")?.getAttribute("dir")?.toLowerCase();
+    const isRtl = declared === "rtl" ||
+        (declared !== "ltr" &&
+            target.ownerDocument.defaultView?.getComputedStyle(target).direction === "rtl");
+    return isRtl ? direction === "ArrowRight" : direction === "ArrowLeft";
+}
+function isContentEditableCaretAtEdge(target, direction) {
+    const selection = target.ownerDocument.getSelection();
+    if (!selection || !selection.isCollapsed || selection.rangeCount === 0) {
+        return false;
+    }
+    const caret = selection.getRangeAt(0);
+    if (!target.contains(caret.startContainer)) {
+        return false;
+    }
+    const before = target.ownerDocument.createRange();
+    before.selectNodeContents(target);
+    before.setEnd(caret.startContainer, caret.startOffset);
+    const offset = before.toString().length;
+    return isStartEdgeKey(target, direction) ? offset === 0 : offset === (target.textContent ?? "").length;
+}
+/**
+ * True when a horizontal arrow key in an editing target would move the caret past its edge, so the
+ * key can be handed to the toolbar instead.
+ */
+const SELECTION_INPUT_TYPES = new Set(["text", "search", "url", "tel", "password"]);
+export function isCaretAtEdge(target, direction) {
+    // Other input types have no caret selection; reading it returns null or throws.
+    if (target instanceof HTMLInputElement && !SELECTION_INPUT_TYPES.has(target.type)) {
+        return false;
+    }
+    if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement) {
+        const { selectionStart, selectionEnd, value } = target;
+        if (selectionStart === null || selectionEnd === null || selectionStart !== selectionEnd) {
+            return false;
+        }
+        return isStartEdgeKey(target, direction) ? selectionStart === 0 : selectionEnd === value.length;
+    }
+    if (target instanceof HTMLElement && target.isContentEditable) {
+        return isContentEditableCaretAtEdge(target, direction);
+    }
+    return false;
+}
+/**
+ * True for elements that use arrow, Home and End keys to move a caret or a value.
+ */
+export function isEditingTarget(target) {
+    if (!(target instanceof HTMLElement)) {
+        return false;
+    }
+    if (target.isContentEditable || target instanceof HTMLTextAreaElement) {
+        return true;
+    }
+    return target instanceof HTMLInputElement && !NON_EDITING_INPUT_TYPES.has(target.type);
+}
+/**
+ * True when Alt, Ctrl or Meta is held. Those arrow combinations belong to the browser or the OS.
+ */
+export function hasSystemModifier(event) {
+    return event.altKey || event.ctrlKey || event.metaKey;
+}

package/esm/@ui/UiToolbar/toolbarItemProps.d.ts

@@ -0,0 +1,35 @@
+import { type KeyboardEvent, type MouseEvent } from "react";
+import { type IAccessibilityConfigBase } from "../../typings/accessibility.js";
+import { type IUiDropdownButtonRenderProps } from "../UiDropdown/types.js";
+/**
+ * Props every interactive toolbar item shares.
+ *
+ * @internal
+ */
+export interface IUiToolbarItemBaseProps {
+    /**
+     * Identifies the item inside a {@link UiToolbarSegmentedControl}.
+     */
+    value?: string;
+    /**
+     * Toggle state, exposed as `aria-pressed`. Inside a segmented control the group's value wins.
+     */
+    isSelected?: boolean;
+    isDestructive?: boolean;
+    isDisabled?: boolean;
+    /**
+     * Pressed look held while a popup opened by the item is on screen.
+     */
+    isActive?: boolean;
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    onKeyDown?: (event: KeyboardEvent<HTMLButtonElement>) => void;
+    id?: string;
+    dataId?: string;
+    dataTestId?: string;
+    accessibilityConfig?: IAccessibilityConfigBase;
+    /**
+     * Attributes from the `renderButton` callback of {@link UiDropdown}.
+     */
+    ariaAttributes?: IUiDropdownButtonRenderProps["ariaAttributes"];
+}
+//# sourceMappingURL=toolbarItemProps.d.ts.map

package/esm/@ui/UiToolbar/toolbarItemProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbarItemProps.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiToolbar/toolbarItemProps.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,UAAU,EAAE,MAAM,OAAO,CAAC;AAE5D,OAAO,EAAE,KAAK,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAC/E,OAAO,EAAE,KAAK,4BAA4B,EAAE,MAAM,wBAAwB,CAAC;AAE3E;;;;GAIG;AACH,MAAM,WAAW,uBAAuB;IACpC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACzD,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC9D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mBAAmB,CAAC,EAAE,wBAAwB,CAAC;IAC/C;;OAEG;IACH,cAAc,CAAC,EAAE,4BAA4B,CAAC,gBAAgB,CAAC,CAAC;CACnE"}

package/esm/@ui/UiToolbar/toolbarItemProps.js

@@ -0,0 +1,2 @@
+// (C) 2026 GoodData Corporation
+export {};

package/esm/@ui/UiToolbar/useToolbarRovingFocus.d.ts

@@ -0,0 +1,19 @@
+import { type FocusEvent, type KeyboardEvent, type RefObject } from "react";
+export interface IUseToolbarRovingFocusOptions {
+    containerRef: RefObject<HTMLElement | null>;
+    isDisabledFocusable: boolean;
+    loop: boolean;
+}
+export interface IUseToolbarRovingFocusResult {
+    onKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
+    onFocusCapture: (event: FocusEvent<HTMLElement>) => void;
+    onBlurCapture: (event: FocusEvent<HTMLElement>) => void;
+}
+/**
+ * Roving tabindex over the focusable descendants of a container, driven by the DOM.
+ *
+ * Children must not render a tabIndex that changes between renders. React only rewrites the
+ * attribute when the prop changes, so a constant value never overrides what this hook writes.
+ */
+export declare function useToolbarRovingFocus({ containerRef, isDisabledFocusable, loop, }: IUseToolbarRovingFocusOptions): IUseToolbarRovingFocusResult;
+//# sourceMappingURL=useToolbarRovingFocus.d.ts.map

package/esm/@ui/UiToolbar/useToolbarRovingFocus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useToolbarRovingFocus.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiToolbar/useToolbarRovingFocus.ts"],"names":[],"mappings":"AAEA,OAAO,EACH,KAAK,UAAU,EACf,KAAK,aAAa,EAClB,KAAK,SAAS,EAMjB,MAAM,OAAO,CAAC;AAoBf,MAAM,WAAW,6BAA6B;IAC1C,YAAY,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC5C,mBAAmB,EAAE,OAAO,CAAC;IAC7B,IAAI,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,4BAA4B;IACzC,SAAS,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACvD,cAAc,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACzD,aAAa,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CAC3D;AAED;;;;;GAKG;AACH,wBAAgB,qBAAqB,CAAC,EAClC,YAAY,EACZ,mBAAmB,EACnB,IAAI,GACP,EAAE,6BAA6B,GAAG,4BAA4B,CAmN9D"}