@geotab/zenith 3.15.0-beta.3 → 3.15.0-nightly.20260901.415ef01

package/dist/absolute/absolute.js

@@ -111,7 +111,7 @@ const Absolute = ({ isOpen, id, paddingX, paddingY, className, children, trigger
             returnFocusToTrigger();
         }
     }, [isOpen, returnFocusToTrigger]);
-    const condition = (0, react_1.useCallback)(() => (useTrapFocusWithTrigger === "off" ? false : true), [useTrapFocusWithTrigger]);
+    const condition = (0, react_1.useCallback)((subscriptionTrigger) => useTrapFocusWithTrigger !== "off" && !!subscriptionTrigger, [useTrapFocusWithTrigger]);
     (0, useTrapFocus_1.useTrapFocus)(popupRef, useTrapFocusWithTrigger === "withTrigger" ? triggerRef : undefined, isOpen, condition);
     (0, useEscape_1.useEscape)(popupRef, handleEscape, isOpen);
     (0, useArrowKey_1.useArrowKey)(popupRef, handleEscape, isOpen);

package/dist/betaPill/betaPill.js

@@ -162,15 +162,15 @@ const BetaPill = props => {
   const isMobile = (0, useMobile_1.useMobile)();
   const pillClasses = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-caption", "zen-beta-pill", isMobile ? "zen-beta-pill--mobile" : "", className !== null && className !== void 0 ? className : ""]), [isMobile, className]);
   const contextActions = (0, betaPillContext_1.useBetaPillActions)();
-  let resolvedMainAction = feedbackAction || (contextActions === null || contextActions === void 0 ? void 0 : contextActions.feedbackAction);
-  let resolvedSecondaryAction = betaOptionAction || (contextActions === null || contextActions === void 0 ? void 0 : contextActions.betaOptionAction);
-  if (resolvedMainAction || resolvedSecondaryAction) {
-    resolvedMainAction = Object.assign(Object.assign({}, resolvedMainAction), {
-      text: (resolvedMainAction === null || resolvedMainAction === void 0 ? void 0 : resolvedMainAction.text) || translate("Send feedback")
-    });
-    resolvedSecondaryAction = Object.assign(Object.assign({}, resolvedSecondaryAction), {
-      text: (resolvedSecondaryAction === null || resolvedSecondaryAction === void 0 ? void 0 : resolvedSecondaryAction.text) || translate("Manage beta option")
-    });
+  const rawMainAction = feedbackAction || (contextActions === null || contextActions === void 0 ? void 0 : contextActions.feedbackAction);
+  const rawSecondaryAction = betaOptionAction || (contextActions === null || contextActions === void 0 ? void 0 : contextActions.betaOptionAction);
+  if (rawMainAction || rawSecondaryAction) {
+    const resolvedMainAction = rawMainAction ? Object.assign(Object.assign({}, rawMainAction), {
+      text: rawMainAction.text || translate("Send feedback")
+    }) : undefined;
+    const resolvedSecondaryAction = rawSecondaryAction ? Object.assign(Object.assign({}, rawSecondaryAction), {
+      text: rawSecondaryAction.text || translate("Manage beta option")
+    }) : undefined;
     return (0, jsx_runtime_1.jsx)(pillExpandable_1.PillExpandable, {
       isBeta: true,
       icon: iconLab_1.IconLab,

package/dist/commonHelpers/arrowNavigation/arrowNavigationHelper.d.ts

@@ -5,6 +5,7 @@ interface IScrollOptions {
     top: number;
     left: number;
 }
+export declare const getDirectionalScrollDelta: (delta: number, isRTL: boolean) => number;
 export declare const getScrollOptions: (action: string, element: HTMLElement | null, isRTL?: boolean) => IScrollOptions;
 export declare const extractButtonAction: (event: React.MouseEvent<HTMLElement>) => TArrowsNavValue | null;
 export declare const scrollElement: (element: HTMLElement, options: IScrollOptions) => void;

package/dist/commonHelpers/arrowNavigation/arrowNavigationHelper.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.scrollElement = exports.extractButtonAction = exports.getScrollOptions = exports.clearTimerTimeout = exports.clearTimerInterval = void 0;
+exports.scrollElement = exports.extractButtonAction = exports.getScrollOptions = exports.getDirectionalScrollDelta = exports.clearTimerTimeout = exports.clearTimerInterval = void 0;
 const zen_1 = require("../../utils/zen");
 const clearTimerInterval = (timerId) => {
     var _a;
@@ -38,6 +38,10 @@ const getLTRScrollLeft = (action, scrollLeft, step, element) => {
     }
     return scrollLeft;
 };
+// In RTL the horizontal scroll axis is inverted: scrollLeft is 0 at the right edge and goes negative
+// toward the left edge, so a delta meant to move the viewport toward the arrow must flip sign.
+const getDirectionalScrollDelta = (delta, isRTL) => (isRTL ? -delta : delta);
+exports.getDirectionalScrollDelta = getDirectionalScrollDelta;
 const getScrollOptions = (action, element, isRTL = false) => {
     const step = (element === null || element === void 0 ? void 0 : element.offsetWidth) ? element.offsetWidth : 100;
     const scrollTop = (element === null || element === void 0 ? void 0 : element.scrollTop) || 0;

package/dist/commonHelpers/hooks/useTrapFocus.d.ts

@@ -1,4 +1,13 @@
 import { RefObject } from "react";
 type TElementToBool = (element: HTMLElement) => boolean;
+/**
+ * Traps keyboard (Tab) focus within `containerRef` (and optionally its `triggerRef`).
+ *
+ * Nested-popup contract: for correct nested-popup behaviour, a focused element that triggers an
+ * open child popup must expose a `data-popup-id` attribute whose value is the `id` of the child
+ * popup element rendered in the DOM. When present, focus is deferred to that child popup's trap.
+ * This contract is fulfilled automatically by `ControlledPopup`; callers using `useTrapFocus`
+ * directly must set `data-popup-id` themselves or nested popups will silently lose focus handling.
+ */
 export declare const useTrapFocus: (containerRef: RefObject<HTMLElement | null>, triggerRef: RefObject<HTMLElement | null> | undefined, subscriptionTrigger: unknown, condition?: (t: unknown) => boolean, isElementVisible?: TElementToBool) => void;
 export {};

package/dist/commonHelpers/hooks/useTrapFocus.js

@@ -9,18 +9,38 @@ const isChildOf_1 = require("../../utils/isChildOf");
 const isElementHidden_1 = require("../../utils/isElementHidden");
 const zen_1 = require("../../utils/zen");
 const findFirstVisible = (elems, isElementVisible) => elems.find(elem => isElementVisible(elem));
+/**
+ * Traps keyboard (Tab) focus within `containerRef` (and optionally its `triggerRef`).
+ *
+ * Nested-popup contract: for correct nested-popup behaviour, a focused element that triggers an
+ * open child popup must expose a `data-popup-id` attribute whose value is the `id` of the child
+ * popup element rendered in the DOM. When present, focus is deferred to that child popup's trap.
+ * This contract is fulfilled automatically by `ControlledPopup`; callers using `useTrapFocus`
+ * directly must set `data-popup-id` themselves or nested popups will silently lose focus handling.
+ */
 const useTrapFocus = (containerRef, triggerRef, subscriptionTrigger, condition, isElementVisible) => {
     /* eslint-disable complexity */
     const handleKeyDown = (0, react_1.useCallback)(e => {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g;
         /* eslint-enable complexity */
         const getChildCondition = () => {
-            var _a, _b;
+            var _a, _b, _c;
+            const targetEl = e.target;
+            // If the target is a trigger for an open child popup, defer to that popup's
+            // focus trap. Key on data-popup-id + DOM presence so this works even when
+            // preventAttributesAutoSet suppresses aria-expanded.
+            const dataPopupId = targetEl.getAttribute("data-popup-id");
+            if (dataPopupId &&
+                ((_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.getElementById(dataPopupId)) &&
+                (0, isChildOf_1.isChildOf)(targetEl, containerRef.current) &&
+                targetEl !== (triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current)) {
+                return true;
+            }
             return triggerRef
-                ? !(0, isChildOf_1.isChildOf)(e.target, containerRef.current) &&
-                    e.target !== ((_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.body) &&
-                    !(0, isChildOf_1.isChildOf)(e.target, triggerRef.current)
-                : !(0, isChildOf_1.isChildOf)(e.target, containerRef.current) && e.target !== ((_b = zen_1.zen.document) === null || _b === void 0 ? void 0 : _b.body);
+                ? !(0, isChildOf_1.isChildOf)(targetEl, containerRef.current) &&
+                    targetEl !== ((_b = zen_1.zen.document) === null || _b === void 0 ? void 0 : _b.body) &&
+                    !(0, isChildOf_1.isChildOf)(targetEl, triggerRef.current)
+                : !(0, isChildOf_1.isChildOf)(targetEl, containerRef.current) && targetEl !== ((_c = zen_1.zen.document) === null || _c === void 0 ? void 0 : _c.body);
         };
         if (!containerRef.current || getChildCondition()) {
             return;
@@ -30,9 +50,14 @@ const useTrapFocus = (containerRef, triggerRef, subscriptionTrigger, condition,
             : !(0, dialogHelpers_1.isElementInsideContainer)(target, containerEl.current) &&
                 !(0, dialogHelpers_1.isElementInsideContainer)(target, triggerEl.current);
         const isTargetOutside = e.target ? checkIsElementOutside(e.target, containerRef, triggerRef) : undefined;
-        const triggerSelectors = ((_a = triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll(focusableSelector_1.FOCUSABLE_SELECTOR)) || [];
+        const triggerElement = (_a = triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) !== null && _a !== void 0 ? _a : null;
+        const triggerSelf = (triggerElement === null || triggerElement === void 0 ? void 0 : triggerElement.matches(focusableSelector_1.FOCUSABLE_SELECTOR)) ? [triggerElement] : [];
+        const triggerChildren = Array.from((_b = triggerElement === null || triggerElement === void 0 ? void 0 : triggerElement.querySelectorAll(focusableSelector_1.FOCUSABLE_SELECTOR)) !== null && _b !== void 0 ? _b : []);
+        // querySelectorAll only returns descendants (never the element itself), so triggerSelf
+        // and triggerChildren are disjoint by definition and need no deduplication.
+        const triggerSelectors = [...triggerSelf, ...triggerChildren];
         const containerSelectors = containerRef.current.querySelectorAll(focusableSelector_1.FOCUSABLE_SELECTOR);
-        const focusable = triggerRef ? [...Array.from(triggerSelectors), ...Array.from(containerSelectors)] : [...Array.from(containerSelectors)];
+        const focusable = triggerRef ? [...triggerSelectors, ...Array.from(containerSelectors)] : [...Array.from(containerSelectors)];
         if (!focusable.length) {
             return;
         }
@@ -49,32 +74,59 @@ const useTrapFocus = (containerRef, triggerRef, subscriptionTrigger, condition,
                 return;
             }
             if (e.shiftKey) {
-                if (((_b = zen_1.zen.document) === null || _b === void 0 ? void 0 : _b.activeElement) === first) {
+                if (((_c = zen_1.zen.document) === null || _c === void 0 ? void 0 : _c.activeElement) === first) {
                     e.preventDefault();
                     last === null || last === void 0 ? void 0 : last.focus();
                     return;
                 }
-                if (firstContainerFocusable && ((_c = zen_1.zen.document) === null || _c === void 0 ? void 0 : _c.activeElement) === firstContainerFocusable) {
+                if (firstContainerFocusable && ((_d = zen_1.zen.document) === null || _d === void 0 ? void 0 : _d.activeElement) === firstContainerFocusable) {
                     e.preventDefault();
                     lastTriggerFocusable === null || lastTriggerFocusable === void 0 ? void 0 : lastTriggerFocusable.focus();
                 }
                 return;
             }
-            if (((_d = zen_1.zen.document) === null || _d === void 0 ? void 0 : _d.activeElement) === last) {
+            if (((_e = zen_1.zen.document) === null || _e === void 0 ? void 0 : _e.activeElement) === last) {
                 e.preventDefault();
                 first === null || first === void 0 ? void 0 : first.focus();
                 return;
             }
-            if (lastTriggerFocusable && ((_e = zen_1.zen.document) === null || _e === void 0 ? void 0 : _e.activeElement) === lastTriggerFocusable) {
+            if (lastTriggerFocusable && ((_f = zen_1.zen.document) === null || _f === void 0 ? void 0 : _f.activeElement) === lastTriggerFocusable) {
                 e.preventDefault();
                 firstContainerFocusable === null || firstContainerFocusable === void 0 ? void 0 : firstContainerFocusable.focus();
             }
-            else if (isLastChildOfFirst && first && (0, isChildOf_1.isChildOf)((_f = zen_1.zen.document) === null || _f === void 0 ? void 0 : _f.activeElement, first)) {
+            else if (isLastChildOfFirst && first && (0, isChildOf_1.isChildOf)((_g = zen_1.zen.document) === null || _g === void 0 ? void 0 : _g.activeElement, first)) {
                 e.preventDefault();
             }
             return;
         }
-    }, [containerRef, triggerRef, isElementVisible]);
+    }, 
+    // condition is consumed by useKeydown below, not read by handleKeyDown directly; its absence from deps is intentional.
+    [containerRef, triggerRef, isElementVisible]);
     (0, useKeydown_1.useKeydown)(handleKeyDown, subscriptionTrigger, condition);
+    // When withTrigger mode closes (condition goes false), restore focus to the trigger
+    // if focus landed on body (which happens when the popup's focused element is unmounted).
+    // This restoration is intentionally scoped to the "focused element unmounted → body" case;
+    // the general close case (e.g. click-outside, item selection) is handled separately by the
+    // returnFocusToTrigger effect in absolute.tsx. Both are idempotent, so overlap is harmless.
+    // Initialized to false because popups mount closed; the guard below reconciles the first
+    // active/inactive edge, so a popup that mounts already open still resolves correctly.
+    const isActiveRef = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => {
+        var _a, _b;
+        const isActive = condition ? condition(subscriptionTrigger) : !!subscriptionTrigger;
+        // Guard: short-circuit when the raw open/close state is unchanged to avoid spurious
+        // focus restoration if an unstable condition reference re-fires this effect.
+        if (!!subscriptionTrigger === isActiveRef.current) {
+            isActiveRef.current = isActive;
+            return;
+        }
+        if (!isActive && isActiveRef.current && (triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current)) {
+            const active = (_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.activeElement;
+            if (!active || active === ((_b = zen_1.zen.document) === null || _b === void 0 ? void 0 : _b.body)) {
+                triggerRef.current.focus();
+            }
+        }
+        isActiveRef.current = isActive;
+    }, [condition, subscriptionTrigger, triggerRef]);
 };
 exports.useTrapFocus = useTrapFocus;

package/dist/controlledPopup/controlledPopup.d.ts

@@ -10,7 +10,7 @@ import { IAlignment } from "../utils/positioningUtils/alignments";
 export type TAlignment = "top" | "top-left" | "top-right" | "left" | "left-top" | "left-bottom" | "right" | "right-top" | "right-bottom" | "bottom" | "bottom-left" | "bottom-right";
 export interface IControlledPopup extends IZenComponentProps {
     triggerRef: RefObject<HTMLElement | null>;
-    /** Alignment of the popup relative to its trigger. Defaults to `"bottom-left"` (flips to `"bottom-right"` in RTL). */
+    /** Alignment of the popup relative to its trigger. Defaults to `"bottom-start"`. */
     alignment?: TAlignmentAbsolute;
     id?: string;
     className?: string;

package/dist/controlledPopup/controlledPopup.js

@@ -11,7 +11,7 @@ const ControlledPopup = ({ isOpen, id, paddingX, paddingY, triggerRef, className
     const autoId = (0, react_1.useId)();
     const popupId = id || autoId;
     const isClientReady = (0, useClientReady_1.useClientReady)();
-    const rtlAlignment = (0, useRTLAlignment_1.useRTLAlignment)(alignment !== null && alignment !== void 0 ? alignment : "bottom-left");
+    const rtlAlignment = (0, useRTLAlignment_1.useRTLAlignment)(alignment !== null && alignment !== void 0 ? alignment : "bottom-start");
     (0, react_1.useEffect)(() => {
         if (!triggerRef.current || !isClientReady) {
             return;

package/dist/dropdownRaw/dropdownSearchableTrigger.js

@@ -183,7 +183,7 @@ const DropdownSearchableTrigger = _a => {
     } = _a,
     otherProps = __rest(_a, ["value", "className", "onChange", "placeholder", "isOpenPopup", "inputRef", "handleClick", "width", "title", "id", "disabled", "count", "currentSelection", "isError", "fullWidth", "ref", "name", "onBlur", "popupId", "handleFocusOnPopup", "dataAnalyticsId"])
     // eslint-disable-next-line complexity
-  ;
+;
   const {
     isFormSection
   } = (0, react_1.useContext)(formSectionProvider_1.FormSectionContext);

package/dist/filtersBar/components/filtersBarRange/filtersBarRange.d.ts

@@ -3,7 +3,7 @@ import { IRange, IRangeValues } from "../../../range/range";
 export interface IFiltersBarRangeState {
     value: IRangeValues;
 }
-interface IFiltersBarRangeProps extends Pick<IRange, "id" | "defaultValue" | "unit" | "labelMin" | "labelMax" | "disabled" | "label" | "triggerAriaLabel" | "min" | "max" | "fullWidthTriggerButton" | "fullBounded" | "className" | "allowEqualMinMax"> {
+interface IFiltersBarRangeProps extends Pick<IRange, "id" | "defaultValue" | "unit" | "labelMin" | "labelMax" | "disabled" | "label" | "triggerAriaLabel" | "min" | "max" | "fullWidthTriggerButton" | "fullBounded" | "className" | "allowEqualMinMax" | "integer"> {
 }
 export interface IFiltersBarRange extends IFiltersBarItem<IFiltersBarRangeState, IFiltersBarRangeProps> {
     className?: string;

package/dist/filtersBar/filtersBarSidePanel/components/filtersBarSidePanelRange/filtersBarSidePanelRange.d.ts

@@ -2,4 +2,4 @@ import "./filtersBarSidePanelRange.less";
 import { IRange } from "../../../../range/range";
 export interface IFiltersBarSidePanelRange extends Omit<IRange, "label" | "fullWidthTriggerButton" | "defaultValue"> {
 }
-export declare const FiltersBarSidePanelRange: ({ className, id, onChange, value, unit, min, max, fullBounded, allowEqualMinMax, labelMin, labelMax, disabled }: IFiltersBarSidePanelRange) => import("react/jsx-runtime").JSX.Element;
+export declare const FiltersBarSidePanelRange: ({ className, id, onChange, value, unit, min, max, fullBounded, allowEqualMinMax, labelMin, labelMax, disabled, integer }: IFiltersBarSidePanelRange) => import("react/jsx-runtime").JSX.Element;

package/dist/filtersBar/filtersBarSidePanel/components/filtersBarSidePanelRange/filtersBarSidePanelRange.js

@@ -94,7 +94,8 @@ const FiltersBarSidePanelRange = ({
   allowEqualMinMax,
   labelMin,
   labelMax,
-  disabled
+  disabled,
+  integer
 }) => {
   const generatedId = (0, react_1.useId)();
   const intId = id || generatedId;
@@ -153,8 +154,9 @@ const FiltersBarSidePanelRange = ({
     min: min,
     isMinField: true,
     direction: directionState,
-    disabled: disabled
-  }), [rangeFieldClasses, labelMin, translate, unit, currentValue.min, errorType, min, max, handleChange, directionState, disabled]);
+    disabled: disabled,
+    integer: integer
+  }), [rangeFieldClasses, labelMin, translate, unit, currentValue.min, errorType, min, max, handleChange, directionState, disabled, integer]);
   const memoizedMaxRangeField = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(rangeField_1.RangeField, {
     className: (0, classNames_1.classNames)([rangeFieldClasses, "zen-filters-bar-side-panel-range__max-field"]),
     label: labelMax || translate("Max"),
@@ -168,8 +170,9 @@ const FiltersBarSidePanelRange = ({
     min: min,
     isMinField: false,
     direction: directionState,
-    disabled: disabled
-  }), [rangeFieldClasses, labelMax, translate, unit, currentValue.max, errorType, min, max, handleChange, directionState, disabled]);
+    disabled: disabled,
+    integer: integer
+  }), [rangeFieldClasses, labelMax, translate, unit, currentValue.max, errorType, min, max, handleChange, directionState, disabled, integer]);
   return (0, jsx_runtime_1.jsxs)("div", {
     ref: setFieldsContainerRef,
     id: intId,

package/dist/filtersBar/filtersContainer/filtersContainer.js

@@ -17,6 +17,7 @@ const useDirectionalIcon_1 = require("../../utils/localization/useDirectionalIco
 const useLanguage_1 = require("../../utils/localization/useLanguage");
 const useDriveClassName_1 = require("../../utils/theme/useDriveClassName");
 const useIsRTL_1 = require("../../utils/localization/useIsRTL");
+const arrowNavigationHelper_1 = require("../../commonHelpers/arrowNavigation/arrowNavigationHelper");
 const zen_1 = require("../../utils/zen");
 injectString("cs", "Scroll to start", "P\u0159ej\xEDt na za\u010D\xE1tek");
 injectString("da-DK", "Scroll to start", "Rul til start");
@@ -92,13 +93,15 @@ const getScrollButtonType = (element, isRTL) => {
     return "";
   }
   if (isRTL) {
+    // scrollLeft is 0 at the start (right edge) and negative toward the end (left edge),
+    // so the button to offer is the mirror of the LTR case below.
     if (scrollLeft < -1 && scrollLeft > clientWidth - scrollWidth + 1) {
       return "both";
     }
     if (scrollLeft >= -1) {
-      return "start";
+      return "end";
     }
-    return "end";
+    return "start";
   }
   if (scrollLeft > 0 && scrollWidth > clientWidth + scrollLeft + 1) {
     return "both";
@@ -234,7 +237,7 @@ const FiltersContainer = ({
       className: (0, classNames_1.classNames)(["zen-filters-toolbar__scroller", driveClassNameScroller || "", "zen-filters-toolbar__start", showLeft ? `${scrollerClass}--visible` : "", isHiddenDisplay.left ? `${scrollerClass}--hidden` : ""]),
       icon: ScrollStartIcon,
       iconPosition: textIconButton_1.ButtonIconPosition.Start,
-      onClick: handleScrollButtonClick(-scrollableStep)
+      onClick: handleScrollButtonClick((0, arrowNavigationHelper_1.getDirectionalScrollDelta)(-scrollableStep, isRTL))
     }), (0, jsx_runtime_1.jsx)("div", {
       ref: scrollableRef,
       className: (0, classNames_1.classNames)(["zen-filters-toolbar__scrollable", !isHiddenDisplay.left ? "has-left-scroller" : "", !isHiddenDisplay.right ? "has-right-scroller" : ""]),
@@ -248,7 +251,7 @@ const FiltersContainer = ({
       title: translate("Scroll to end"),
       className: (0, classNames_1.classNames)([scrollerClass, driveClassNameScroller || "", "zen-filters-toolbar__end", showRight ? `${scrollerClass}--visible` : "", isHiddenDisplay.right ? `${scrollerClass}--hidden` : ""]),
       icon: ScrollEndIcon,
-      onClick: handleScrollButtonClick(scrollableStep),
+      onClick: handleScrollButtonClick((0, arrowNavigationHelper_1.getDirectionalScrollDelta)(scrollableStep, isRTL)),
       iconPosition: textIconButton_1.ButtonIconPosition.End
     })]
   }) : null;

package/dist/index.css

@@ -3403,6 +3403,29 @@ html:lang(ar) .zen-tooltip__title {
 .zen-shield-faded--visible {
   opacity: 0.1;
 }
+:where(.zen-tooltip-inline-trigger) {
+  font: inherit;
+}
+.zen-tooltip-inline-trigger {
+  display: inline;
+  cursor: pointer;
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: none;
+  color: inherit;
+  text-decoration: underline dotted;
+  text-decoration-thickness: 15%;
+  text-underline-offset: 0.25rem;
+  border-radius: 0.125rem;
+  outline-offset: 0.125rem;
+}
+.zen-tooltip-inline-trigger:focus-visible {
+  outline: 0.125rem solid currentColor;
+}
+.zen-tooltip-inline-trigger:focus:not(:focus-visible) {
+  outline: none;
+}
 .zen-tooltip-info {
   align-items: center;
   cursor: pointer;
@@ -4145,6 +4168,15 @@ html:lang(ar) .zen-side-panel {
 .zen-side-panel--shown .zen-form-field--new-component {
   display: flex;
 }
+.zen-side-panel--right-positioned {
+  transform: translateX(100%);
+}
+[dir="rtl"] .zen-side-panel--right-positioned {
+  transform: translateX(-100%);
+}
+.zen-side-panel.zen-side-panel--right-positioned.zen-side-panel--shown {
+  transform: translateX(0);
+}
 .zen-side-panel--left-positioned {
   inset-inline-start: 0;
   inset-inline-end: auto;
@@ -4154,6 +4186,9 @@ html:lang(ar) .zen-side-panel {
   border-start-end-radius: var(--border-radius-default);
   border-end-end-radius: var(--border-radius-default);
 }
+[dir="rtl"] .zen-side-panel--left-positioned {
+  transform: translateX(100%);
+}
 .zen-side-panel.zen-side-panel--left-positioned.zen-side-panel--shown {
   transform: translateX(0);
 }
@@ -6741,6 +6776,66 @@ html:lang(ar) .zen-table-number {
 .zen-feedExpandControl * {
   box-sizing: border-box;
 }
+.zen-trend-indicator {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25rem 0;
+  min-width: 0;
+  max-width: 100%;
+}
+.zen-trend-indicator * {
+  box-sizing: border-box;
+}
+.zen-trend-indicator__icon {
+  flex-shrink: 0;
+}
+.zen-trend-indicator__value {
+  font-family: Roboto, "Segoe UI", Segoe, "Helvetica Neue", Helvetica, sans-serif;
+  font-size: 0.75rem;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0.02rem;
+  line-height: 1rem;
+  text-transform: none;
+  text-decoration: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-wrap: normal;
+  color: var(--text-primary);
+  min-width: 0;
+}
+html:lang(ar) .zen-trend-indicator__value {
+  font-family: "Noto Sans Arabic", Roboto, "Segoe UI", Segoe, "Helvetica Neue", Helvetica, sans-serif;
+}
+.zen-trend-indicator__delta {
+  font-family: Roboto, "Segoe UI", Segoe, "Helvetica Neue", Helvetica, sans-serif;
+  font-size: 0.75rem;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0.02rem;
+  line-height: 1rem;
+  text-transform: none;
+  text-decoration: none;
+  flex-shrink: 0;
+  margin-inline-start: 0.25rem;
+}
+html:lang(ar) .zen-trend-indicator__delta {
+  font-family: "Noto Sans Arabic", Roboto, "Segoe UI", Segoe, "Helvetica Neue", Helvetica, sans-serif;
+}
+.zen-trend-indicator--positive .zen-trend-indicator__icon,
+.zen-trend-indicator--positive .zen-trend-indicator__delta {
+  color: var(--accents-success--detail);
+}
+.zen-trend-indicator--negative .zen-trend-indicator__icon,
+.zen-trend-indicator--negative .zen-trend-indicator__delta {
+  color: var(--accents-error--detail);
+}
+.zen-trend-indicator--neutral .zen-trend-indicator__icon,
+.zen-trend-indicator--neutral .zen-trend-indicator__delta {
+  color: var(--text-secondary);
+}
 .zen-summary-tile {
   box-sizing: border-box;
   font-family: Roboto, "Segoe UI", Segoe, "Helvetica Neue", Helvetica, sans-serif;
@@ -7594,8 +7689,13 @@ html:lang(ar) .zen-pill-content {
   outline-offset: 2px;
 }
 .zen-pill-actionable__input {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
   position: absolute;
-  left: -5000px;
+  white-space: nowrap;
+  width: 1px;
 }
 .zen-pill-actionable__content-wrapper {
   margin: 0;
@@ -8650,8 +8750,13 @@ html:lang(ar) .zen-chip {
   cursor: pointer;
 }
 .zen-chip__input {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
   position: absolute;
-  left: -5000px;
+  white-space: nowrap;
+  width: 1px;
 }
 .zen-chip__content-wrapper {
   margin: 0;
@@ -15268,6 +15373,9 @@ html:lang(ar) .zen-page-header--mobile .zen-page-header__page-name {
   inset-inline-end: calc(2.25rem - 0.375rem);
   background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, var(--backgrounds-content-0) 100%);
 }
+[dir="rtl"] .zen-tabs__gradient--right::before {
+  background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, var(--backgrounds-content-0) 100%);
+}
 .zen-tabs__gradient--right::after {
   position: absolute;
   content: "";
@@ -15295,6 +15403,9 @@ html:lang(ar) .zen-page-header--mobile .zen-page-header__page-name {
   inset-inline-start: calc(2.25rem - 0.375rem);
   background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, var(--backgrounds-content-0) 100%);
 }
+[dir="rtl"] .zen-tabs__gradient--left::after {
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, var(--backgrounds-content-0) 100%);
+}
 .zen-tabs__start {
   margin-inline-end: 0.5rem;
   inset-block-end: 0;
@@ -15338,6 +15449,9 @@ html:lang(ar) .zen-page-header--mobile .zen-page-header__page-name {
   inset-inline-start: calc(2.875rem - 0.5rem);
   background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, var(--backgrounds-content-0) 100%);
 }
+[dir="rtl"] .zen-tabs .zen-tabs__gradient.zen-tabs__gradient--mobile.zen-tabs__gradient--left::after {
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, var(--backgrounds-content-0) 100%);
+}
 .zen-tabs .zen-tabs__gradient.zen-tabs__gradient--mobile.zen-tabs__gradient--right::before {
   position: absolute;
   content: "";
@@ -15347,6 +15461,9 @@ html:lang(ar) .zen-page-header--mobile .zen-page-header__page-name {
   inset-inline-end: calc(2.875rem - 0.5rem);
   background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, var(--backgrounds-content-0) 100%);
 }
+[dir="rtl"] .zen-tabs .zen-tabs__gradient.zen-tabs__gradient--mobile.zen-tabs__gradient--right::before {
+  background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, var(--backgrounds-content-0) 100%);
+}
 .zen-tabs.zen-tabs--drive,
 .zen-tabs.zen-tabs--drive-tablet {
   height: 3rem;
@@ -15366,6 +15483,10 @@ html:lang(ar) .zen-page-header--mobile .zen-page-header__page-name {
   inset-inline-start: calc(3rem - 0.5rem);
   background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, var(--backgrounds-content-0) 100%);
 }
+[dir="rtl"] .zen-tabs .zen-tabs__gradient.zen-tabs__gradient--drive.zen-tabs__gradient--left::after,
+[dir="rtl"] .zen-tabs .zen-tabs__gradient.zen-tabs__gradient--drive-tablet.zen-tabs__gradient--left::after {
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, var(--backgrounds-content-0) 100%);
+}
 .zen-tabs .zen-tabs__gradient.zen-tabs__gradient--drive.zen-tabs__gradient--right::before,
 .zen-tabs .zen-tabs__gradient.zen-tabs__gradient--drive-tablet.zen-tabs__gradient--right::before {
   position: absolute;
@@ -15376,6 +15497,10 @@ html:lang(ar) .zen-page-header--mobile .zen-page-header__page-name {
   inset-inline-end: calc(3rem - 0.5rem);
   background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, var(--backgrounds-content-0) 100%);
 }
+[dir="rtl"] .zen-tabs .zen-tabs__gradient.zen-tabs__gradient--drive.zen-tabs__gradient--right::before,
+[dir="rtl"] .zen-tabs .zen-tabs__gradient.zen-tabs__gradient--drive-tablet.zen-tabs__gradient--right::before {
+  background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, var(--backgrounds-content-0) 100%);
+}
 .zen-tab-item {
   box-sizing: border-box;
   font-family: Roboto, "Segoe UI", Segoe, "Helvetica Neue", Helvetica, sans-serif;
@@ -15564,7 +15689,7 @@ html:lang(ar) .zen-tab-item.zen-tab-item--mobile .zen-tab-item__content-text {
   text-decoration: none;
 }
 .zen-tab-item:focus-visible {
-  outline: 1px solid var(--borders-form-field--active);
+  outline: 1px solid var(--borders-secondary);
   outline-offset: -1px;
 }
 .zen-filters-toolbar {
@@ -19045,8 +19170,13 @@ html:lang(ar) .zen-pill-actionable__block {
   margin-right: 8px;
 }
 .zen-pill-actionable__input {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
   position: absolute;
-  left: -5000px;
+  white-space: nowrap;
+  width: 1px;
 }
 .zen-pill-actionable__input:hover + .zen-pill-actionable__block--actionable {
   background-color: var(--backgrounds-content-2);

package/dist/index.d.ts

@@ -725,7 +725,7 @@ export { isButton } from "./menu/utils/isButton";
 export { isLink } from "./menu/utils/isLink";
 export { type IMiniTabElement, MiniTabsSize, type IMiniTabs, MiniTabs } from "./miniTabs/miniTabs";
 export { type IMobileSheet, MobileSheet } from "./mobileSheet/mobileSheet";
-export { type TFocusElement, type IModal, Modal, type IDialogContent, DialogContentNew } from "./modal/modal";
+export { MODAL_SCROLL_LOCK_CLASS, type TFocusElement, type IModal, Modal, type IDialogContent, DialogContentNew } from "./modal/modal";
 export { getPredefinedFocusableItem } from "./modal/modalHelpers";
 export { type INotificationProps, Notification } from "./notification/notification";
 export { type IPageHeader, PageHeaderDisplayName, PageHeader } from "./pageHeader/pageHeader";
@@ -778,7 +778,12 @@ export { type IToggleButtonDefaultRaw, type IToggleButtonRaw, type IToggleButton
 export { calculateArrowPosition } from "./tooltip/helpers/calculateArrowPosition";
 export { removeArrowClasses } from "./tooltip/helpers/removeArrowClasses";
 export { type TooltipSize, type TMobileView, Tooltip } from "./tooltip/tooltip";
+export { type TTrendIndicatorDirection, type TTrendIndicatorTone, type ITrendIndicator } from "./trendIndicator/trendIndicator";
+export { getTrendIndicatorDirection } from "./trendIndicator/trendIndicatorUtils";
 export { type IAbortablePromiseOptions, type IAbortablePromiseConstructor, AbortablePromise } from "./utils/abortablePromise";
+export { ZenithExperimentalProvider } from "./utils/experimentalFeatures/experimentalContext";
+export { type ExperimentalFeatureId, EXPERIMENTAL_FLAGS } from "./utils/experimentalFeatures/registry";
+export { useExperimentalFeature } from "./utils/experimentalFeatures/useExperimentalFeature";
 export { HeaderButtonsProvider } from "./utils/headerButtons/headerButtonsProvider";
 export { getNewFocusableItem, getFirstFocusableItem } from "./utils/keyboardHelpers";
 export { LanguageProvider } from "./utils/localization/languageProvider";