@geotab/zenith 3.15.0 → 3.16.0-beta.0

package/esm/table/selectable/utils/calculateSelectionState.js

@@ -3,6 +3,41 @@ export const calculateSelectionState = (entities, selections, all, checkboxVisib
     if (selections.size === 0) {
         return all ? SelectionState.All : SelectionState.None;
     }
+    if (all) {
+        // When `all` is true, `selections` holds the ids explicitly excluded from the
+        // otherwise-fully-selected set (see ISelectionValue), rather than included ids.
+        const isExcluded = (entity) => {
+            if (strategy === "nested" && entity.children) {
+                if (entity.children.length === 0) {
+                    return false;
+                }
+                return entity.children.every(child => {
+                    if (!checkboxVisible(child)) {
+                        return true;
+                    }
+                    if (checkboxDisabled(child)) {
+                        return true;
+                    }
+                    return selections.has(child.id);
+                });
+            }
+            return selections.has(entity.id);
+        };
+        const isPartiallyExcluded = (entity) => {
+            if (strategy === "nested" && entity.children) {
+                return entity.children.some(child => selections.has(child.id));
+            }
+            return selections.has(entity.id);
+        };
+        const relevantEntities = entities.filter(entity => checkboxVisible(entity) && !checkboxDisabled(entity));
+        if (relevantEntities.length === 0) {
+            return SelectionState.All;
+        }
+        if (relevantEntities.every(entity => !isPartiallyExcluded(entity))) {
+            return SelectionState.All;
+        }
+        return relevantEntities.every(entity => isExcluded(entity)) ? SelectionState.None : SelectionState.Partial;
+    }
     return entities.every(entity => {
         if (!checkboxVisible(entity)) {
             return true;

package/esm/table/selectable/utils/isRowChecked.js

@@ -1,7 +1,18 @@
 import { SelectionState } from "../interfaces";
 export const isRowChecked = (selections, state, strategy, entity, isNested) => {
     if (state === SelectionState.All) {
-        return { indeterminate: false, checked: true };
+        // When the overall selection is "all", `selections` holds the ids that have been
+        // explicitly excluded from that selection (see ISelectionValue), not included ids.
+        if (isNested) {
+            return { indeterminate: false, checked: !selections.has(entity.id) };
+        }
+        const mainEntity = entity;
+        if (strategy === "nested" && mainEntity.children && mainEntity.children.length > 0) {
+            const allChildrenChecked = mainEntity.children.every(child => !selections.has(child.id));
+            const someChildrenChecked = mainEntity.children.some(child => !selections.has(child.id));
+            return { indeterminate: someChildrenChecked && !allChildrenChecked, checked: allChildrenChecked };
+        }
+        return { indeterminate: false, checked: !selections.has(entity.id) };
     }
     if (isNested) {
         return { indeterminate: false, checked: selections.has(entity.id) };

package/esm/table/table.d.ts

@@ -25,6 +25,7 @@ import { IRowEntity } from "../dataGrid/row/row";
 import { IEntityWithId } from "../commonHelpers/entity";
 import "../cardContainer/cardContainer.less";
 import { ITableDetailPanel } from "./children/tableDetailPanel";
+import { ITrendIndicator } from "../trendIndicator/trendIndicator";
 export interface IListColumn<T extends IRowEntity<N>, N extends IEntityWithId = T> {
     readonly id: string;
     readonly title: string;
@@ -92,6 +93,7 @@ interface ITableComponents {
     BulkButton: React.FC<IBulkActionButton>;
     BulkLink: React.FC<IBulkActionLink>;
     DetailPanel: React.FC<ITableDetailPanel>;
+    TrendIndicator: React.FC<ITrendIndicator>;
 }
 declare const TableInner: <T extends IRowEntity<N>, N extends IEntityWithId = T>({ entities, columns, selectable, sortable, flexible, isLoading, loading, children, className, height, onFeedEnd, onScrollEnd, rowClassName, feedExpandable, expandedRows, onExpand, active, onClick }: ITable<T, N>) => import("react/jsx-runtime").JSX.Element;
 declare const Table: typeof TableInner & ITableComponents;

package/esm/table/table.js

@@ -37,6 +37,7 @@ import { FeedExpandControl } from "../dataFeed/feedExpandControl/feedExpandContr
 import { getGridClasses } from "../gridLayout/utils/getGridClasses";
 import { useNestedRows } from "./nested/useNestedRows";
 import { TableDetailPanel } from "./children/tableDetailPanel";
+import { TrendIndicator } from "../trendIndicator/trendIndicator";
 import { useLanguage } from "../utils/localization/useLanguage";
 // Interpolation placeholder used in the "{count} more rows loaded" translation key.
 // `translate()` has no interpolation overload, so the count is substituted at runtime via
@@ -402,4 +403,5 @@ Table.Fullscreen = TableFullscreen;
 Table.BulkButton = BulkActionButton;
 Table.BulkLink = BulkActionLink;
 Table.DetailPanel = TableDetailPanel;
+Table.TrendIndicator = TrendIndicator;
 export { Table, getEmptySelection, ColumnSortDirection, getSortableValue, ActionsColumn, MainColumn, CheckboxColumn, ActionLinkColumn };

package/esm/tabs/tabs.js

@@ -11,6 +11,7 @@ import { IconChevronLeft } from "../icons/iconChevronLeft";
 import { useDirectionalIcon } from "../utils/localization/useDirectionalIcon";
 import { ButtonIconPosition, TextIconButton } from "../textIconButton/textIconButton";
 import { tabsKeyboardHandler, tabsKeyboardTabHandler } from "../commonHelpers/tabsKeyboard";
+import { getDirectionalScrollDelta } from "../commonHelpers/arrowNavigation/arrowNavigationHelper";
 import { useMobileClassName } from "../utils/theme/useMobileClassName";
 import "../utils/globalThisPolyfill";
 import { zen } from "../utils/zen";
@@ -89,13 +90,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";
@@ -129,6 +132,7 @@ export const Tabs = ({
   const scrollableRef = useRef(null);
   const scrollRef = useRef(0);
   const focusableTabIdRef = useRef("");
+  const userInitiatedTabChangeRef = useRef(false);
   const handleButtonClick = e => {
     if (disabled) {
       return;
@@ -136,6 +140,7 @@ export const Tabs = ({
     const newState = e.currentTarget.id;
     focusableTabIdRef.current = newState;
     if (newState !== activeTabId) {
+      userInitiatedTabChangeRef.current = true;
       onTabChange(newState);
     }
   };
@@ -152,6 +157,7 @@ export const Tabs = ({
       // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
       if (target && target.id && tabs.some(tab => tab.id === target.id)) {
         focusableTabIdRef.current = target.id;
+        userInitiatedTabChangeRef.current = true;
         onTabChange(target.id);
       }
       return;
@@ -233,7 +239,10 @@ export const Tabs = ({
     const activeTab = scrollableRef.current.querySelector(`.zen-tab-item[id='${activeTabId}']`);
     if (activeTab instanceof HTMLElement) {
       focusableTabIdRef.current = activeTab.getAttribute("id") || "";
-      // activeTab.focus();
+      if (userInitiatedTabChangeRef.current) {
+        userInitiatedTabChangeRef.current = false;
+        activeTab.focus();
+      }
     }
   }, [activeTabId]);
   return _jsx("div", {
@@ -249,7 +258,7 @@ export const Tabs = ({
           icon: ScrollStartIcon,
           type: "tertiary",
           iconPosition: ButtonIconPosition.Start,
-          onClick: handleScrollButtonClick(scrollableRef.current, -scrollableStep),
+          onClick: handleScrollButtonClick(scrollableRef.current, getDirectionalScrollDelta(-scrollableStep, isRTL)),
           iconClasses: "zen-tabs__start-icon"
         })]
       }) : null, _jsx("div", {
@@ -282,7 +291,7 @@ export const Tabs = ({
           className: classNames(["zen-tabs__scroller", driveClassNameScroller || mobileClassNameScroller || "", "zen-tabs__end"]),
           icon: ScrollEndIcon,
           type: "tertiary",
-          onClick: handleScrollButtonClick(scrollableRef.current, scrollableStep),
+          onClick: handleScrollButtonClick(scrollableRef.current, getDirectionalScrollDelta(scrollableStep, isRTL)),
           iconPosition: ButtonIconPosition.End
         })]
       }) : null]

package/esm/testHelpers/renderWithFeatures.d.ts

@@ -0,0 +1,4 @@
+import { ReactNode } from "react";
+import { RenderResult } from "@testing-library/react";
+import { ExperimentalFeatureId } from "../utils/experimentalFeatures/registry";
+export declare const renderWithFeatures: (ui: ReactNode, features?: Partial<Record<ExperimentalFeatureId, boolean>>) => RenderResult;

package/esm/testHelpers/renderWithFeatures.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from "@testing-library/react";
+import { ZenithExperimentalProvider } from "../utils/experimentalFeatures/experimentalContext";
+export const renderWithFeatures = (ui, features) => {
+    return render(_jsx(ZenithExperimentalProvider, { features: features, children: ui }));
+};

package/esm/textInputRaw/textInputRaw.js

@@ -18,6 +18,6 @@ export const TextInputRaw = (props) => {
             props.isError ? "zen-text-input--error" : ""
         ]), value: maxLength ? value.substring(0, maxLength) : value, placeholder: props.placeholder, disabled: disabled, onChange: onChange, onKeyDown: props.onKeyDown, onBlur: onBlur, maxLength: maxLength, autoComplete: props.autocomplete, 
         // TODO: add tests
-        min: min, max: max, "aria-labelledby": props.ariaLabelledby, "aria-label": props.ariaLabel, autoFocus: props.autoFocus, required: !!required, onFocus: props.onFocus, minLength: minLength, name: name, pattern: pattern, role: props.role, "aria-expanded": props.ariaExpanded === undefined ? undefined : props.ariaExpanded === "true" || props.ariaExpanded === true, "aria-haspopup": props.ariaHaspopup, "aria-controls": props.ariaControls, "aria-autocomplete": props.ariaAutocomplete, "aria-describedby": props.ariaDescribedby }));
+        min: min, max: max, step: props.step, "aria-labelledby": props.ariaLabelledby, "aria-label": props.ariaLabel, autoFocus: props.autoFocus, required: !!required, onFocus: props.onFocus, minLength: minLength, name: name, pattern: pattern, role: props.role, "aria-expanded": props.ariaExpanded === undefined ? undefined : props.ariaExpanded === "true" || props.ariaExpanded === true, "aria-haspopup": props.ariaHaspopup, "aria-controls": props.ariaControls, "aria-autocomplete": props.ariaAutocomplete, "aria-describedby": props.ariaDescribedby }));
 };
 TextInputRaw.displayName = "TextInputRaw";

package/esm/textInputRaw/types.d.ts

@@ -31,6 +31,7 @@ export interface ITextInputDefaultRaw extends IZenComponentProps, ITextInputRawB
     onBlur?: React.FocusEventHandler<HTMLInputElement>;
     min?: number;
     max?: number;
+    step?: number | "any";
     minLength?: number;
     maxLength?: number;
     pattern?: RegExp;

package/esm/tooltip/components/inlineTrigger.d.ts

@@ -0,0 +1,43 @@
+import { ReactNode, Ref } from "react";
+import "./inlineTrigger.less";
+export interface IInlineTrigger {
+    /**
+     * The inline text that receives the dotted underline treatment.
+     *
+     * Accepts any `ReactNode`, but avoid placing interactive elements (buttons,
+     * links, inputs) inside — nesting interactive elements is invalid HTML and
+     * creates a poor keyboard and screen-reader experience.
+     *
+     * **For use within body-level text only.** Do not use inside headings, page
+     * titles, modal headers, or any non-body typographic context. Apply the
+     * desired body typography via `className` (e.g. `zen-body-s-700`).
+     */
+    children: ReactNode;
+    /** Additional CSS class names applied to the trigger button (e.g. a body typography class). */
+    className?: string;
+    ref?: Ref<HTMLButtonElement>;
+}
+/**
+ * `Tooltip.InlineTrigger` is an inline, dotted-underline trigger for the `Tooltip` component.
+ * Pass it as the `trigger` prop of a `Tooltip` to annotate a term within body text.
+ *
+ * The dotted underline uses the surrounding font colour (`currentColor`) at 15% thickness.
+ * The trigger inherits its typography from the surrounding text by default; pass a body
+ * typography class via `className` (e.g. `zen-body-s-700`, `zen-body-s-400-italic`) to override
+ * it explicitly. All interaction
+ * (hover, focus, keyboard, positioning) is handled by the parent `Tooltip` — this component only
+ * renders the trigger element and forwards the event handlers and `ref` that `Tooltip` injects.
+ *
+ * Set an accessible name via the parent `Tooltip`'s `triggerAriaLabel` prop when `children`
+ * contains no readable text (e.g. a purely decorative image or icon), so the button is not
+ * left without an accessible name (WCAG 4.1.2).
+ *
+ * @example
+ * <Tooltip alignment="top" trigger={<Tooltip.InlineTrigger className="zen-body-s-700">Inline text</Tooltip.InlineTrigger>}>
+ *   The tooltip text.
+ * </Tooltip>
+ */
+export declare const InlineTrigger: {
+    ({ children, className, ref, ...injectedProps }: IInlineTrigger): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/esm/tooltip/components/inlineTrigger.js

@@ -0,0 +1,38 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "../../commonHelpers/classNames/classNames";
+/**
+ * `Tooltip.InlineTrigger` is an inline, dotted-underline trigger for the `Tooltip` component.
+ * Pass it as the `trigger` prop of a `Tooltip` to annotate a term within body text.
+ *
+ * The dotted underline uses the surrounding font colour (`currentColor`) at 15% thickness.
+ * The trigger inherits its typography from the surrounding text by default; pass a body
+ * typography class via `className` (e.g. `zen-body-s-700`, `zen-body-s-400-italic`) to override
+ * it explicitly. All interaction
+ * (hover, focus, keyboard, positioning) is handled by the parent `Tooltip` — this component only
+ * renders the trigger element and forwards the event handlers and `ref` that `Tooltip` injects.
+ *
+ * Set an accessible name via the parent `Tooltip`'s `triggerAriaLabel` prop when `children`
+ * contains no readable text (e.g. a purely decorative image or icon), so the button is not
+ * left without an accessible name (WCAG 4.1.2).
+ *
+ * @example
+ * <Tooltip alignment="top" trigger={<Tooltip.InlineTrigger className="zen-body-s-700">Inline text</Tooltip.InlineTrigger>}>
+ *   The tooltip text.
+ * </Tooltip>
+ */
+export const InlineTrigger = (_a) => {
+    var { children, className = "", ref } = _a, injectedProps = __rest(_a, ["children", "className", "ref"]);
+    return (_jsx("button", Object.assign({}, injectedProps, { ref: ref, type: "button", className: classNames(["zen-tooltip-inline-trigger", className]), children: children })));
+};
+InlineTrigger.displayName = "InlineTrigger";

package/esm/tooltip/tooltip.d.ts

@@ -1,7 +1,8 @@
-import React, { PropsWithChildren, ReactElement } from "react";
+import React, { FC, PropsWithChildren, ReactElement } from "react";
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
 import "./tooltip.less";
 import { TAlignment } from "../absolute/absolute";
+import { IInlineTrigger } from "./components/inlineTrigger";
 export type TooltipSize = "large" | "small" | "auto";
 export type TMobileView = "default" | "mobileSheet";
 interface ITooltip extends IZenComponentProps {
@@ -33,5 +34,7 @@ interface ITooltip extends IZenComponentProps {
      */
     mobileSheetTitle?: ReactElement | string;
 }
-export declare const Tooltip: ({ trigger, triggerClassName, triggerAriaLabel, className, alignment, children, mobileSheetTitle, mobileTitle }: ITooltip) => import("react/jsx-runtime").JSX.Element;
+export declare const Tooltip: FC<ITooltip> & {
+    InlineTrigger: FC<IInlineTrigger>;
+};
 export {};

package/esm/tooltip/tooltip.js

@@ -19,6 +19,7 @@ import { IconInfoCircle } from "../icons/iconInfoCircle";
 import { useDrive } from "../utils/theme/useDrive";
 import { Shield } from "../shield/shield";
 import { zen } from "../utils/zen";
+import { InlineTrigger } from "./components/inlineTrigger";
 injectString("cs", "Information", "Informace");
 injectString("da-DK", "Information", "Information");
 injectString("de", "Information", "Information");
@@ -161,6 +162,7 @@ const EventWrapper = ({
   const propsToApply = isCurrentDeviceDesktop ? desktopEvents : mobileEvents;
   return React.cloneElement(children, propsToApply);
 };
+// eslint-disable-next-line @typescript-eslint/naming-convention
 export const Tooltip = ({
   trigger,
   triggerClassName,
@@ -193,7 +195,7 @@ export const Tooltip = ({
   const {
     dark
   } = useContext(themeContext);
-  const tooltipAlignment = useMemo(() => isMobile ? "bottom" : alignment || (direction === "ltr" ? "right" : "left"), [isMobile, alignment, direction]);
+  const tooltipAlignment = useMemo(() => isMobile ? "bottom" : alignment || "end", [isMobile, alignment]);
   const normalizedTooltipAlignment = useMemo(() => normalizeLogicalAlignment(tooltipAlignment, direction), [tooltipAlignment, direction]);
   const TOOLTIP_ARROW_HEIGHT = useMemo(() => isMobile || isDrive ? 0 : 6, [isMobile, isDrive]);
   const tooltipAlignmentRef = useRef(normalizedTooltipAlignment);
@@ -231,9 +233,17 @@ export const Tooltip = ({
       }
     }
   }, [trigger === null || trigger === void 0 ? void 0 : trigger.props, deviceType]);
-  const triggerCloneProps = useMemo(() => isTooltipVisible ? {
+  // Apply `triggerAriaLabel` to a `Tooltip.InlineTrigger` trigger (it has no `ariaLabel` prop
+  // of its own); the default info-icon trigger below handles `triggerAriaLabel` separately.
+  // An `aria-label` set directly on the `Tooltip.InlineTrigger` element takes priority over
+  // `triggerAriaLabel`, so we only fall back to `triggerAriaLabel` when the trigger has none.
+  const isInlineTrigger = (trigger === null || trigger === void 0 ? void 0 : trigger.type) === InlineTrigger;
+  const triggerOwnAriaLabel = trigger === null || trigger === void 0 ? void 0 : trigger.props["aria-label"];
+  const triggerCloneProps = useMemo(() => Object.assign(Object.assign({}, isTooltipVisible ? {
     "aria-describedby": tooltipId
-  } : {}, [isTooltipVisible, tooltipId]);
+  } : {}), isInlineTrigger && triggerAriaLabel && !triggerOwnAriaLabel ? {
+    "aria-label": triggerAriaLabel
+  } : {}), [isTooltipVisible, tooltipId, isInlineTrigger, triggerAriaLabel, triggerOwnAriaLabel]);
   const tooltipTrigger = useMemo(() => trigger ? trigger : _jsx("button", {
     tabIndex: 0,
     type: "button",
@@ -446,4 +456,5 @@ export const Tooltip = ({
   return _jsxs(_Fragment, {
     children: [portal, triggerClone]
   });
-};
+};
+Tooltip.InlineTrigger = InlineTrigger;

package/esm/trendIndicator/trendIndicator.d.ts

@@ -0,0 +1,47 @@
+import "./trendIndicator.less";
+import { IZenComponentProps } from "../commonHelpers/zenComponent";
+export type TTrendIndicatorDirection = "up" | "down" | "neutral";
+export type TTrendIndicatorTone = "positive" | "negative" | "neutral";
+export interface ITrendIndicator extends Pick<IZenComponentProps, "className"> {
+    /** Primary measured value displayed next to the direction icon, e.g. `"12.4km"`. */
+    value: string;
+    /**
+     * Change delta displayed after the value, e.g. `"+5%"` or `"+12km"`. When
+     * {@link ITrendIndicator.direction} is omitted, its sign determines the direction
+     * (and therefore the arrow and the default tone).
+     */
+    delta: string;
+    /**
+     * Trend direction — controls the arrow icon. When omitted, it is derived from the
+     * sign of {@link ITrendIndicator.delta}.
+     */
+    direction?: TTrendIndicatorDirection;
+    /**
+     * Color tone for the icon and delta. Defaults to the direction (`up` → positive,
+     * `down` → negative, `neutral` → neutral). Set it explicitly to decouple color from
+     * the arrow — e.g. `direction="up"` with `tone="negative"` for metrics where a rise
+     * is undesirable.
+     */
+    tone?: TTrendIndicatorTone;
+}
+/**
+ * A directional trend indicator: a direction icon, a value, and a change delta.
+ * Example: ▲ 12.4km  +5%.
+ *
+ * Built for the `Table` and exposed only as `Table.TrendIndicator`, for use
+ * inside a column's inline `render` (or the table's mobile card form).
+ * Presentational — it conveys a value and its change and has no interactive
+ * behavior.
+ *
+ * The arrow icon reflects `direction`; the icon and delta take a color `tone`
+ * (positive / negative / neutral) from design tokens. Tone defaults to the
+ * direction but can be set independently for metrics where a rise is bad. The
+ * value uses the primary text color.
+ *
+ * The direction icon is decorative — direction is also conveyed by the sign of
+ * the delta text, so no accessible name is required.
+ */
+export declare const TrendIndicator: {
+    ({ value, delta, direction, tone, className }: ITrendIndicator): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/esm/trendIndicator/trendIndicator.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from "../commonHelpers/classNames/classNames";
+import { IconChevronTopSmall } from "../icons/iconChevronTopSmall";
+import { IconChevronDownSmall } from "../icons/iconChevronDownSmall";
+import { IconTrendNeutral } from "../icons/iconTrendNeutral";
+import { getTrendIndicatorDirection } from "./trendIndicatorUtils";
+const DIRECTION_TONE = {
+    up: "positive",
+    down: "negative",
+    neutral: "neutral"
+};
+const DirectionIcon = ({ direction }) => {
+    if (direction === "down") {
+        return _jsx(IconChevronDownSmall, { className: "zen-trend-indicator__icon", size: "large" });
+    }
+    if (direction === "neutral") {
+        return _jsx(IconTrendNeutral, { className: "zen-trend-indicator__icon", size: "large" });
+    }
+    return _jsx(IconChevronTopSmall, { className: "zen-trend-indicator__icon", size: "large" });
+};
+/**
+ * A directional trend indicator: a direction icon, a value, and a change delta.
+ * Example: ▲ 12.4km  +5%.
+ *
+ * Built for the `Table` and exposed only as `Table.TrendIndicator`, for use
+ * inside a column's inline `render` (or the table's mobile card form).
+ * Presentational — it conveys a value and its change and has no interactive
+ * behavior.
+ *
+ * The arrow icon reflects `direction`; the icon and delta take a color `tone`
+ * (positive / negative / neutral) from design tokens. Tone defaults to the
+ * direction but can be set independently for metrics where a rise is bad. The
+ * value uses the primary text color.
+ *
+ * The direction icon is decorative — direction is also conveyed by the sign of
+ * the delta text, so no accessible name is required.
+ */
+export const TrendIndicator = ({ value, delta, direction, tone, className }) => {
+    const resolvedDirection = direction !== null && direction !== void 0 ? direction : getTrendIndicatorDirection(delta);
+    const resolvedTone = tone !== null && tone !== void 0 ? tone : DIRECTION_TONE[resolvedDirection];
+    return (_jsxs("span", { className: classNames(["zen-trend-indicator", `zen-trend-indicator--${resolvedTone}`, className !== null && className !== void 0 ? className : ""]), children: [_jsx(DirectionIcon, { direction: resolvedDirection }), _jsx("span", { className: "zen-trend-indicator__value", children: value }), _jsx("span", { className: "zen-trend-indicator__delta", children: delta })] }));
+};
+TrendIndicator.displayName = "TrendIndicator";

package/esm/trendIndicator/trendIndicatorUtils.d.ts

@@ -0,0 +1,9 @@
+import type { TTrendIndicatorDirection } from "./trendIndicator";
+/**
+ * Derives a {@link TTrendIndicatorDirection} from the sign of a delta string.
+ *
+ * Strips any non-numeric characters (currency symbols, `%`, units) before
+ * parsing, so inputs like `"+5%"`, `"-5%"`, and `"+0%"` are handled. A zero,
+ * empty, or unparsable delta resolves to `"neutral"`.
+ */
+export declare const getTrendIndicatorDirection: (delta: string) => TTrendIndicatorDirection;

package/esm/trendIndicator/trendIndicatorUtils.js

@@ -0,0 +1,14 @@
+/**
+ * Derives a {@link TTrendIndicatorDirection} from the sign of a delta string.
+ *
+ * Strips any non-numeric characters (currency symbols, `%`, units) before
+ * parsing, so inputs like `"+5%"`, `"-5%"`, and `"+0%"` are handled. A zero,
+ * empty, or unparsable delta resolves to `"neutral"`.
+ */
+export const getTrendIndicatorDirection = (delta) => {
+    const numeric = parseFloat(delta.replace(/[^0-9.+-]/g, ""));
+    if (Number.isNaN(numeric) || numeric === 0) {
+        return "neutral";
+    }
+    return numeric > 0 ? "up" : "down";
+};

package/esm/utils/experimentalFeatures/experimentalContext.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from "react";
+import { ExperimentalFeatureId } from "./registry";
+export type FeatureOverrides<TFeatureId extends string = ExperimentalFeatureId> = Partial<Record<TFeatureId, boolean>>;
+type ContextFeatureOverrides = FeatureOverrides<string>;
+interface IExperimentalContext {
+    features: ContextFeatureOverrides;
+}
+export declare const experimentalContext: import("react").Context<IExperimentalContext>;
+interface IZenithExperimentalProviderProps {
+    features?: Partial<Record<ExperimentalFeatureId, boolean>>;
+    children: ReactNode;
+}
+export declare const ZenithExperimentalProvider: {
+    ({ features, children }: IZenithExperimentalProviderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/esm/utils/experimentalFeatures/experimentalContext.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from "react";
+import { experimentalFeatures, FeatureState } from "./registry";
+const buildDefaultFeatures = () => {
+    const defaults = {};
+    for (const feature of experimentalFeatures) {
+        if (feature.state !== FeatureState.Killed) {
+            defaults[feature.id] = feature.state === FeatureState.Enabled;
+        }
+    }
+    return defaults;
+};
+const DEFAULT_FEATURES = buildDefaultFeatures();
+const EMPTY_FEATURES = {};
+export const experimentalContext = createContext({
+    features: {}
+});
+export const ZenithExperimentalProvider = ({ features = EMPTY_FEATURES, children }) => {
+    const parentContext = useContext(experimentalContext);
+    const contextValue = useMemo(() => ({
+        features: Object.assign(Object.assign(Object.assign({}, DEFAULT_FEATURES), parentContext.features), features)
+    }), [features, parentContext.features]);
+    return _jsx(experimentalContext.Provider, { value: contextValue, children: children });
+};
+ZenithExperimentalProvider.displayName = "ZenithExperimentalProvider";

package/esm/utils/experimentalFeatures/index.d.ts

@@ -0,0 +1,4 @@
+export { EXPERIMENTAL_FLAGS } from "./registry";
+export type { ExperimentalFeatureId } from "./registry";
+export { ZenithExperimentalProvider } from "./experimentalContext";
+export { useExperimentalFeature } from "./useExperimentalFeature";

package/esm/utils/experimentalFeatures/index.js

@@ -0,0 +1,3 @@
+export { EXPERIMENTAL_FLAGS } from "./registry";
+export { ZenithExperimentalProvider } from "./experimentalContext";
+export { useExperimentalFeature } from "./useExperimentalFeature";

package/esm/utils/experimentalFeatures/registry.d.ts

@@ -0,0 +1,13 @@
+export declare enum FeatureState {
+    Preview = 0,// OFF by default — consumers may opt in via provider/prop
+    Enabled = 1,// ON by default — consumers may opt out locally
+    Killed = 2
+}
+export interface IExperimentalFeatureDefinition {
+    id: string;
+    state: FeatureState;
+    description: string;
+}
+export declare const experimentalFeatures: readonly [];
+export type ExperimentalFeatureId = (typeof experimentalFeatures)[number]["id"];
+export declare const EXPERIMENTAL_FLAGS: { [K in ExperimentalFeatureId]: K; };

package/esm/utils/experimentalFeatures/registry.js

@@ -0,0 +1,8 @@
+export var FeatureState;
+(function (FeatureState) {
+    FeatureState[FeatureState["Preview"] = 0] = "Preview";
+    FeatureState[FeatureState["Enabled"] = 1] = "Enabled";
+    FeatureState[FeatureState["Killed"] = 2] = "Killed"; // OFF, locked — all overrides ignored; awaiting code deletion
+})(FeatureState || (FeatureState = {}));
+export const experimentalFeatures = [];
+export const EXPERIMENTAL_FLAGS = Object.fromEntries(experimentalFeatures.map(({ id }) => [id, id]));

package/esm/utils/experimentalFeatures/useExperimentalFeature.d.ts

@@ -0,0 +1,3 @@
+import { FeatureOverrides } from "./experimentalContext";
+import { ExperimentalFeatureId } from "./registry";
+export declare const useExperimentalFeature: (key: ExperimentalFeatureId, localOverrides?: FeatureOverrides) => boolean;

package/esm/utils/experimentalFeatures/useExperimentalFeature.js

@@ -0,0 +1,21 @@
+import { useContext } from "react";
+import { experimentalContext } from "./experimentalContext";
+import { experimentalFeatures, FeatureState } from "./registry";
+const experimentalFeatureById = new Map(experimentalFeatures.map(feature => [feature.id, feature]));
+const getFeatureOverride = (overrides, featureId) => overrides === null || overrides === void 0 ? void 0 : overrides[featureId];
+export const useExperimentalFeature = (key, localOverrides) => {
+    const context = useContext(experimentalContext);
+    const feature = experimentalFeatureById.get(key);
+    if ((feature === null || feature === void 0 ? void 0 : feature.state) === FeatureState.Killed) {
+        return false;
+    }
+    const localOverride = getFeatureOverride(localOverrides, key);
+    if (localOverride !== undefined) {
+        return localOverride;
+    }
+    const contextOverride = context.features[key];
+    if (contextOverride !== undefined) {
+        return contextOverride;
+    }
+    return (feature === null || feature === void 0 ? void 0 : feature.state) === FeatureState.Enabled;
+};

package/esm/utils/localization/translations/ar.json

@@ -90,7 +90,7 @@
     "Go to My Reports": "الذهاب إلى تقاريري",
     "There was an issue preparing your report": "حدثت مشكلة في إعداد تقريرك",
     "Your report is being prepared": "يتم إعداد تقريرك",
-    "We will notify you when your report is ready. You can track the progress by going to the My Reports page.": "سنخطرك عندما يصبح تقريرك جاهزًا. يمكنك تتبع التقدم بالذهاب إلى صفحة تقاريري.",
+    "You'll be notified when your report is ready. Track the progress on the My Reports page.": "سنخطرك عندما يصبح تقريرك جاهزًا. يمكنك تتبع التقدم بالذهاب إلى صفحة تقاريري.",
     "Your report is ready to download": "تقريرك جاهز للتنزيل",
     "Download now": "تنزيل الآن",
     "Download": "تنزيل",

package/esm/utils/localization/translations/bg-BG.json

@@ -92,7 +92,7 @@
     "Go to My Reports": "Към Моите отчети",
     "There was an issue preparing your report": "Възникна проблем при подготовката на вашия отчет",
     "Your report is being prepared": "Вашият отчет се подготвя",
-    "We will notify you when your report is ready. You can track the progress by going to the My Reports page.": "Ще ви уведомим, когато отчетът е готов. Можете да проследите напредъка от страницата Моите отчети.",
+    "You'll be notified when your report is ready. Track the progress on the My Reports page.": "Ще ви уведомим, когато отчетът е готов. Можете да проследите напредъка от страницата Моите отчети.",
     "Your report is ready to download": "Вашият отчет е готов за изтегляне",
     "Download now": "Изтеглете сега",
     "Download": "Изтегляне",

package/esm/utils/localization/translations/cs.json

@@ -81,7 +81,7 @@
     "All": "Vše",
     "There was an issue preparing your report": "Při připravování výkazu došlo k problému",
     "Your report is being prepared": "Váš výkaz se připravuje",
-    "We will notify you when your report is ready. You can track the progress by going to the My Reports page.": "Až bude váš výkaz připraven, upozorníme vás. Průběh můžete sledovat na stránce Moje výkazy.",
+    "You'll be notified when your report is ready. Track the progress on the My Reports page.": "Až bude váš výkaz připraven, upozorníme vás. Průběh můžete sledovat na stránce Moje výkazy.",
     "Your report is ready to download": "Váš výkaz je připraven ke stažení",
     "Download now": "Stáhnout",
     "Download": "Stáhnout",

package/esm/utils/localization/translations/da-DK.json

@@ -88,7 +88,7 @@
     "Go to My Reports": "Gå til Mine rapporter",
     "There was an issue preparing your report": "Der opstod et problem med at lave din rapport.",
     "Your report is being prepared": "Din rapport er ved at blive lavet.",
-    "We will notify you when your report is ready. You can track the progress by going to the My Reports page.": "Vi giver dig besked, når din rapport er klar. Du kan tjekke status på siden 'Mine rapporter'.",
+    "You'll be notified when your report is ready. Track the progress on the My Reports page.": "Vi giver dig besked, når din rapport er klar. Du kan tjekke status på siden 'Mine rapporter'.",
     "Your report is ready to download": "Din rapport er klar til download",
     "Download now": "Download nu",
     "Download": "Download",