@hitachivantara/uikit-react-core 5.93.2 → 5.95.0

package/dist/cjs/Badge/Badge.cjs

@@ -3,12 +3,14 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const uikitStyles = require("@hitachivantara/uikit-styles");
 const Badge_styles = require("./Badge.styles.cjs");
 const Typography = require("../Typography/Typography.cjs");
 const HvBadge = React.forwardRef(function HvBadge2(props, ref) {
   const {
     classes: classesProp,
     className,
+    color,
     showCount = false,
     count: countProp = 0,
     maxCount = 99,
@@ -17,6 +19,7 @@ const HvBadge = React.forwardRef(function HvBadge2(props, ref) {
     text,
     textVariant,
     children: childrenProp,
+    style,
     ...others
   } = uikitReactUtils.useDefaultProps("HvBadge", props);
   const { classes, cx } = Badge_styles.useClasses(classesProp);
@@ -30,6 +33,10 @@ const HvBadge = React.forwardRef(function HvBadge2(props, ref) {
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
+        "data-color": color,
+        style: uikitReactUtils.mergeStyles(style, {
+          "--bg-color": color && uikitStyles.getColor(color)
+        }),
         className: cx(classes.badgePosition, {
           [classes.badgeContainer]: children,
           [classes.badgeHidden]: !(count > 0 || renderedCountOrLabel),

package/dist/cjs/Badge/Badge.styles.cjs

@@ -26,7 +26,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBadge", {
     ...uikitStyles.theme.typography.caption2,
     color: uikitStyles.theme.colors.textDimmed,
     borderRadius: uikitStyles.theme.radii.full,
-    backgroundColor: uikitStyles.theme.colors.text,
+    backgroundColor: `var(--bg-color, ${uikitStyles.theme.colors.text})`,
     lineHeight: "16px",
     minWidth: 8,
     padding: "0 5px",

package/dist/cjs/BaseCheckBox/BaseCheckBox.cjs

@@ -24,6 +24,8 @@ const HvBaseCheckBox = React.forwardRef(function HvBaseCheckBox2(props, ref) {
     readOnly = false,
     disabled = false,
     semantic = false,
+    color,
+    style,
     ...others
   } = uikitReactUtils.useDefaultProps("HvBaseCheckBox", props);
   const { classes, cx } = BaseCheckBox_styles.useClasses(classesProp);
@@ -51,7 +53,7 @@ const HvBaseCheckBox = React.forwardRef(function HvBaseCheckBox2(props, ref) {
     },
     [onFocusVisible]
   );
-  const params = { indeterminate, disabled, semantic };
+  const params = { indeterminate, disabled, semantic, color };
   return /* @__PURE__ */ jsxRuntime.jsx(
     MuiCheckbox__default.default,
     {

package/dist/cjs/BaseCheckBox/CheckBoxIcon.cjs

@@ -13,7 +13,7 @@ const { useClasses } = uikitReactUtils.createClasses("HvCheckBoxIcon", {
   },
   checked: {
     borderColor: "transparent",
-    backgroundColor: uikitStyles.theme.colors.primaryStrong,
+    backgroundColor: `var(--bg-color, ${uikitStyles.theme.colors.primaryStrong})`,
     color: uikitStyles.theme.colors.bgContainer
   },
   indeterminate: {
@@ -42,7 +42,8 @@ const HvCheckBoxIcon = (props) => {
     classes: classesProp,
     variant,
     disabled,
-    semantic
+    semantic,
+    color
   } = uikitReactUtils.useDefaultProps("HvCheckBoxIcon", props);
   const { classes, cx } = useClasses(classesProp, false);
   const d = React.useMemo(() => {
@@ -67,6 +68,7 @@ const HvCheckBoxIcon = (props) => {
         [classes.semantic]: semantic,
         [classes.disabled]: disabled
       }),
+      style: uikitReactUtils.mergeStyles({}, { "--bg-color": uikitStyles.getColor(color) }),
       children: /* @__PURE__ */ jsxRuntime.jsx("path", { d })
     }
   );

package/dist/cjs/BaseRadio/BaseRadio.cjs

@@ -22,6 +22,7 @@ const HvBaseRadio = React.forwardRef(
       onChange,
       semantic,
       inputProps,
+      color,
       onFocusVisible,
       onBlur,
       ...others
@@ -66,7 +67,7 @@ const HvBaseRadio = React.forwardRef(
           className
         ),
         icon: /* @__PURE__ */ jsxRuntime.jsx(RadioIcon.HvRadioIcon, { disabled }),
-        checkedIcon: /* @__PURE__ */ jsxRuntime.jsx(RadioIcon.HvRadioIcon, { checked: true, disabled }),
+        checkedIcon: /* @__PURE__ */ jsxRuntime.jsx(RadioIcon.HvRadioIcon, { checked: true, disabled, color }),
         color: "default",
         disabled,
         required,

package/dist/cjs/BaseRadio/RadioIcon.cjs

@@ -12,7 +12,7 @@ const { useClasses } = uikitReactUtils.createClasses("HvRadioIcon", {
   },
   checked: {
     borderColor: "transparent",
-    backgroundColor: uikitStyles.theme.colors.primaryStrong,
+    backgroundColor: `var(--bg-color, ${uikitStyles.theme.colors.primaryStrong})`,
     color: uikitStyles.theme.colors.bgContainer
   },
   disabled: {
@@ -30,7 +30,8 @@ const HvRadioIcon = (props) => {
     className,
     classes: classesProp,
     checked,
-    disabled
+    disabled,
+    color
   } = uikitReactUtils.useDefaultProps("HvRadioIcon", props);
   const { classes, cx } = useClasses(classesProp, false);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -42,6 +43,7 @@ const HvRadioIcon = (props) => {
         [classes.disabled]: disabled,
         [classes.checkedDisabled]: checked && disabled
       }),
+      style: uikitReactUtils.mergeStyles({}, { "--bg-color": uikitStyles.getColor(color) }),
       children: checked && /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "8", r: "4.5" })
     }
   );

package/dist/cjs/IconContainer/IconContainer.cjs

@@ -9,7 +9,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvIconConta
     display: "inline-flex",
     flex: "0 0 auto",
     // ensure icon doesn't flex grow/shrink
-    fontSize: `var(--icsize, 16px)`,
+    fontSize: `var(--isize, 16px)`,
     // default size of 16px
     transition: "rotate 0.2s ease",
     justifyContent: "center",
@@ -41,21 +41,21 @@ const HvIconContainer = React.forwardRef(function HvIconContainer2(props, ref) {
     classes: classesProp,
     style,
     color,
-    size: sizeProp = "S",
+    size = "S",
     rotate,
     children,
     ...others
   } = uikitReactUtils.useDefaultProps("HvIconContainer", props);
   const { cx, classes } = useClasses(classesProp);
-  const size = mapSizes(sizeProp);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       ref,
       className: cx(classes.root, className, {
-        [classes[size]]: size
+        [classes[mapSizes(size)]]: size
       }),
       style: uikitReactUtils.mergeStyles(style, {
+        "--isize": typeof size === "number" ? `${size}px` : void 0,
         color: uikitStyles.getColor(color),
         rotate: rotate ? "180deg" : void 0,
         ...style

package/dist/cjs/TagsInput/TagsInput.cjs

@@ -41,6 +41,7 @@ const HvTagsInput = React.forwardRef(
       onBlur,
       onFocus,
       placeholder,
+      startAdornment,
       endAdornment,
       hideCounter,
       middleCountLabel = "/",
@@ -360,6 +361,7 @@ const HvTagsInput = React.forwardRef(
                     `${label2}-${i}`
                   );
                 }),
+                !disabled && !readOnly && startAdornment,
                 !disabled && !readOnly && /* @__PURE__ */ jsxRuntime.jsx(
                   "input",
                   {

package/dist/esm/Badge/Badge.js

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { useDefaultProps, mergeStyles } from "@hitachivantara/uikit-react-utils";
+import { getColor } from "@hitachivantara/uikit-styles";
 import { useClasses } from "./Badge.styles.js";
 import { staticClasses } from "./Badge.styles.js";
 import { HvTypography } from "../Typography/Typography.js";
@@ -8,6 +9,7 @@ const HvBadge = forwardRef(function HvBadge2(props, ref) {
   const {
     classes: classesProp,
     className,
+    color,
     showCount = false,
     count: countProp = 0,
     maxCount = 99,
@@ -16,6 +18,7 @@ const HvBadge = forwardRef(function HvBadge2(props, ref) {
     text,
     textVariant,
     children: childrenProp,
+    style,
     ...others
   } = useDefaultProps("HvBadge", props);
   const { classes, cx } = useClasses(classesProp);
@@ -29,6 +32,10 @@ const HvBadge = forwardRef(function HvBadge2(props, ref) {
     /* @__PURE__ */ jsx(
       "div",
       {
+        "data-color": color,
+        style: mergeStyles(style, {
+          "--bg-color": color && getColor(color)
+        }),
         className: cx(classes.badgePosition, {
           [classes.badgeContainer]: children,
           [classes.badgeHidden]: !(count > 0 || renderedCountOrLabel),

package/dist/esm/Badge/Badge.styles.js

@@ -24,7 +24,7 @@ const { staticClasses, useClasses } = createClasses("HvBadge", {
     ...theme.typography.caption2,
     color: theme.colors.textDimmed,
     borderRadius: theme.radii.full,
-    backgroundColor: theme.colors.text,
+    backgroundColor: `var(--bg-color, ${theme.colors.text})`,
     lineHeight: "16px",
     minWidth: 8,
     padding: "0 5px",

package/dist/esm/BaseCheckBox/BaseCheckBox.js

@@ -21,6 +21,8 @@ const HvBaseCheckBox = forwardRef(function HvBaseCheckBox2(props, ref) {
     readOnly = false,
     disabled = false,
     semantic = false,
+    color,
+    style,
     ...others
   } = useDefaultProps("HvBaseCheckBox", props);
   const { classes, cx } = useClasses(classesProp);
@@ -48,7 +50,7 @@ const HvBaseCheckBox = forwardRef(function HvBaseCheckBox2(props, ref) {
     },
     [onFocusVisible]
   );
-  const params = { indeterminate, disabled, semantic };
+  const params = { indeterminate, disabled, semantic, color };
   return /* @__PURE__ */ jsx(
     MuiCheckbox,
     {

package/dist/esm/BaseCheckBox/CheckBoxIcon.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
-import { useDefaultProps, createClasses } from "@hitachivantara/uikit-react-utils";
-import { theme } from "@hitachivantara/uikit-styles";
+import { useDefaultProps, createClasses, mergeStyles } from "@hitachivantara/uikit-react-utils";
+import { getColor, theme } from "@hitachivantara/uikit-styles";
 import { SvgBase } from "../icons.js";
 const { useClasses } = createClasses("HvCheckBoxIcon", {
   root: {
@@ -11,7 +11,7 @@ const { useClasses } = createClasses("HvCheckBoxIcon", {
   },
   checked: {
     borderColor: "transparent",
-    backgroundColor: theme.colors.primaryStrong,
+    backgroundColor: `var(--bg-color, ${theme.colors.primaryStrong})`,
     color: theme.colors.bgContainer
   },
   indeterminate: {
@@ -40,7 +40,8 @@ const HvCheckBoxIcon = (props) => {
     classes: classesProp,
     variant,
     disabled,
-    semantic
+    semantic,
+    color
   } = useDefaultProps("HvCheckBoxIcon", props);
   const { classes, cx } = useClasses(classesProp, false);
   const d = useMemo(() => {
@@ -65,6 +66,7 @@ const HvCheckBoxIcon = (props) => {
         [classes.semantic]: semantic,
         [classes.disabled]: disabled
       }),
+      style: mergeStyles({}, { "--bg-color": getColor(color) }),
       children: /* @__PURE__ */ jsx("path", { d })
     }
   );

package/dist/esm/BaseRadio/BaseRadio.js

@@ -19,6 +19,7 @@ const HvBaseRadio = forwardRef(
       onChange,
       semantic,
       inputProps,
+      color,
       onFocusVisible,
       onBlur,
       ...others
@@ -63,7 +64,7 @@ const HvBaseRadio = forwardRef(
           className
         ),
         icon: /* @__PURE__ */ jsx(HvRadioIcon, { disabled }),
-        checkedIcon: /* @__PURE__ */ jsx(HvRadioIcon, { checked: true, disabled }),
+        checkedIcon: /* @__PURE__ */ jsx(HvRadioIcon, { checked: true, disabled, color }),
         color: "default",
         disabled,
         required,

package/dist/esm/BaseRadio/RadioIcon.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
-import { useDefaultProps, createClasses } from "@hitachivantara/uikit-react-utils";
-import { theme } from "@hitachivantara/uikit-styles";
+import { useDefaultProps, createClasses, mergeStyles } from "@hitachivantara/uikit-react-utils";
+import { getColor, theme } from "@hitachivantara/uikit-styles";
 import { SvgBase } from "../icons.js";
 const { useClasses } = createClasses("HvRadioIcon", {
   root: {
@@ -10,7 +10,7 @@ const { useClasses } = createClasses("HvRadioIcon", {
   },
   checked: {
     borderColor: "transparent",
-    backgroundColor: theme.colors.primaryStrong,
+    backgroundColor: `var(--bg-color, ${theme.colors.primaryStrong})`,
     color: theme.colors.bgContainer
   },
   disabled: {
@@ -28,7 +28,8 @@ const HvRadioIcon = (props) => {
     className,
     classes: classesProp,
     checked,
-    disabled
+    disabled,
+    color
   } = useDefaultProps("HvRadioIcon", props);
   const { classes, cx } = useClasses(classesProp, false);
   return /* @__PURE__ */ jsx(
@@ -40,6 +41,7 @@ const HvRadioIcon = (props) => {
         [classes.disabled]: disabled,
         [classes.checkedDisabled]: checked && disabled
       }),
+      style: mergeStyles({}, { "--bg-color": getColor(color) }),
       children: checked && /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "4.5" })
     }
   );

package/dist/esm/IconContainer/IconContainer.js

@@ -7,7 +7,7 @@ const { staticClasses, useClasses } = createClasses("HvIconContainer", {
     display: "inline-flex",
     flex: "0 0 auto",
     // ensure icon doesn't flex grow/shrink
-    fontSize: `var(--icsize, 16px)`,
+    fontSize: `var(--isize, 16px)`,
     // default size of 16px
     transition: "rotate 0.2s ease",
     justifyContent: "center",
@@ -39,21 +39,21 @@ const HvIconContainer = forwardRef(function HvIconContainer2(props, ref) {
     classes: classesProp,
     style,
     color,
-    size: sizeProp = "S",
+    size = "S",
     rotate,
     children,
     ...others
   } = useDefaultProps("HvIconContainer", props);
   const { cx, classes } = useClasses(classesProp);
-  const size = mapSizes(sizeProp);
   return /* @__PURE__ */ jsx(
     "div",
     {
       ref,
       className: cx(classes.root, className, {
-        [classes[size]]: size
+        [classes[mapSizes(size)]]: size
       }),
       style: mergeStyles(style, {
+        "--isize": typeof size === "number" ? `${size}px` : void 0,
         color: getColor(color),
         rotate: rotate ? "180deg" : void 0,
         ...style

package/dist/esm/TagsInput/TagsInput.js

@@ -40,6 +40,7 @@ const HvTagsInput = forwardRef(
       onBlur,
       onFocus,
       placeholder,
+      startAdornment,
       endAdornment,
       hideCounter,
       middleCountLabel = "/",
@@ -359,6 +360,7 @@ const HvTagsInput = forwardRef(
                     `${label2}-${i}`
                   );
                 }),
+                !disabled && !readOnly && startAdornment,
                 !disabled && !readOnly && /* @__PURE__ */ jsx(
                   "input",
                   {

package/dist/types/index.d.ts

@@ -1053,7 +1053,7 @@ export declare type HvAccentColorKeys = HvAccentColor;
 export declare type HvAccentColors = Record<HvAccentColorKeys, string>;
 
 /**
- * A accordion is a design element that expands in place to expose hidden information.
+ * An accordion is a design element that expands in place to expose hidden information.
  */
 export declare const HvAccordion: ForwardRefExoticComponent<HvAccordionProps & RefAttributes<HTMLDivElement>>;
 
@@ -1072,7 +1072,7 @@ export declare interface HvAccordionProps extends HvBaseProps<HTMLDivElement, "o
     defaultExpanded?: boolean;
     /** An object containing props to be passed onto container holding the accordion children. */
     containerProps?: React.HTMLAttributes<HTMLDivElement>;
-    /** Heading level to apply to accordion button. If ´undefined´ the button won't have a header wrapper. */
+    /** Heading level to apply to accordion button. If `undefined` the button won't have a header wrapper. */
     headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
     /** Whether the accordion is disabled. */
     disabled?: boolean;
@@ -1171,6 +1171,9 @@ export declare interface HvAdornmentProps extends HvBaseProps<HTMLDivElement | H
     classes?: HvAdornmentClasses;
 }
 
+/**
+ * An app switcher lets users quickly navigate between different applications or modules within a platform.
+ */
 export declare const HvAppSwitcher: ForwardRefExoticComponent<HvAppSwitcherProps & RefAttributes<HTMLDivElement>>;
 
 export declare const HvAppSwitcherAction: ({ id, className, classes: classesProp, application, onClickCallback, isSelectedCallback, }: HvAppSwitcherActionProps) => JSX_2.Element;
@@ -1245,15 +1248,14 @@ export declare type HvAtmosphereColorKeys = HvAtmosphereColor;
 export declare type HvAtmosphereColors = Record<HvAtmosphereColorKeys, string>;
 
 /**
- * Avatars can be used to represent a user or a brand.
- * They can show an image, an icon or the initial letters of a name, for example.
+ * Avatars represent a user or brand and can display an image, icon, or initials.
  */
 export declare const HvAvatar: ForwardRefExoticComponent<HvAvatarProps & RefAttributes<HTMLDivElement>>;
 
 export declare type HvAvatarClasses = ExtractNames<typeof useClasses_27>;
 
 /**
- * The AvatarGroup component is used to group multiple avatars.
+ *The Avatar Group displays a collection of avatars, often used to represent groups or teams.
  */
 export declare const HvAvatarGroup: ForwardRefExoticComponent<HvAvatarGroupProps & RefAttributes<HTMLDivElement>>;
 
@@ -1333,6 +1335,8 @@ export declare const HvBadge: ForwardRefExoticComponent<HvBadgeProps & RefAttrib
 export declare type HvBadgeClasses = ExtractNames<typeof useClasses_29>;
 
 export declare interface HvBadgeProps extends HvBaseProps {
+    /** The badge color. */
+    color?: HvColorAny;
     /**
      * Count is the number of unread notifications.
      * Note count and label are mutually exclusive.
@@ -1365,8 +1369,7 @@ export declare interface HvBadgeProps extends HvBaseProps {
 }
 
 /**
- * A Banner displays an important and succinct message. It can also provide actions for the user to address, or dismiss.
- * It requires a user action, for it to be dismissed. Banners should appear at the top of the screen, below a top app bar.
+ * A **Banner** shows an important message with optional actions. It appears below the top app bar and requires user dismissal.
  */
 export declare const HvBanner: ForwardRefExoticComponent<Omit<HvBannerProps, "ref"> & RefAttributes<unknown>>;
 
@@ -1468,7 +1471,7 @@ export declare const HvBaseCheckBox: ForwardRefExoticComponent<Omit<HvBaseCheckB
 
 export declare type HvBaseCheckBoxClasses = ExtractNames<typeof useClasses_32>;
 
-export declare interface HvBaseCheckBoxProps extends Omit<CheckboxProps, "onChange" | "classes"> {
+export declare interface HvBaseCheckBoxProps extends Omit<CheckboxProps, "onChange" | "classes" | "color"> {
     /**
      * The input name.
      */
@@ -1529,6 +1532,10 @@ export declare interface HvBaseCheckBoxProps extends Omit<CheckboxProps, "onChan
      * Callback fired when the component is blurred.
      */
     onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
+    /**
+     * Color applied to the check box.
+     */
+    color?: HvColorAny;
     /**
      * A Jss Object used to override or extend the styles applied to the checkbox.
      */
@@ -1695,7 +1702,7 @@ export declare const HvBaseRadio: ForwardRefExoticComponent<Omit<HvBaseRadioProp
 
 export declare type HvBaseRadioClasses = ExtractNames<typeof useClasses_33>;
 
-export declare interface HvBaseRadioProps extends Omit<RadioProps, "onChange" | "classes"> {
+export declare interface HvBaseRadioProps extends Omit<RadioProps, "onChange" | "classes" | "color"> {
     /**
      * Class names to be applied.
      */
@@ -1740,6 +1747,10 @@ export declare interface HvBaseRadioProps extends Omit<RadioProps, "onChange" |
      * When uncontrolled, defines the initial checked state.
      */
     defaultChecked?: boolean;
+    /**
+     * Color applied to the radio button.
+     */
+    color?: HvColorAny;
     /**
      * The callback fired when the radio button is pressed.
      */
@@ -1896,8 +1907,7 @@ export declare interface HvBreadCrumbProps extends HvBaseProps<HTMLDivElement, "
 export { HvBreakpoints }
 
 /**
- * Bulk Actions allow users to perform an action on a single or multiple items.
- * Also known as "batch production" of multiple items at once, one stage at a time.
+ * Bulk Actions let users apply an action to one or multiple items at once, streamlining repetitive tasks.
  */
 export declare const HvBulkActions: ForwardRefExoticComponent<HvBulkActionsProps & RefAttributes<HTMLDivElement>>;
 
@@ -2181,10 +2191,7 @@ export declare interface HvCalendarProps extends Omit<React.HTMLAttributes<HTMLD
 declare type HvCalloutVariant = "success" | "warning" | "error" | "default" | "info" | "accent";
 
 /**
- * A card is a container for a few short and related pieces of content.
- * It roughly resembles a playing card in size and shape and is intended as a
- * linked short representation of a conceptual unit. For that reason,
- * this pattern must be used as an entry-point for further information.
+ * A Card is a container for short, related content—similar in shape to a playing card—and serves as an entry point to more detailed information.
  */
 export declare const HvCard: ForwardRefExoticComponent<HvCardProps & RefAttributes<HTMLDivElement>>;
 
@@ -2251,8 +2258,7 @@ export declare interface HvCardProps extends HvBaseProps {
 }
 
 /**
- * A Carousel is commonly used to browse images, it can also be used to browse any kind of content like text, video, or charts.
- * It allows you to focus on a particular content while having a notion of how many you have to explore.
+ A Carousel is used to browse content—commonly images, but also text, video, or charts. It highlights one item at a time while giving users a sense of the total content available.
  */
 export declare const HvCarousel: ForwardRefExoticComponent<HvCarouselProps & RefAttributes<HTMLDivElement>>;
 
@@ -2386,13 +2392,8 @@ export declare interface HvCharCounterProps extends HvBaseProps {
 }
 
 /**
- * A Checkbox is a mechanism that allows the user to select one or more options.
- *
- * Usually used in a Checkbox Group to present the user with a range of options from
- * which the user **may select any number of options** to complete their task.
- *
- * It can also be used individually to represent the toggle of a single option, when
- * the Toggle Switch and Toggle Button aren't more appropriate.
+ * A Checkbox lets users select one or more options.
+ * It’s commonly used in a Checkbox Group to present multiple choices, but can also be used individually to toggle a single option.
  */
 export declare const HvCheckBox: ForwardRefExoticComponent<Omit<HvCheckBoxProps, "ref"> & RefAttributes<HTMLButtonElement>>;
 
@@ -3423,8 +3424,6 @@ export declare type HvFilesAddedEvent = (files: HvFileData[]) => void;
 /**
  * Lets the user choose one or more files from their device storage. Once chosen,
  * the files can be uploaded to a server or manipulated on the client side.
- *
- * Accepted file types follow the format of the html [input accept attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file).
  */
 export declare const HvFileUploader: (props: HvFileUploaderProps) => JSX_2.Element;
 
@@ -3514,9 +3513,7 @@ export declare interface HvFileUploaderProps extends HvFormElementProps {
 }
 
 /**
- * This component implements one potential use-case of the Filter Group pattern Design System Specifies.
- * Due to the enormous variety of capabilities required for this, we strongly recommend checking the code of the component and extend it yourself,
- * while we do not provide a better approach for building this component with smaller and more composable parts.
+ A Filter Group is a UI pattern used to organize and apply multiple filters to a dataset, helping users refine and narrow down results.
  */
 export declare const HvFilterGroup: ForwardRefExoticComponent<HvFilterGroupProps & RefAttributes<HTMLDivElement>>;
 
@@ -4171,7 +4168,7 @@ export declare type HvInlineEditorProps<C extends React.ElementType = typeof HvI
 }>;
 
 /**
- * A text input box is a graphical control element intended to enable the user to input text information to be used by the software.
+ The Input is a UI control that allows users to enter and edit text, typically used for collecting user-provided information.
  */
 export declare const HvInput: <InputElement extends HTMLElement = HTMLInputElement | HTMLTextAreaElement>(props: HvInputProps<InputElement> & RefAttributes<InputElement>) => React.ReactElement<any> | null;
 
@@ -4666,9 +4663,8 @@ export declare function hvNumberColumn<D extends object = Record<string, unknown
 export declare const hvNumberFallback: (value: any) => number | "—";
 
 /**
- * A number input component that allows the user to enter a number and displays two buttons to decrease / increase the value.
- *
- * This component extends the `HvInput` component, please check its documentation for more information on the available props.
+ *A Number Input lets users enter numeric values and provides buttons to increment or decrement the value.
+ *It extends the HvInput component—refer to its documentation for additional available props.
  *
  * @extends HvInput
  */
@@ -4712,7 +4708,7 @@ export declare interface HvOptionProps<OptionValue extends {}> extends Omit<HvLi
 }
 
 /**
- * This component generates a tooltip whenever the text is overflowed.
+ * Displays a tooltip automatically when the text content overflows its container.
  */
 export declare const HvOverflowTooltip: (props: HvOverflowTooltipProps) => JSX_2.Element;
 
@@ -4779,9 +4775,7 @@ export declare interface HvPaginationProps extends HvBaseProps {
 }
 
 /**
- * A panel is a container used in a variety of patterns (e.g. dropdown, filter group, details section).
- * It can be horizontal or vertical and its size is defined by its content and how it relates to surrounding patterns.
- * Regardless of its content, a panel look and feel should be consistent.
+ * A Panel is a flexible container used in patterns like dropdowns, filter groups, or detail sections. It can be horizontal or vertical, with size defined by its content and context. Its appearance should remain consistent regardless of usage.
  */
 export declare const HvPanel: ForwardRefExoticComponent<HvPanelProps & RefAttributes<HTMLDivElement>>;
 
@@ -4795,7 +4789,7 @@ export declare interface HvPanelProps extends HvBaseProps {
 export declare type HvPolarizedColorKeys = "positive" | "positive_120" | "positive_80" | "warning" | "warning_120" | "warning_140" | "negative" | "cat21" | "cat22" | "cat23" | "cat24" | "cat25" | "cat26" | "cat27" | "cat28" | "catastrophic";
 
 /**
- * ProgressBar provides feedback about a process that is taking place in the application.
+ * Progress Bar provides feedback about a process that is taking place in the application.
  */
 export declare const HvProgressBar: (props: HvProgressBarProps) => JSX_2.Element;
 
@@ -5167,13 +5161,9 @@ export declare interface HvQueryBuilderRendererProps<V = any> {
 export declare type HvQueryBuilderRenderers = Record<string, ValueRenderer>;
 
 /**
- * A Radio Button is a mechanism that allows user to select just an option from a group of options.
- *
- * It should used in a Radio Button Group to present the user with a range of options from
- * which the user **may select just one option** to complete their task.
- *
- * Individual use of radio buttons, at least uncontrolled, is unadvised as React state management doesn't
- * respond to the browser's native management of radio inputs checked state.
+ A Radio Button lets users select a single option from a group.
+
+ Use it within a Radio Button Group—individual usage is discouraged, as React may not track the `checked` state reliably outside a group.
  */
 export declare const HvRadio: ForwardRefExoticComponent<Omit<HvRadioProps, "ref"> & RefAttributes<HTMLButtonElement>>;
 
@@ -5547,9 +5537,7 @@ export declare interface HvScrollToVerticalProps extends HvBaseProps<HTMLOListEl
 }
 
 /**
- * A search input component that allows the user to enter a search term.
- *
- * This component extends the `HvInput` component, please check its documentation for more information on the available props.
+ * A Search Input allows users to enter and submit a search term.
  *
  * @extends HvInput
  */
@@ -5589,9 +5577,9 @@ export declare interface HvSectionProps extends Omit<HvBaseProps<HTMLDivElement>
 }
 
 /**
- * The `HvSelect` component is a form control element that allows selection from a list of options.
+ * The `HvSelect` component is a form control for choosing an option from a list.
  *
- * It aims to be aligned with the native HTML `<select>` and `<option>` APIs and be easily integrated with forms.
+ * It aligns with the native `<select>` and `<option>` APIs, making it easy to integrate into forms.
  *
  * @example
  * <HvSelect name="pets">
@@ -5604,10 +5592,9 @@ export declare const HvSelect: <OptionValue extends {}, Multiple extends boolean
 export declare type HvSelectClasses = ExtractNames<typeof useClasses_13>;
 
 /**
- * Allows the user to select one or more items from a list of choices.
+ * SelectionList allows users to select one or more items from a list.
  *
- * Although it supports multi-selection, DS recommends the use of a selection list
- * when it’s clear that the user can only select just one option from the range provided.
+ * While it supports multi-selection, it’s recommended to use it when it’s clear that only a single option should be selected.
  */
 export declare const HvSelectionList: ForwardRefExoticComponent<HvSelectionListProps & RefAttributes<HTMLUListElement>>;
 
@@ -5691,6 +5678,9 @@ export declare type HvSemanticColors = Record<HvSemanticColorKeys, string>;
 
 export declare type HvSequentialColorKeys = "cat1" | "cat1_100" | "cat1_200" | "cat1_300" | "cat1_400" | "cat1_500" | "cat1_600" | "cat1_700" | "cat1_800" | "cat1_900";
 
+/**
+ * SimpleGrid is a lightweight, responsive grid for evenly spaced items across a fixed number of columns.
+ */
 export declare const HvSimpleGrid: (props: HvSimpleGridProps) => JSX_2.Element;
 
 export declare type HvSimpleGridClasses = ExtractNames<typeof useClasses_104>;
@@ -5736,7 +5726,7 @@ declare interface HvSingleCalendarProps extends Omit<HvCalendarProps, "classes">
 export { HvSize }
 
 /**
- * The `HvSkeleton` component is used to create a placeholder element that represents the shape and size of the content that will be loaded.
+ * The Skeleton component displays a placeholder that mimics the shape and size of loading content.
  */
 export declare const HvSkeleton: (props: HvSkeletonProps) => JSX_2.Element;
 
@@ -5760,7 +5750,7 @@ export declare interface HvSkeletonProps extends HvBaseProps {
 }
 
 /**
- * Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.
+ * Sliders let users select a value from a range along a track. They're ideal for settings like volume, brightness, or image filters.
  */
 export declare const HvSlider: ForwardRefExoticComponent<HvSliderProps & RefAttributes<SliderRef>>;
 
@@ -5855,12 +5845,13 @@ export declare interface HvSliderProps extends HvBaseProps<HTMLDivElement, "onCh
 }
 
 /**
- * A Snackbar provides brief messages about app processes.
- * It is dismissed automatically after a given interval.
+ * A Snackbar displays brief messages about app processes and dismisses automatically after a set time.
+ *
+ * You can build a Snackbar using:
+ *
+ * - `HvSnackbar` – handles positioning, transitions, auto-hide, and more.
+ * - `HvSnackbarContent` – offers fine-grained control over the content and appearance.
  *
- * Snackbar can be built with two different components:
- * - `HvSnackbar`, which wraps all the positioning, transition, auto hide, etc.
- * - `HvSnackbarContent`, which allows a finer control and customization of the content of the Snackbar.
  */
 export declare const HvSnackbar: ForwardRefExoticComponent<Omit<HvSnackbarProps, "ref"> & RefAttributes<unknown>>;
 
@@ -5976,9 +5967,10 @@ export declare interface HvSnackbarProviderProps {
 export declare type HvSnackbarVariant = HvCalloutVariant;
 
 /**
- * A Stack component allows the organization of its children in a vertical or horizontal layout.
+ * The Stack component arranges its children in a vertical or horizontal layout.
+ *
+ * It supports customizable spacing and optional dividers between elements.
  *
- * It also allows the specification of the spacing between the stack elements and the addition of a divider between the elements.
  */
 export declare const HvStack: (props: HvStackProps) => JSX_2.Element;
 
@@ -6530,10 +6522,9 @@ export declare interface HvTabsProps extends Omit<TabsProps, "onChange"> {
 }
 
 /**
- * A Tag is one word that describes a specific aspect of an asset. A single asset can have
- * multiple tags.
- * Use tags to highlight an item's status for quick recognition and navigation
- * Use color to indicate meanings that users can learn and recognize across products.
+ * A Tag is a single word that highlights a specific aspect of an asset. An asset can have multiple tags.
+ *
+ * Use tags to indicate status, aid recognition, and support navigation—leveraging color to convey consistent meaning across products.
  */
 export declare const HvTag: ForwardRefExoticComponent<Omit<HvTagProps, "ref"> & RefAttributes<HTMLElement>>;
 
@@ -6907,7 +6898,9 @@ export declare type HvTimePickerValue = {
 };
 
 /**
- * Use when two instances are opposite and the on/off analogy doesn’t apply. Only well-known icons should be used, otherwise, use a single checkbox for the same situation.
+ * Use when two opposing states are represented and the on/off analogy doesn’t fit.
+ *
+ * Only use well-known icons—otherwise, prefer a single checkbox instead.
  */
 export declare const HvToggleButton: ForwardRefExoticComponent<HvToggleButtonProps & RefAttributes<HTMLButtonElement>>;
 
@@ -6927,11 +6920,10 @@ export declare interface HvToggleButtonProps extends HvBaseProps<HTMLButtonEleme
 }
 
 /**
- * Tooltips display informative text when users hover over, focus on, or tap an element.
- * Accessibility-wise, the tooltip automatically labels the `children` content.
+ * Tooltips display informative text on hover, focus, or tap, and automatically label the target element for accessibility.
+ *
+ * For icon-only buttons, consider using `HvIconButton`, which includes built-in tooltip behavior.
  *
- * If you are looking to wrap an icon only button with a tooltip, take a look at the `HvIconButton` component
- * which offers you thus behavior out of the box.
  */
 export declare const HvTooltip: ForwardRefExoticComponent<Omit<HvTooltipProps, "ref"> & RefAttributes<unknown>>;
 
@@ -7041,13 +7033,8 @@ export declare interface HvTreeItemProps extends React.HTMLAttributes<HTMLElemen
 }
 
 /**
- * A Tree View displays hierarchical structures.
- * It also facilitates the exploration of categorical levels and their content.
- *
- * Tree structures are built through composing the `HvTreeItem` component,
- * or a custom variation of it.
- *
- * It is based on the [MUI X TreeView](https://mui.com/x/react-tree-view) component.
+ * A Tree View displays hierarchical data and helps users explore nested categories.
+ * Tree structures are built using `HvTreeItem` or a custom variation of it.
  *
  * @example
  * ```tsx
@@ -7195,20 +7182,7 @@ export declare interface HvValidationMessages {
 }
 
 /**
- * Navigation enables users to move through an app to complete tasks.
- *
- * It is recommended to use vertical navigation when your application requires global navigation that is displayed on the left.
- * While vertical navigation menus generally consume more space than their horizontal counterparts, they have become more popular as desktop monitors move to wide-screen formats.
- *
- * Although both the hierarchically organized data and the visual style resemble a treeview-like structure, the [Treeview Design Pattern](https://w3c.github.io/aria-practices/#TreeView)
- * isn't necessarily the most appropriate.
- *
- * The tree role provides complex functionality that is not needed for typical site navigation, and changes the most common keyboard navigation using TAB.
- *
- * The [Disclosure Design Pattern](https://w3c.github.io/aria-practices/#disclosure) is more suited for typical site navigation, with expandable groups of links.
- * However it can be tedious to TAB through all navigation items to reach the actions panel.
- *
- * Both modes are available via the `mode` property and each app should choose the most appropriate.
+ * Use a vertical layout for global navigation on wide screens. treeview mode provides structured hierarchy but overrides standard keyboard navigation.
  */
 export declare const HvVerticalNavigation: ForwardRefExoticComponent<HvVerticalNavigationProps & RefAttributes<HTMLDivElement>>;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-core",
-  "version": "5.93.2",
+  "version": "5.95.0",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "Core React components for the NEXT Design System.",
@@ -32,9 +32,9 @@
   "dependencies": {
     "@emotion/cache": "^11.11.0",
     "@emotion/serialize": "^1.1.2",
-    "@hitachivantara/uikit-react-shared": "^5.4.2",
-    "@hitachivantara/uikit-react-utils": "^0.2.35",
-    "@hitachivantara/uikit-styles": "^5.46.2",
+    "@hitachivantara/uikit-react-shared": "^5.4.4",
+    "@hitachivantara/uikit-react-utils": "^0.2.37",
+    "@hitachivantara/uikit-styles": "^5.48.0",
     "@internationalized/date": "^3.2.0",
     "@mui/base": "5.0.0-beta.68",
     "@popperjs/core": "^2.11.8",
@@ -61,7 +61,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "9b7ed5b28906e4871b7f54b947e1a7a1d6f5f215",
+  "gitHead": "91e12a8552a39f5705248541621cd01331109179",
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",