@hitachivantara/uikit-react-core 5.106.1 → 6.0.0-next.2

package/dist/{esm/Header → Header}/Navigation/MenuItem/MenuItem.styles.js

@@ -37,32 +37,29 @@ const item = {
     }
   }
 };
-const { staticClasses, useClasses } = createClasses(
-  "HvHeader-MenuItem",
-  {
-    root: {
-      display: "inline",
-      height: "100%",
-      borderBottom: "4px solid transparent",
-      ":hover, :focus-within": {
-        backgroundColor: theme.colors.bgHover
-      }
-    },
-    menu: {},
-    menubar: {},
-    selected: {
-      color: theme.colors.text,
-      borderColor: "currentcolor"
-    },
-    item,
-    link: {
-      textDecoration: "none"
-    },
-    button: {
-      color: "inherit"
+const { staticClasses, useClasses } = createClasses("HvHeaderMenuItem", {
+  root: {
+    display: "inline",
+    height: "100%",
+    borderBottom: "4px solid transparent",
+    ":hover, :focus-within": {
+      backgroundColor: theme.colors.bgHover
     }
+  },
+  menu: {},
+  menubar: {},
+  selected: {
+    color: theme.colors.text,
+    borderColor: "currentcolor"
+  },
+  item,
+  link: {
+    textDecoration: "none"
+  },
+  button: {
+    color: "inherit"
   }
-);
+});
 export {
   staticClasses,
   useClasses

package/dist/{esm/Header → Header}/Navigation/Navigation.styles.js

@@ -1,6 +1,6 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
 const { staticClasses, useClasses } = createClasses(
-  "HvHeader-Navigation",
+  "HvHeaderNavigation",
   {
     root: {
       position: "absolute",

package/dist/{esm/InlineEditor → InlineEditor}/InlineEditor.styles.js

@@ -2,8 +2,6 @@ import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
 const { staticClasses, useClasses } = createClasses("HvInlineEditor", {
   root: {},
-  /** @deprecated unused. use `classes.root::after` instead */
-  inputBorderContainer: {},
   input: {},
   inputRoot: {
     height: "100%",

package/dist/{esm/Input → Input}/Input.js

@@ -27,8 +27,6 @@ import { HvInfoMessage } from "../FormElement/InfoMessage/InfoMessage.js";
 const DEFAULT_LABELS = {
   /** The label of the clear button. */
   clearButtonLabel: "Clear the text",
-  /** The label of the reveal password button. @deprecated unused */
-  revealPasswordButtonLabel: "Reveal password",
   /** The tooltip of the reveal password button when the password is hidden. */
   revealPasswordButtonClickToShowTooltip: "Click to show password.",
   /** The tooltip of the reveal password button when the password is revealed. */
@@ -443,7 +441,7 @@ const HvInput = fixedForwardRef(function HvInput2(props, ref) {
               root: classes.suggestionsContainer,
               list: classes.suggestionList
             },
-            expanded: hasSuggestions,
+            open: hasSuggestions,
             anchorEl: inputRef.current?.parentElement,
             onClose: suggestionClearHandler,
             onKeyDown: onSuggestionKeyDown,

package/dist/{esm/Input → Input}/Input.styles.js

@@ -28,8 +28,6 @@ const { staticClasses, useClasses } = createClasses("HvInput", {
       width: "100%"
     }
   },
-  /** @deprecated unused. use `classes.suggestionsContainer ::before` instead */
-  inputExtension: {},
   input: {},
   inputRoot: {
     ":is(:hover,:focus-within) $iconClear": {
@@ -43,8 +41,6 @@ const { staticClasses, useClasses } = createClasses("HvInput", {
   },
   inputRootDisabled: {},
   inputRootMultiline: { padding: 0 },
-  /** @deprecated unused. use `::after` instead */
-  inputBorderContainer: {},
   error: {}
 });
 export {

package/dist/{esm/List → List}/List.js

@@ -4,7 +4,6 @@ import { FixedSizeList } from "react-window";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { HvIcon } from "../icons.js";
 import { CounterLabel } from "../utils/CounterLabel.js";
-import { setId } from "../utils/setId.js";
 import { useClasses } from "./List.styles.js";
 import { staticClasses } from "./List.styles.js";
 import { useSelectableList } from "./useSelectableList.js";
@@ -12,12 +11,10 @@ import { parseList } from "./utils.js";
 import { HvCheckBox } from "../CheckBox/CheckBox.js";
 import { HvRadio } from "../Radio/Radio.js";
 import { HvOverflowTooltip } from "../OverflowTooltip/OverflowTooltip.js";
-import { HvLink } from "../Link/Link.js";
 import { HvListContainer } from "../ListContainer/ListContainer.js";
 import { HvListItem } from "../ListContainer/ListItem/ListItem.js";
+import { HvTypography } from "../Typography/Typography.js";
 const DEFAULT_LABELS = {
-  /** The label used for the All checkbox action. @deprecated no longer used */
-  selectAll: "Select All",
   /** The label used in the middle of the multi-selection count. */
   selectionConjunction: "/"
 };
@@ -27,8 +24,6 @@ const HvList = (props) => {
     classes: classesProp,
     className,
     multiSelect = false,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    hasTooltips = false,
     showSelectAll = false,
     labels = DEFAULT_LABELS,
     useSelector = false,
@@ -95,7 +90,6 @@ const HvList = (props) => {
     return /* @__PURE__ */ jsx(
       HvCheckBox,
       {
-        id: setId(id, "select-all"),
         label: /* @__PURE__ */ jsx(
           CounterLabel,
           {
@@ -112,15 +106,23 @@ const HvList = (props) => {
     );
   };
   const renderItemText = (item) => {
-    return !multiSelect && item.path ? /* @__PURE__ */ jsx(HvLink, { route: item.path, classes: { a: classes.link }, children: /* @__PURE__ */ jsx(HvOverflowTooltip, { data: item.label }) }) : /* @__PURE__ */ jsx(HvOverflowTooltip, { data: item.label });
+    return !multiSelect && item.path ? /* @__PURE__ */ jsx(
+      HvTypography,
+      {
+        link: true,
+        component: "a",
+        href: item.path,
+        className: classes.link,
+        children: /* @__PURE__ */ jsx(HvOverflowTooltip, { data: item.label })
+      }
+    ) : /* @__PURE__ */ jsx(HvOverflowTooltip, { data: item.label });
   };
-  const renderSelectItem = (item, itemId) => {
+  const renderSelectItem = (item) => {
     if (!useSelector) return renderItemText(item);
     const Component = multiSelect ? HvCheckBox : HvRadio;
     return /* @__PURE__ */ jsx(
       Component,
       {
-        id: setId(itemId, "selector"),
         label: /* @__PURE__ */ jsx(HvOverflowTooltip, { data: item.label }),
         checked: item.selected || false,
         disabled: item.disabled,
@@ -134,13 +136,11 @@ const HvList = (props) => {
     );
   };
   const renderListItem = (item, i, otherProps = {}) => {
-    const itemId = setId(id, "item", i);
     const selected = item.selected || false;
     const startAdornment = !useSelector && item.icon ? renderLeftIcon(item) : null;
     return /* @__PURE__ */ jsx(
       HvListItem,
       {
-        id: itemId,
         role: itemRole,
         disabled: item.disabled || void 0,
         className: classes.item,
@@ -155,7 +155,7 @@ const HvList = (props) => {
         endAdornment: item.showNavIcon && /* @__PURE__ */ jsx(HvIcon, { name: "CaretRight", className: classes.box, size: "xs" }),
         separator: item.separator,
         ...otherProps,
-        children: renderSelectItem(item, itemId)
+        children: renderSelectItem(item)
       },
       i
     );

package/dist/{esm/ListContainer → ListContainer}/ListItem/ListItem.js

@@ -47,31 +47,15 @@ const HvListItem = forwardRef(function HvListItem2(props, ref) {
   const clonedStartAdornment = useMemo(() => {
     if (!isValidElement(startAdornment)) return startAdornment;
     return cloneElement(startAdornment, {
-      className: cx(classes.startAdornment, startAdornment.props.className, {
-        // TODO: remove 👇 props below
-        [classes.disabled]: disabled
-      }),
-      checked: !!selected,
-      disabled,
-      onChange: handleClick
+      className: cx(classes.startAdornment, startAdornment.props.className)
     });
-  }, [
-    cx,
-    classes?.startAdornment,
-    classes?.disabled,
-    disabled,
-    handleClick,
-    selected,
-    startAdornment
-  ]);
+  }, [cx, classes?.startAdornment, startAdornment]);
   const clonedEndAdornment = useMemo(() => {
     if (!isValidElement(endAdornment)) return endAdornment;
     return cloneElement(endAdornment, {
-      className: cx(classes.endAdornment, endAdornment.props.className, {
-        [classes.disabled]: disabled
-      })
+      className: cx(classes.endAdornment, endAdornment.props.className)
     });
-  }, [cx, classes?.endAdornment, classes?.disabled, disabled, endAdornment]);
+  }, [cx, classes?.endAdornment, endAdornment]);
   const roleOptionAriaProps = role === "option" || role === "menuitem" ? {
     "aria-disabled": disabled || void 0,
     "aria-selected": selected
@@ -92,9 +76,7 @@ const HvListItem = forwardRef(function HvListItem2(props, ref) {
             [classes.condensed]: condensed,
             [classes.interactive]: interactive || selectable,
             [classes.selected]: selected || props["aria-selected"],
-            [classes.disabled]: disabled || props["aria-disabled"],
-            [classes.withStartAdornment]: startAdornment != null,
-            [classes.withEndAdornment]: endAdornment != null
+            [classes.disabled]: disabled || props["aria-disabled"]
           },
           className
         ),

package/dist/{esm/ListContainer → ListContainer}/ListItem/ListItem.styles.js

@@ -62,10 +62,6 @@ const { staticClasses, useClasses } = createClasses("HvListItem", {
   endAdornment: {
     float: "right"
   },
-  /** @deprecated use `:has($startAdornment)` instead */
-  withStartAdornment: {},
-  /** @deprecated use `:has($endAdornment)` instead */
-  withEndAdornment: {},
   separator: {
     height: 1,
     backgroundColor: theme.colors.border,

package/dist/{esm/Loading → Loading}/Loading.js

@@ -18,7 +18,6 @@ const HvLoading = forwardRef(function HvLoading2(props, ref) {
   } = useDefaultProps("HvLoading", props);
   const { classes, cx } = useClasses(classesProp);
   const size = small ? "small" : "regular";
-  const colorVariant = color && `${size}Color`;
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -38,18 +37,7 @@ const HvLoading = forwardRef(function HvLoading2(props, ref) {
       ),
       ...others,
       children: [
-        /* @__PURE__ */ jsx("div", { className: classes.barContainer, children: range(3).map((e) => /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cx(
-              classes.loadingBar,
-              // TODO: hoist to parent & remove unused `colorVariant` in v6
-              classes[size],
-              classes[colorVariant]
-            )
-          },
-          e
-        )) }),
+        /* @__PURE__ */ jsx("div", { className: classes.barContainer, children: range(3).map((e) => /* @__PURE__ */ jsx("div", { className: classes.loadingBar }, e)) }),
         label && /* @__PURE__ */ jsx("div", { className: classes.label, children: label })
       ]
     }

package/dist/{esm/Loading → Loading}/Loading.styles.js

@@ -42,15 +42,7 @@ const { staticClasses, useClasses } = createClasses("HvLoading", {
   },
   overlay: {},
   blur: {},
-  hidden: { display: "none" },
-  /** @deprecated use data-size=small instead */
-  small: {},
-  /** @deprecated use data-size=regular instead */
-  regular: {},
-  /** @deprecated leverage data-size=small instead */
-  smallColor: {},
-  /** @deprecated leverage data-size=regular instead */
-  regularColor: {}
+  hidden: { display: "none" }
 });
 export {
   staticClasses,

package/dist/{esm/MultiButton → MultiButton}/MultiButton.js

@@ -33,8 +33,6 @@ const HvMultiButton = (props) => {
         {
           [classes.multiple]: !split,
           [classes.vertical]: !split && vertical,
-          [classes[variant]]: variant,
-          // TODO - remove in v6
           [classes.splitGroup]: split,
           [classes.splitGroupDisabled]: split && disabled
         },

package/dist/{esm/MultiButton → MultiButton}/MultiButton.styles.js

@@ -92,7 +92,7 @@ const { staticClasses, useClasses } = createClasses("HvMultiButton", {
   button: {
     position: "relative",
     // prevent the focus ring to be hidden by sibling hover background
-    [`&:focus-visible, &.${staticClasses$1.iconSelected}`]: {
+    [`&:focus-visible, &.${staticClasses$1.open}`]: {
       zIndex: 5
     }
   },
@@ -131,14 +131,7 @@ const { staticClasses, useClasses } = createClasses("HvMultiButton", {
   },
   // TODO - review the need for these classes in v6 (use :first-child and :last-child instead)
   firstButton: {},
-  lastButton: {},
-  // TODO - review the need for these classes in v6
-  primary: {},
-  primarySubtle: {},
-  primaryGhost: {},
-  secondary: {},
-  secondarySubtle: {},
-  secondaryGhost: {}
+  lastButton: {}
 });
 export {
   staticClasses,

package/dist/{esm/Pagination → Pagination}/Pagination.js

@@ -5,7 +5,6 @@ import useMediaQuery from "@mui/material/useMediaQuery";
 import { useDefaultProps, clamp } from "@hitachivantara/uikit-react-utils";
 import { useLabels } from "../hooks/useLabels.js";
 import { HvIcon } from "../icons.js";
-import { setId } from "../utils/setId.js";
 import { useClasses } from "./Pagination.styles.js";
 import { staticClasses } from "./Pagination.styles.js";
 import HvSelect, { Option } from "./Select.js";
@@ -22,14 +21,6 @@ const DEFAULT_LABELS = {
   pageSizeSelectorDescription: "Select how many to display",
   /** Separator of current page and total pages. */
   pagesSeparator: "/",
-  /** Title of button `firstPage`. @deprecated Use `firstPage` instead. */
-  paginationFirstPageTitle: "First page",
-  /** Title of button `previousPage`. @deprecated Use `previousPage` instead. */
-  paginationPreviousPageTitle: "Previous page",
-  /** Title of button `nextPage`. @deprecated Use `nextPage` instead. */
-  paginationNextPageTitle: "Next page",
-  /** Title of button `lastPage`. @deprecated Use `lastPage` instead. */
-  paginationLastPageTitle: "Last page",
   /** Aria-label passed to the page input. */
   paginationInputLabel: "Current page",
   /** Label of the first page button */
@@ -86,7 +77,6 @@ const HvPagination = forwardRef(function HvPagination2(props, ref) {
   const renderPageJump = () => /* @__PURE__ */ jsx("div", { className: classes.pageJump, children: /* @__PURE__ */ jsx(
     HvInput,
     {
-      id: setId(id, "currentPage"),
       labels,
       inputProps: {
         "aria-label": labels?.paginationInputLabel,
@@ -120,7 +110,6 @@ const HvPagination = forwardRef(function HvPagination2(props, ref) {
       /* @__PURE__ */ jsx(
         HvSelect,
         {
-          id: setId(id, "pageSize"),
           disabled: pageSize === 0,
           className: classes.pageSizeOptionsSelect,
           "aria-label": labels?.pageSizeSelectorDescription,
@@ -146,22 +135,20 @@ const HvPagination = forwardRef(function HvPagination2(props, ref) {
       /* @__PURE__ */ jsx(
         HvIconButton,
         {
-          id: setId(id, "firstPage-button"),
           className: classes.iconContainer,
           disabled: !canPrevious,
           onClick: () => changePage(0),
-          title: labels?.firstPage || labels?.paginationFirstPageTitle,
+          title: labels?.firstPage,
           children: /* @__PURE__ */ jsx(HvIcon, { name: "Start", className: classes.icon, size: "xs" })
         }
       ),
       /* @__PURE__ */ jsx(
         HvIconButton,
         {
-          id: setId(id, "previousPage-button"),
           className: classes.iconContainer,
           disabled: !canPrevious,
           onClick: () => changePage(page - 1),
-          title: labels?.previousPage || labels?.paginationPreviousPageTitle,
+          title: labels?.previousPage,
           children: /* @__PURE__ */ jsx(HvIcon, { name: "Backwards", className: classes.icon, size: "xs" })
         }
       ),
@@ -172,7 +159,6 @@ const HvPagination = forwardRef(function HvPagination2(props, ref) {
           HvTypography,
           {
             component: "span",
-            id: setId(id, "totalPages"),
             className: classes.totalPagesTextContainer,
             children: pages
           }
@@ -181,22 +167,20 @@ const HvPagination = forwardRef(function HvPagination2(props, ref) {
       /* @__PURE__ */ jsx(
         HvIconButton,
         {
-          id: setId(id, "nextPage-button"),
           className: classes.iconContainer,
           disabled: !canNext,
           onClick: () => changePage(page + 1),
-          title: labels?.nextPage || labels?.paginationNextPageTitle,
+          title: labels?.nextPage,
           children: /* @__PURE__ */ jsx(HvIcon, { name: "Forwards", className: classes.icon, size: "xs" })
         }
       ),
       /* @__PURE__ */ jsx(
         HvIconButton,
         {
-          id: setId(id, "lastPage-button"),
           className: classes.iconContainer,
           disabled: !canNext,
           onClick: () => changePage(pages - 1),
-          title: labels?.lastPage || labels?.paginationLastPageTitle,
+          title: labels?.lastPage,
           children: /* @__PURE__ */ jsx(HvIcon, { name: "End", className: classes.icon, size: "xs" })
         }
       )

package/dist/{esm/QueryBuilder → QueryBuilder}/Context.js

@@ -174,7 +174,6 @@ const defaultCombinators = [
 const defaultLabels = {
   query: {
     delete: {
-      ariaLabel: "Reset query",
       tooltip: "Reset query",
       dialogTitle: "Remove all conditions?",
       dialogMessage: "Are you sure you want to remove all the conditions? They will be removed permanently.",
@@ -258,7 +257,6 @@ const defaultLabels = {
       }
     },
     delete: {
-      ariaLabel: "Remove condition",
       tooltip: "Remove condition",
       dialogTitle: "Remove condition?",
       dialogMessage: "Are you sure you want to remove the condition? It will be removed permanently.",
@@ -269,7 +267,6 @@ const defaultLabels = {
   },
   group: {
     delete: {
-      ariaLabel: "Remove group",
       tooltip: "Remove group",
       dialogTitle: "Remove group?",
       dialogMessage: "Are you sure you want to remove the group? It will be removed permanently.",
@@ -278,8 +275,7 @@ const defaultLabels = {
       dialogCloseTooltip: "Close"
     },
     reset: {
-      ariaLabel: "Change operator",
-      tooltip: "Change operator query",
+      tooltip: "Change operator",
       dialogTitle: "Change conditional operator?",
       dialogMessage: "Do you want to change conditional operator? You won't be able to undo this operation. Conditions and/or groups will be removed.",
       dialogConfirm: "Yes",
@@ -303,8 +299,6 @@ const defaultLabels = {
 const HvQueryBuilderContext = createContext({
   dispatchAction: () => ({}),
   askAction: () => ({}),
-  selectLocation: () => ({}),
-  // TODO - remove in v6 (not used)
   attributes: {},
   operators: defaultOperators,
   combinators: defaultCombinators,

package/dist/{esm/QueryBuilder → QueryBuilder}/QueryBuilder.js

@@ -15,8 +15,6 @@ const HvQueryBuilder = (props) => {
   const {
     attributes,
     renderers,
-    query: queryProp,
-    // TODO - remove in v6
     value,
     defaultValue,
     onChange,
@@ -35,9 +33,7 @@ const HvQueryBuilder = (props) => {
     null
   );
   const controlled = useRef(value != null);
-  const initialQuery = useRef(
-    value ?? defaultValue ?? queryProp ?? emptyGroup()
-  );
+  const initialQuery = useRef(value ?? defaultValue ?? emptyGroup());
   const [query, setQuery] = useControlled(value, initialQuery.current);
   const prevQuery = useRef(query);
   const [pendingAction, setPendingAction] = useState();

package/dist/{esm/QueryBuilder → QueryBuilder}/Rule/Rule.js

@@ -85,7 +85,7 @@ const Rule = (props) => {
           HvIconButton,
           {
             placement: "bottom",
-            title: labels.rule.delete.tooltip || labels.rule.delete.ariaLabel,
+            title: labels.rule.delete.tooltip,
             onClick: () => disableConfirmation ? dispatchAction({ type: "remove-node", id }) : askAction({
               actions: [{ type: "remove-node", id }],
               dialog: labels.rule.delete

package/dist/{esm/QueryBuilder → QueryBuilder}/RuleGroup.js

@@ -4,8 +4,8 @@ import { HvIcon } from "../icons.js";
 import { useQueryBuilderContext } from "./Context.js";
 import { useClasses } from "./QueryBuilder.styles.js";
 import { Rule } from "./Rule/Rule.js";
-import { HvButton } from "../Button/Button.js";
 import { HvEmptyState } from "../EmptyState/EmptyState.js";
+import { HvButton } from "../Button/Button.js";
 import { HvMultiButton } from "../MultiButton/MultiButton.js";
 import { HvIconButton } from "../IconButton/IconButton.js";
 import { HvTypography } from "../Typography/Typography.js";
@@ -100,7 +100,7 @@ const RuleGroup = ({
               actions: [{ type: "remove-node", id }],
               dialog: level === 0 && labels.query?.delete != null ? labels.query.delete : labels.group.delete
             }),
-            title: level === 0 && labels.query?.delete?.tooltip || labels.group.delete.tooltip || level === 0 && labels.query?.delete?.ariaLabel || labels.group.delete.ariaLabel,
+            title: level === 0 && labels.query?.delete?.tooltip || labels.group.delete.tooltip,
             disabled: readOnly,
             children: /* @__PURE__ */ jsx(
               HvIcon,

package/dist/{esm/ScrollToHorizontal → ScrollToHorizontal}/HorizontalScrollListItem/HorizontalScrollListItem.js

@@ -1,6 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
-import { setId } from "../../utils/setId.js";
 import { useClasses } from "./HorizontalScrollListItem.styles.js";
 import { staticClasses } from "./HorizontalScrollListItem.styles.js";
 import { HvOverflowTooltip } from "../../OverflowTooltip/OverflowTooltip.js";
@@ -13,16 +12,13 @@ const HvHorizontalScrollListItem = (props) => {
     label,
     tooltipPlacement,
     href,
-    iconClasses,
     ...others
   } = useDefaultProps("HvHorizontalScrollListItem", props);
   const { classes, cx } = useClasses(classesProp);
-  const buttonId = setId(id, "button");
   const Component = href != null ? "a" : "div";
   return /* @__PURE__ */ jsx("li", { id, className: cx(classes.root, className), "aria-current": selected, children: /* @__PURE__ */ jsxs(
     Component,
     {
-      id: buttonId,
       role: href == null ? "button" : void 0,
       tabIndex: 0,
       className: classes.button,
@@ -41,7 +37,7 @@ const HvHorizontalScrollListItem = (props) => {
           "div",
           {
             "aria-hidden": true,
-            className: cx(classes.bullet, iconClasses, {
+            className: cx(classes.bullet, {
               [classes.bulletSelected]: selected
             }),
             children: /* @__PURE__ */ jsx("span", {})

package/dist/{esm/ScrollToHorizontal → ScrollToHorizontal}/ScrollToHorizontal.js

@@ -5,7 +5,6 @@ import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
 import { useScrollTo } from "../hooks/useScrollTo.js";
 import { isKey } from "../utils/keyboardUtils.js";
-import { setId } from "../utils/setId.js";
 import { useClasses } from "./ScrollToHorizontal.styles.js";
 import { staticClasses } from "./ScrollToHorizontal.styles.js";
 import { HvHorizontalScrollListItem } from "./HorizontalScrollListItem/HorizontalScrollListItem.js";
@@ -14,9 +13,7 @@ const HvScrollToHorizontal = (props) => {
     id,
     defaultSelectedIndex = 0,
     scrollElementId,
-    // @ts-ignore
-    href = true,
-    navigationMode = href ? "push" : "none",
+    navigationMode = "push",
     relativeLinks = false,
     onChange,
     onClick,
@@ -45,7 +42,6 @@ const HvScrollToHorizontal = (props) => {
   const tabs = elements.map((option, index) => /* @__PURE__ */ jsx(
     HvHorizontalScrollListItem,
     {
-      id: setId(id, `item-${index}`),
       onClick: (event) => {
         event.preventDefault();
         setScrollTo(event, option.value, index, () => onChange?.(event, index));
@@ -61,11 +57,10 @@ const HvScrollToHorizontal = (props) => {
       tooltipPlacement: tooltipPosition,
       selected: selectedIndex === index,
       label: option.label,
-      iconClasses: cx({
-        [classes.selected]: selectedIndex === index,
-        [classes.notSelected]: selectedIndex !== index,
-        [classes.notSelectedRoot]: selectedIndex !== index
-      })
+      classes: {
+        bullet: classes.item,
+        selected: classes.itemSelected
+      }
     },
     option.key || option.label
   ));

package/dist/{esm/ScrollToHorizontal → ScrollToHorizontal}/ScrollToHorizontal.styles.js

@@ -23,9 +23,8 @@ const { staticClasses, useClasses } = createClasses(
       top: 0,
       left: 0
     },
-    notSelectedRoot: {},
-    notSelected: {},
-    selected: {}
+    item: {},
+    itemSelected: {}
   }
 );
 export {

package/dist/{esm/ScrollToVertical → ScrollToVertical}/ScrollToVertical.js

@@ -2,7 +2,6 @@ import { jsx } from "react/jsx-runtime";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useScrollTo } from "../hooks/useScrollTo.js";
 import { isKey } from "../utils/keyboardUtils.js";
-import { setId } from "../utils/setId.js";
 import { useClasses, calculateOffset } from "./ScrollToVertical.styles.js";
 import { staticClasses } from "./ScrollToVertical.styles.js";
 import { HvVerticalScrollListItem } from "./VerticalScrollListItem/VerticalScrollListItem.js";
@@ -11,9 +10,7 @@ const HvScrollToVertical = (props) => {
     id,
     defaultSelectedIndex = 0,
     scrollElementId,
-    // @ts-ignore
-    href = true,
-    navigationMode = href ? "push" : "none",
+    navigationMode = "push",
     relativeLinks = false,
     onChange,
     onClick,
@@ -40,7 +37,6 @@ const HvScrollToVertical = (props) => {
   const tabs = elements.map((option, index) => /* @__PURE__ */ jsx(
     HvVerticalScrollListItem,
     {
-      id: setId(id, `item-${index}`),
       onClick: (event) => {
         event.preventDefault();
         setScrollTo(event, option.value, index, () => onChange?.(event, index));

package/dist/{esm/ScrollToVertical → ScrollToVertical}/VerticalScrollListItem/VerticalScrollListItem.js

@@ -21,7 +21,7 @@ const HvVerticalScrollListItem = (props) => {
     {
       role: href == null ? "button" : void 0,
       tabIndex: 0,
-      className: cx(classes.button, classes.text),
+      className: classes.button,
       href,
       ...others,
       children: /* @__PURE__ */ jsx(

package/dist/{esm/ScrollToVertical → ScrollToVertical}/VerticalScrollListItem/VerticalScrollListItem.styles.js

@@ -24,8 +24,6 @@ const { staticClasses, useClasses } = createClasses(name, {
     fontSize: 4,
     color: theme.colors.textDisabled
   },
-  /** @deprecated: use classes.button instead */
-  text: {},
   button: {
     display: "flex",
     justifyContent: "center",