@elliemae/ds-slider-v2 3.80.0-next.2 → 3.80.0-next.22

package/dist/cjs/config/useSliderV2.js

@@ -51,6 +51,8 @@ const useSliderV2 = (propsFromUser) => {
   (0, import_useValidateProps.useValidateProps)(propsWithDefault, import_react_desc_prop_types.DSSliderV2PropTypes, { tickMarkPositions });
   const ownerPropConfig = (0, import_ds_props_helpers.useOwnerProps)(propsWithDefault);
   const [hasUserInteractedAfterFocus, setHasUserInteractedAfterFocus] = import_react.default.useState(false);
+  const [isAnyThumbHovered, setIsAnyThumbHovered] = import_react.default.useState(false);
+  const [isAnyThumbFocused, setIsAnyThumbFocused] = import_react.default.useState(false);
   return import_react.default.useMemo(
     () => ({
       propsWithDefault,
@@ -60,6 +62,10 @@ const useSliderV2 = (propsFromUser) => {
       tickMarkPositions,
       hasUserInteractedAfterFocus,
       setHasUserInteractedAfterFocus,
+      isAnyThumbHovered,
+      setIsAnyThumbHovered,
+      isAnyThumbFocused,
+      setIsAnyThumbFocused,
       ...ownerPropConfig
     }),
     [
@@ -69,6 +75,8 @@ const useSliderV2 = (propsFromUser) => {
       rangeValues,
       tickMarkPositions,
       hasUserInteractedAfterFocus,
+      isAnyThumbHovered,
+      isAnyThumbFocused,
       ownerPropConfig
     ]
   );

package/dist/cjs/config/useSliderV2.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/config/useSliderV2.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport type { XstyledProps } from '@elliemae/ds-props-helpers';\nimport { useGetXstyledProps, useMemoMergePropsWithDefault, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport { type DSSliderV2T, DSSliderV2PropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\nimport { useTickMarksValues } from './useTickMarksValues.js';\n\nexport interface DSSliderV2CTX {\n  propsWithDefault: DSSliderV2T.InternalProps;\n  xstyledProps: XstyledProps;\n  instanceUid: string;\n  rangeValues: [number, number] | [number];\n  tickMarkPositions: number[];\n  getOwnerProps: () => DSSliderV2T.InternalProps;\n  getOwnerPropsArguments: () => Record<string, unknown>;\n  hasUserInteractedAfterFocus: boolean;\n  setHasUserInteractedAfterFocus: (value: boolean) => void;\n}\n\nexport const useSliderV2 = (propsFromUser: DSSliderV2T.Props) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSSliderV2T.InternalProps>(propsFromUser, defaultProps);\n\n  const { multiple, value } = propsWithDefault;\n\n  // =============================================================================\n  // XSTYLED PROPS\n  // =============================================================================\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  const instanceUid = React.useMemo(() => `slider-v2-${uid(5)}`, []);\n\n  const rangeValues = React.useMemo(() => {\n    if (multiple === true) return value;\n    return [value] as [number];\n  }, [multiple, value]);\n\n  // =============================================================================\n  // HELPERS HOOKS CONFIGS\n  // =============================================================================\n  const tickMarkPositions = useTickMarksValues(propsWithDefault);\n\n  // ===========================================================================\n  // VALIDATE PROPS\n  // ===========================================================================\n  useValidateProps(propsWithDefault, DSSliderV2PropTypes, { tickMarkPositions });\n\n  const ownerPropConfig = useOwnerProps(propsWithDefault);\n  const [hasUserInteractedAfterFocus, setHasUserInteractedAfterFocus] = React.useState(false);\n\n  return React.useMemo(\n    () => ({\n      propsWithDefault,\n      xstyledProps,\n      instanceUid,\n      rangeValues,\n      tickMarkPositions,\n      hasUserInteractedAfterFocus,\n      setHasUserInteractedAfterFocus,\n      ...ownerPropConfig,\n    }),\n    [\n      propsWithDefault,\n      xstyledProps,\n      instanceUid,\n      rangeValues,\n      tickMarkPositions,\n      hasUserInteractedAfterFocus,\n      ownerPropConfig,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAElB,8BAAgF;AAChF,iBAAoB;AACpB,mCAAoE;AACpE,8BAAiC;AACjC,gCAAmC;AAc5B,MAAM,cAAc,CAAC,kBAAqC;AAI/D,QAAM,uBAAmB,sDAAwD,eAAe,yCAAY;AAE5G,QAAM,EAAE,UAAU,MAAM,IAAI;AAK5B,QAAM,mBAAe,4CAAmB,gBAAgB;AAIxD,QAAM,cAAc,aAAAA,QAAM,QAAQ,MAAM,iBAAa,gBAAI,CAAC,CAAC,IAAI,CAAC,CAAC;AAEjE,QAAM,cAAc,aAAAA,QAAM,QAAQ,MAAM;AACtC,QAAI,aAAa,KAAM,QAAO;AAC9B,WAAO,CAAC,KAAK;AAAA,EACf,GAAG,CAAC,UAAU,KAAK,CAAC;AAKpB,QAAM,wBAAoB,8CAAmB,gBAAgB;AAK7D,gDAAiB,kBAAkB,kDAAqB,EAAE,kBAAkB,CAAC;AAE7E,QAAM,sBAAkB,uCAAc,gBAAgB;AACtD,QAAM,CAAC,6BAA6B,8BAA8B,IAAI,aAAAA,QAAM,SAAS,KAAK;AAE1F,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
+  "sourcesContent": ["import React from 'react';\nimport type { XstyledProps } from '@elliemae/ds-props-helpers';\nimport { useGetXstyledProps, useMemoMergePropsWithDefault, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport { type DSSliderV2T, DSSliderV2PropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\nimport { useTickMarksValues } from './useTickMarksValues.js';\n\nexport interface DSSliderV2CTX {\n  propsWithDefault: DSSliderV2T.InternalProps;\n  xstyledProps: XstyledProps;\n  instanceUid: string;\n  rangeValues: [number, number] | [number];\n  tickMarkPositions: number[];\n  getOwnerProps: () => DSSliderV2T.InternalProps;\n  getOwnerPropsArguments: () => Record<string, unknown>;\n  hasUserInteractedAfterFocus: boolean;\n  setHasUserInteractedAfterFocus: (value: boolean) => void;\n  // Spec v1.5.0 requires hover and focus on the handle to recolour the *active track segment* as\n  // well. The track paints itself with a `getTrackBackground()` gradient computed at render, so a\n  // CSS `:hover` on the thumb cannot reach it \u2014 the flags have to travel through this context for\n  // Track to recompute. One flag pair for the whole slider, not per thumb: in range mode both\n  // handles share a single active segment, so there is one surface to recolour.\n  isAnyThumbHovered: boolean;\n  setIsAnyThumbHovered: (value: boolean) => void;\n  isAnyThumbFocused: boolean;\n  setIsAnyThumbFocused: (value: boolean) => void;\n}\n\nexport const useSliderV2 = (propsFromUser: DSSliderV2T.Props) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSSliderV2T.InternalProps>(propsFromUser, defaultProps);\n\n  const { multiple, value } = propsWithDefault;\n\n  // =============================================================================\n  // XSTYLED PROPS\n  // =============================================================================\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  const instanceUid = React.useMemo(() => `slider-v2-${uid(5)}`, []);\n\n  const rangeValues = React.useMemo(() => {\n    if (multiple === true) return value;\n    return [value] as [number];\n  }, [multiple, value]);\n\n  // =============================================================================\n  // HELPERS HOOKS CONFIGS\n  // =============================================================================\n  const tickMarkPositions = useTickMarksValues(propsWithDefault);\n\n  // ===========================================================================\n  // VALIDATE PROPS\n  // ===========================================================================\n  useValidateProps(propsWithDefault, DSSliderV2PropTypes, { tickMarkPositions });\n\n  const ownerPropConfig = useOwnerProps(propsWithDefault);\n  const [hasUserInteractedAfterFocus, setHasUserInteractedAfterFocus] = React.useState(false);\n  const [isAnyThumbHovered, setIsAnyThumbHovered] = React.useState(false);\n  const [isAnyThumbFocused, setIsAnyThumbFocused] = React.useState(false);\n\n  return React.useMemo(\n    () => ({\n      propsWithDefault,\n      xstyledProps,\n      instanceUid,\n      rangeValues,\n      tickMarkPositions,\n      hasUserInteractedAfterFocus,\n      setHasUserInteractedAfterFocus,\n      isAnyThumbHovered,\n      setIsAnyThumbHovered,\n      isAnyThumbFocused,\n      setIsAnyThumbFocused,\n      ...ownerPropConfig,\n    }),\n    [\n      propsWithDefault,\n      xstyledProps,\n      instanceUid,\n      rangeValues,\n      tickMarkPositions,\n      hasUserInteractedAfterFocus,\n      isAnyThumbHovered,\n      isAnyThumbFocused,\n      ownerPropConfig,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAElB,8BAAgF;AAChF,iBAAoB;AACpB,mCAAoE;AACpE,8BAAiC;AACjC,gCAAmC;AAuB5B,MAAM,cAAc,CAAC,kBAAqC;AAI/D,QAAM,uBAAmB,sDAAwD,eAAe,yCAAY;AAE5G,QAAM,EAAE,UAAU,MAAM,IAAI;AAK5B,QAAM,mBAAe,4CAAmB,gBAAgB;AAIxD,QAAM,cAAc,aAAAA,QAAM,QAAQ,MAAM,iBAAa,gBAAI,CAAC,CAAC,IAAI,CAAC,CAAC;AAEjE,QAAM,cAAc,aAAAA,QAAM,QAAQ,MAAM;AACtC,QAAI,aAAa,KAAM,QAAO;AAC9B,WAAO,CAAC,KAAK;AAAA,EACf,GAAG,CAAC,UAAU,KAAK,CAAC;AAKpB,QAAM,wBAAoB,8CAAmB,gBAAgB;AAK7D,gDAAiB,kBAAkB,kDAAqB,EAAE,kBAAkB,CAAC;AAE7E,QAAM,sBAAkB,uCAAc,gBAAgB;AACtD,QAAM,CAAC,6BAA6B,8BAA8B,IAAI,aAAAA,QAAM,SAAS,KAAK;AAC1F,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,aAAAA,QAAM,SAAS,KAAK;AACtE,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,aAAAA,QAAM,SAAS,KAAK;AAEtE,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
   "names": ["React"]
 }

package/dist/cjs/parts/Thumb.js

@@ -49,14 +49,16 @@ const conformedThumbLabel = (config) => {
   }
   return msg;
 };
-const spanStyle = { height: 20, width: 20 };
+const spanStyle = { height: 20, width: 12 };
 const Thumb = ({ index, props: reactRangeOpinionatedProps, isDragged }) => {
   const {
-    propsWithDefault: { disabled, applyAriaDisabled, readOnly, customTickMarksValues, step, minValue },
+    propsWithDefault: { disabled, applyAriaDisabled, readOnly, hasError, customTickMarksValues, step, minValue },
     rangeValues,
     getOwnerProps,
     hasUserInteractedAfterFocus,
-    setHasUserInteractedAfterFocus
+    setHasUserInteractedAfterFocus,
+    setIsAnyThumbHovered,
+    setIsAnyThumbFocused
   } = (0, import_react.useContext)(import_DSSliderV2CTX.default);
   const [isHovered, setIsHovered] = (0, import_react.useState)(false);
   const [isFocused, setIsFocused] = (0, import_react.useState)(false);
@@ -87,10 +89,12 @@ const Thumb = ({ index, props: reactRangeOpinionatedProps, isDragged }) => {
     setIsHovered(true);
     setIsFocused(false);
     setIsTooltipDismissed(false);
-  }, []);
+    setIsAnyThumbHovered(true);
+  }, [setIsAnyThumbHovered]);
   const handleMouseLeave = (0, import_react.useCallback)(() => {
     setIsHovered(false);
-  }, []);
+    setIsAnyThumbHovered(false);
+  }, [setIsAnyThumbHovered]);
   const handleKeyDown = (0, import_react.useCallback)(
     (e) => {
       reactRangeOnKeyDownHandler?.(e);
@@ -113,11 +117,13 @@ const Thumb = ({ index, props: reactRangeOpinionatedProps, isDragged }) => {
   const handleFocus = (0, import_react.useCallback)(() => {
     setIsFocused(true);
     setIsTooltipDismissed(false);
-  }, []);
+    setIsAnyThumbFocused(true);
+  }, [setIsAnyThumbFocused]);
   const handleBlur = (0, import_react.useCallback)(() => {
     setIsFocused(false);
     setHasUserInteractedAfterFocus(false);
-  }, [setHasUserInteractedAfterFocus]);
+    setIsAnyThumbFocused(false);
+  }, [setHasUserInteractedAfterFocus, setIsAnyThumbFocused]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_styles.StyledThumb,
     {
@@ -127,6 +133,7 @@ const Thumb = ({ index, props: reactRangeOpinionatedProps, isDragged }) => {
       disabled,
       $applyAriaDisabled: applyAriaDisabled,
       $readOnly: readOnly,
+      $hasError: hasError,
       "aria-disabled": applyAriaDisabled || readOnly,
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,

package/dist/cjs/parts/Thumb.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/Thumb.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { DSTooltipV3 } from '@elliemae/ds-tooltip-v3';\nimport { useCallback, useContext, useMemo, useState } from 'react';\nimport type { IRenderThumbParams } from 'react-range/lib/types.js';\nimport DSSliderV2Context from '../DSSliderV2CTX.js';\nimport { StyledThumb } from './styles.js';\n\nexport const conformedThumbLabel = (config: {\n  rangeValues: [number] | [number, number];\n  customTickMarksValues: string[];\n  index: number;\n  step: number;\n  minValue: number;\n}) => {\n  const { rangeValues, customTickMarksValues, index, step, minValue } = config;\n  let msg = `Value: `;\n  if (customTickMarksValues.length) {\n    const foundValue = customTickMarksValues[Math.floor((rangeValues[index] - minValue) / step)];\n    msg += `${foundValue ?? rangeValues[index].toFixed(1)}`;\n  } else {\n    msg += `${rangeValues[index].toFixed(1)}`;\n  }\n\n  return msg;\n};\n\nconst spanStyle = { height: 20, width: 20 };\n\nexport const Thumb = ({ index, props: reactRangeOpinionatedProps, isDragged }: Omit<IRenderThumbParams, 'key'>) => {\n  const {\n    propsWithDefault: { disabled, applyAriaDisabled, readOnly, customTickMarksValues, step, minValue },\n    rangeValues,\n    getOwnerProps,\n    hasUserInteractedAfterFocus,\n    setHasUserInteractedAfterFocus,\n  } = useContext(DSSliderV2Context);\n\n  const [isHovered, setIsHovered] = useState(false);\n  const [isFocused, setIsFocused] = useState(false);\n  const [isTooltipDismissed, setIsTooltipDismissed] = useState(false);\n\n  const {\n    ref,\n    style: thumbStyle,\n    key: unusedKeyDueToLibTypescriptIssues,\n    onKeyDown: reactRangeOnKeyDownHandler,\n    onKeyUp: reactRangeOnKeyUpHandler,\n    ...propsFromReactRangeTookAsIs\n  } = reactRangeOpinionatedProps;\n  const showPopover = (isDragged || isHovered || isFocused) && !isTooltipDismissed;\n\n  const label = conformedThumbLabel({ rangeValues, customTickMarksValues, index, step, minValue });\n\n  const getOwnerPropsArguments = useCallback(\n    () => ({\n      index,\n      shouldUseExtendedAriaValueText: !hasUserInteractedAfterFocus,\n    }),\n    [index, hasUserInteractedAfterFocus],\n  );\n\n  const sanitizedStyle = useMemo(() => {\n    // as per https://jira.elliemae.io/browse/PUI-14390 and https://github.com/intcx/PLATFORM-UI.dimsum/pull/7046\n    //   we also want  z-index: ${(props) => props.theme.zIndex.tooltip}; from the theme\n    // I keep the same, just refactoring so the styles concerns are part of the styled component as expected\n    //   my understanding is that libInherithedStyles main purposes are:\n    //   - to position the element on the track with a transform: translate\n    //   - to handle the cursor:grab/grabbing based on interaction state\n    const { zIndex, ...libInherithedStyles } = thumbStyle;\n    // we want to keep the cursor grab/grabbing thing, but we want our own \"disabled\" cursor...\n    if (disabled || applyAriaDisabled || readOnly) return { ...libInherithedStyles, cursor: 'not-allowed' };\n    return libInherithedStyles;\n  }, [applyAriaDisabled, disabled, readOnly, thumbStyle]);\n\n  const handleMouseEnter = useCallback<React.MouseEventHandler<HTMLDivElement>>(() => {\n    setIsHovered(true);\n    setIsFocused(false);\n    setIsTooltipDismissed(false);\n  }, []);\n  const handleMouseLeave = useCallback<React.MouseEventHandler<HTMLDivElement>>(() => {\n    setIsHovered(false);\n  }, []);\n\n  const handleKeyDown = useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n    (e) => {\n      reactRangeOnKeyDownHandler?.(e);\n      if (e.key === 'Escape' && showPopover) {\n        // stoping propagation here is load-bearing\n        // we are checking \"showPopover\" because if \"the popover exist\" it means the tooltip exist\n        // if it exist and we are in a dialog, the first esc needs to close the tooltip, not the dialog.\n        e.stopPropagation();\n        setIsTooltipDismissed(true);\n        setIsFocused(true);\n      } else {\n        setIsTooltipDismissed(false);\n      }\n    },\n    [showPopover, reactRangeOnKeyDownHandler],\n  );\n  const handleKeyUp = useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n    (e) => {\n      reactRangeOnKeyUpHandler?.(e);\n      // if we need to do anything on keyup too, this is where we will do it.\n    },\n    [reactRangeOnKeyUpHandler],\n  );\n  const handleFocus = useCallback<React.FocusEventHandler<HTMLDivElement>>(() => {\n    setIsFocused(true);\n    setIsTooltipDismissed(false);\n  }, []);\n  const handleBlur = useCallback<React.FocusEventHandler<HTMLDivElement>>(() => {\n    setIsFocused(false);\n    setHasUserInteractedAfterFocus(false);\n  }, [setHasUserInteractedAfterFocus]);\n\n  return (\n    <StyledThumb\n      {...propsFromReactRangeTookAsIs}\n      style={sanitizedStyle}\n      innerRef={ref}\n      disabled={disabled}\n      $applyAriaDisabled={applyAriaDisabled}\n      $readOnly={readOnly}\n      // dicussed with SME on 13/jul/2026, even if role='slider' technically accepts aria-readonly\n      // - SRs support for aria-readonly is loose\n      // - having both aria-readonly and aria-disabled is a violation\n      // - aria-disabled transmit the same interaction pattern\n      // therefore, we will not set aria-readonly and will rely on aria-disabled to convey the interaction pattern\n      // aria-readonly={readOnly}\n      aria-disabled={applyAriaDisabled || readOnly} // || readOnly as per previous comment\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      onKeyDown={handleKeyDown}\n      onKeyUp={handleKeyUp}\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <DSTooltipV3 key={label} text={label} showPopover={showPopover} withoutAnimation>\n        <span style={spanStyle}></span>\n      </DSTooltipV3>\n    </StyledThumb>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { DSTooltipV3 } from '@elliemae/ds-tooltip-v3';\nimport { useCallback, useContext, useMemo, useState } from 'react';\nimport type { IRenderThumbParams } from 'react-range/lib/types.js';\nimport DSSliderV2Context from '../DSSliderV2CTX.js';\nimport { StyledThumb } from './styles.js';\n\nexport const conformedThumbLabel = (config: {\n  rangeValues: [number] | [number, number];\n  customTickMarksValues: string[];\n  index: number;\n  step: number;\n  minValue: number;\n}) => {\n  const { rangeValues, customTickMarksValues, index, step, minValue } = config;\n  let msg = `Value: `;\n  if (customTickMarksValues.length) {\n    const foundValue = customTickMarksValues[Math.floor((rangeValues[index] - minValue) / step)];\n    msg += `${foundValue ?? rangeValues[index].toFixed(1)}`;\n  } else {\n    msg += `${rangeValues[index].toFixed(1)}`;\n  }\n\n  return msg;\n};\n\n// Matches the handle box from Spec v1.5.0 \u2014 this span is the tooltip's anchor and has to cover the\n// handle, not exceed it.\nconst spanStyle = { height: 20, width: 12 };\n\nexport const Thumb = ({ index, props: reactRangeOpinionatedProps, isDragged }: Omit<IRenderThumbParams, 'key'>) => {\n  const {\n    propsWithDefault: { disabled, applyAriaDisabled, readOnly, hasError, customTickMarksValues, step, minValue },\n    rangeValues,\n    getOwnerProps,\n    hasUserInteractedAfterFocus,\n    setHasUserInteractedAfterFocus,\n    setIsAnyThumbHovered,\n    setIsAnyThumbFocused,\n  } = useContext(DSSliderV2Context);\n\n  // Local state drives the tooltip, which is per handle. The context setters below mirror the same\n  // transitions for the track, which is shared between handles in range mode.\n  const [isHovered, setIsHovered] = useState(false);\n  const [isFocused, setIsFocused] = useState(false);\n  const [isTooltipDismissed, setIsTooltipDismissed] = useState(false);\n\n  const {\n    ref,\n    style: thumbStyle,\n    key: unusedKeyDueToLibTypescriptIssues,\n    onKeyDown: reactRangeOnKeyDownHandler,\n    onKeyUp: reactRangeOnKeyUpHandler,\n    ...propsFromReactRangeTookAsIs\n  } = reactRangeOpinionatedProps;\n  const showPopover = (isDragged || isHovered || isFocused) && !isTooltipDismissed;\n\n  const label = conformedThumbLabel({ rangeValues, customTickMarksValues, index, step, minValue });\n\n  const getOwnerPropsArguments = useCallback(\n    () => ({\n      index,\n      shouldUseExtendedAriaValueText: !hasUserInteractedAfterFocus,\n    }),\n    [index, hasUserInteractedAfterFocus],\n  );\n\n  const sanitizedStyle = useMemo(() => {\n    // as per https://jira.elliemae.io/browse/PUI-14390 and https://github.com/intcx/PLATFORM-UI.dimsum/pull/7046\n    //   we also want  z-index: ${(props) => props.theme.zIndex.tooltip}; from the theme\n    // I keep the same, just refactoring so the styles concerns are part of the styled component as expected\n    //   my understanding is that libInherithedStyles main purposes are:\n    //   - to position the element on the track with a transform: translate\n    //   - to handle the cursor:grab/grabbing based on interaction state\n    const { zIndex, ...libInherithedStyles } = thumbStyle;\n    // we want to keep the cursor grab/grabbing thing, but we want our own \"disabled\" cursor...\n    if (disabled || applyAriaDisabled || readOnly) return { ...libInherithedStyles, cursor: 'not-allowed' };\n    return libInherithedStyles;\n  }, [applyAriaDisabled, disabled, readOnly, thumbStyle]);\n\n  const handleMouseEnter = useCallback<React.MouseEventHandler<HTMLDivElement>>(() => {\n    setIsHovered(true);\n    setIsFocused(false);\n    setIsTooltipDismissed(false);\n    setIsAnyThumbHovered(true);\n  }, [setIsAnyThumbHovered]);\n  const handleMouseLeave = useCallback<React.MouseEventHandler<HTMLDivElement>>(() => {\n    setIsHovered(false);\n    setIsAnyThumbHovered(false);\n  }, [setIsAnyThumbHovered]);\n\n  const handleKeyDown = useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n    (e) => {\n      reactRangeOnKeyDownHandler?.(e);\n      if (e.key === 'Escape' && showPopover) {\n        // stoping propagation here is load-bearing\n        // we are checking \"showPopover\" because if \"the popover exist\" it means the tooltip exist\n        // if it exist and we are in a dialog, the first esc needs to close the tooltip, not the dialog.\n        e.stopPropagation();\n        setIsTooltipDismissed(true);\n        setIsFocused(true);\n      } else {\n        setIsTooltipDismissed(false);\n      }\n    },\n    [showPopover, reactRangeOnKeyDownHandler],\n  );\n  const handleKeyUp = useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n    (e) => {\n      reactRangeOnKeyUpHandler?.(e);\n      // if we need to do anything on keyup too, this is where we will do it.\n    },\n    [reactRangeOnKeyUpHandler],\n  );\n  const handleFocus = useCallback<React.FocusEventHandler<HTMLDivElement>>(() => {\n    setIsFocused(true);\n    setIsTooltipDismissed(false);\n    setIsAnyThumbFocused(true);\n  }, [setIsAnyThumbFocused]);\n  const handleBlur = useCallback<React.FocusEventHandler<HTMLDivElement>>(() => {\n    setIsFocused(false);\n    setHasUserInteractedAfterFocus(false);\n    setIsAnyThumbFocused(false);\n  }, [setHasUserInteractedAfterFocus, setIsAnyThumbFocused]);\n\n  return (\n    <StyledThumb\n      {...propsFromReactRangeTookAsIs}\n      style={sanitizedStyle}\n      innerRef={ref}\n      disabled={disabled}\n      $applyAriaDisabled={applyAriaDisabled}\n      $readOnly={readOnly}\n      $hasError={hasError}\n      // dicussed with SME on 13/jul/2026, even if role='slider' technically accepts aria-readonly\n      // - SRs support for aria-readonly is loose\n      // - having both aria-readonly and aria-disabled is a violation\n      // - aria-disabled transmit the same interaction pattern\n      // therefore, we will not set aria-readonly and will rely on aria-disabled to convey the interaction pattern\n      // aria-readonly={readOnly}\n      aria-disabled={applyAriaDisabled || readOnly} // || readOnly as per previous comment\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      onKeyDown={handleKeyDown}\n      onKeyUp={handleKeyUp}\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <DSTooltipV3 key={label} text={label} showPopover={showPopover} withoutAnimation>\n        <span style={spanStyle}></span>\n      </DSTooltipV3>\n    </StyledThumb>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": ["DSSliderV2Context"]
 }

package/dist/cjs/parts/TickMarksValues.js

@@ -34,6 +34,7 @@ module.exports = __toCommonJS(TickMarksValues_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
+var import_ds_typography = require("@elliemae/ds-typography");
 var import_DSSliderV2CTX = __toESM(require("../DSSliderV2CTX.js"));
 var import_inRange = require("../utils/inRange.js");
 var import_styles = require("./styles.js");
@@ -63,6 +64,8 @@ const TickMarksValues = () => {
         return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_styles.StyledTickMarkValue,
           {
+            component: "div",
+            variant: import_ds_typography.TYPOGRAPHY_VARIANTS.B2,
             isSelected,
             getOwnerProps,
             getOwnerPropsArguments,

package/dist/cjs/parts/TickMarksValues.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/TickMarksValues.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { useContext, useMemo } from 'react';\nimport DSSliderV2Context from '../DSSliderV2CTX.js';\nimport { inRange } from '../utils/inRange.js';\nimport { StyledTickMarkValue, StyledTickMarksContainer } from './styles.js';\n\nexport const TickMarksValues = () => {\n  const {\n    propsWithDefault: { customTickMarksValues, maxValue, minValue },\n    rangeValues,\n    tickMarkPositions,\n    instanceUid,\n    getOwnerProps,\n    getOwnerPropsArguments,\n  } = useContext(DSSliderV2Context);\n\n  const { columnWidth } = useMemo(() => {\n    const distanceBetweenDots = (maxValue - minValue) / (tickMarkPositions.length - 1);\n    const calculatedColumnWidthPercentage = `${(distanceBetweenDots / (maxValue - minValue)) * 100}%`;\n    return { columnWidth: calculatedColumnWidthPercentage };\n  }, [maxValue, minValue, tickMarkPositions.length]);\n\n  return (\n    <StyledTickMarksContainer\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n      columnCount={tickMarkPositions.length}\n      columnWidth={columnWidth}\n    >\n      {tickMarkPositions.map((value, index) => {\n        const isSelected = inRange(value, rangeValues);\n\n        return (\n          <StyledTickMarkValue\n            key={`${instanceUid}-${value}`}\n            isSelected={isSelected}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          >\n            {customTickMarksValues[index] ?? value}\n          </StyledTickMarkValue>\n        );\n      })}\n    </StyledTickMarksContainer>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgCb;AAhCV,mBAAoC;AACpC,2BAA8B;AAC9B,qBAAwB;AACxB,oBAA8D;AAEvD,MAAM,kBAAkB,MAAM;AACnC,QAAM;AAAA,IACJ,kBAAkB,EAAE,uBAAuB,UAAU,SAAS;AAAA,IAC9D;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,qBAAAA,OAAiB;AAEhC,QAAM,EAAE,YAAY,QAAI,sBAAQ,MAAM;AACpC,UAAM,uBAAuB,WAAW,aAAa,kBAAkB,SAAS;AAChF,UAAM,kCAAkC,GAAI,uBAAuB,WAAW,YAAa,GAAG;AAC9F,WAAO,EAAE,aAAa,gCAAgC;AAAA,EACxD,GAAG,CAAC,UAAU,UAAU,kBAAkB,MAAM,CAAC;AAEjD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,aAAa,kBAAkB;AAAA,MAC/B;AAAA,MAEC,4BAAkB,IAAI,CAAC,OAAO,UAAU;AACvC,cAAM,iBAAa,wBAAQ,OAAO,WAAW;AAE7C,eACE;AAAA,UAAC;AAAA;AAAA,YAEC;AAAA,YACA;AAAA,YACA;AAAA,YAEC,gCAAsB,KAAK,KAAK;AAAA;AAAA,UAL5B,GAAG,WAAW,IAAI,KAAK;AAAA,QAM9B;AAAA,MAEJ,CAAC;AAAA;AAAA,EACH;AAEJ;",
+  "sourcesContent": ["import { useContext, useMemo } from 'react';\nimport { TYPOGRAPHY_VARIANTS } from '@elliemae/ds-typography';\nimport DSSliderV2Context from '../DSSliderV2CTX.js';\nimport { inRange } from '../utils/inRange.js';\nimport { StyledTickMarkValue, StyledTickMarksContainer } from './styles.js';\n\nexport const TickMarksValues = () => {\n  const {\n    propsWithDefault: { customTickMarksValues, maxValue, minValue },\n    rangeValues,\n    tickMarkPositions,\n    instanceUid,\n    getOwnerProps,\n    getOwnerPropsArguments,\n  } = useContext(DSSliderV2Context);\n\n  const { columnWidth } = useMemo(() => {\n    const distanceBetweenDots = (maxValue - minValue) / (tickMarkPositions.length - 1);\n    const calculatedColumnWidthPercentage = `${(distanceBetweenDots / (maxValue - minValue)) * 100}%`;\n    return { columnWidth: calculatedColumnWidthPercentage };\n  }, [maxValue, minValue, tickMarkPositions.length]);\n\n  return (\n    <StyledTickMarksContainer\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n      columnCount={tickMarkPositions.length}\n      columnWidth={columnWidth}\n    >\n      {tickMarkPositions.map((value, index) => {\n        const isSelected = inRange(value, rangeValues);\n\n        return (\n          <StyledTickMarkValue\n            key={`${instanceUid}-${value}`}\n            // Keeps the element this slot has always rendered. `VariantToAsMap` maps every `b*`\n            // variant to `p`, so adopting `b2` would silently turn the step value into a paragraph\n            // \u2014 a change nobody asked for, with paragraph margins and the wrong semantics for a\n            // number. Spec v1.5.0 says nothing about HTML elements, so the existing one stands.\n            component=\"div\"\n            variant={TYPOGRAPHY_VARIANTS.B2}\n            isSelected={isSelected}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          >\n            {customTickMarksValues[index] ?? value}\n          </StyledTickMarkValue>\n        );\n      })}\n    </StyledTickMarksContainer>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiCb;AAjCV,mBAAoC;AACpC,2BAAoC;AACpC,2BAA8B;AAC9B,qBAAwB;AACxB,oBAA8D;AAEvD,MAAM,kBAAkB,MAAM;AACnC,QAAM;AAAA,IACJ,kBAAkB,EAAE,uBAAuB,UAAU,SAAS;AAAA,IAC9D;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,qBAAAA,OAAiB;AAEhC,QAAM,EAAE,YAAY,QAAI,sBAAQ,MAAM;AACpC,UAAM,uBAAuB,WAAW,aAAa,kBAAkB,SAAS;AAChF,UAAM,kCAAkC,GAAI,uBAAuB,WAAW,YAAa,GAAG;AAC9F,WAAO,EAAE,aAAa,gCAAgC;AAAA,EACxD,GAAG,CAAC,UAAU,UAAU,kBAAkB,MAAM,CAAC;AAEjD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,aAAa,kBAAkB;AAAA,MAC/B;AAAA,MAEC,4BAAkB,IAAI,CAAC,OAAO,UAAU;AACvC,cAAM,iBAAa,wBAAQ,OAAO,WAAW;AAE7C,eACE;AAAA,UAAC;AAAA;AAAA,YAMC,WAAU;AAAA,YACV,SAAS,yCAAoB;AAAA,YAC7B;AAAA,YACA;AAAA,YACA;AAAA,YAEC,gCAAsB,KAAK,KAAK;AAAA;AAAA,UAX5B,GAAG,WAAW,IAAI,KAAK;AAAA,QAY9B;AAAA,MAEJ,CAAC;AAAA;AAAA,EACH;AAEJ;",
   "names": ["DSSliderV2Context"]
 }

package/dist/cjs/parts/Track.js

@@ -40,10 +40,21 @@ var import_TickMarksValues = require("./TickMarksValues.js");
 var import_styles = require("./styles.js");
 const Track = ({ children, props: reactRangeOpinionatedProps, disabled }) => {
   const {
-    propsWithDefault: { minValue, maxValue, applyAriaDisabled, readOnly, withTickMarksValues, withTickMarks, multiple },
+    propsWithDefault: {
+      minValue,
+      maxValue,
+      applyAriaDisabled,
+      readOnly,
+      hasError,
+      withTickMarksValues,
+      withTickMarks,
+      multiple
+    },
     rangeValues,
     getOwnerProps,
-    getOwnerPropsArguments
+    getOwnerPropsArguments,
+    isAnyThumbHovered,
+    isAnyThumbFocused
   } = (0, import_react.useContext)(import_DSSliderV2CTX.default);
   const { ref, style: trackStyle, ...propsFromReactRangeTookAsIsForTheTrack } = reactRangeOpinionatedProps;
   const sanitizedStyle = (0, import_react.useMemo)(() => {
@@ -60,6 +71,9 @@ const Track = ({ children, props: reactRangeOpinionatedProps, disabled }) => {
         disabled,
         $readOnly: readOnly,
         $applyAriaDisabled: applyAriaDisabled,
+        $hasError: hasError,
+        $isAnyThumbHovered: isAnyThumbHovered,
+        $isAnyThumbFocused: isAnyThumbFocused,
         minValue,
         maxValue,
         rangeValues,
@@ -68,7 +82,7 @@ const Track = ({ children, props: reactRangeOpinionatedProps, disabled }) => {
         getOwnerPropsArguments,
         children: [
           children,
-          withTickMarks && (!disabled || !applyAriaDisabled) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TickMarks.TickMarks, {})
+          withTickMarks && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TickMarks.TickMarks, {})
         ]
       }
     ),

package/dist/cjs/parts/Track.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/Track.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { useContext, useMemo } from 'react';\nimport type { IRenderTrackParams } from 'react-range/lib/types.js';\nimport DSSliderV2Context from '../DSSliderV2CTX.js';\nimport { TickMarks } from './TickMarks.js';\nimport { TickMarksValues } from './TickMarksValues.js';\nimport { StyledTrack } from './styles.js';\n\nexport const Track = ({ children, props: reactRangeOpinionatedProps, disabled }: IRenderTrackParams) => {\n  const {\n    propsWithDefault: { minValue, maxValue, applyAriaDisabled, readOnly, withTickMarksValues, withTickMarks, multiple },\n    rangeValues,\n    getOwnerProps,\n    getOwnerPropsArguments,\n  } = useContext(DSSliderV2Context);\n\n  const { ref, style: trackStyle, ...propsFromReactRangeTookAsIsForTheTrack } = reactRangeOpinionatedProps;\n\n  const sanitizedStyle = useMemo(() => {\n    // we want to keep the cursor but when disabled, we want it to show as 'not-allowed'\n    if (disabled || applyAriaDisabled || readOnly) return { ...trackStyle, cursor: 'not-allowed' };\n    return trackStyle;\n  }, [applyAriaDisabled, disabled, readOnly, trackStyle]);\n\n  return (\n    <>\n      <StyledTrack\n        style={sanitizedStyle}\n        {...propsFromReactRangeTookAsIsForTheTrack} // This is needed because it's received from the library\n        innerRef={ref}\n        disabled={disabled}\n        $readOnly={readOnly}\n        $applyAriaDisabled={applyAriaDisabled}\n        minValue={minValue}\n        maxValue={maxValue}\n        rangeValues={rangeValues}\n        multiple={multiple}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        {children}\n        {withTickMarks && (!disabled || !applyAriaDisabled) && <TickMarks />}\n      </StyledTrack>\n      {withTickMarksValues && <TickMarksValues />}\n    </>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwBnB;AAxBJ,mBAAoC;AAEpC,2BAA8B;AAC9B,uBAA0B;AAC1B,6BAAgC;AAChC,oBAA4B;AAErB,MAAM,QAAQ,CAAC,EAAE,UAAU,OAAO,4BAA4B,SAAS,MAA0B;AACtG,QAAM;AAAA,IACJ,kBAAkB,EAAE,UAAU,UAAU,mBAAmB,UAAU,qBAAqB,eAAe,SAAS;AAAA,IAClH;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,qBAAAA,OAAiB;AAEhC,QAAM,EAAE,KAAK,OAAO,YAAY,GAAG,uCAAuC,IAAI;AAE9E,QAAM,qBAAiB,sBAAQ,MAAM;AAEnC,QAAI,YAAY,qBAAqB,SAAU,QAAO,EAAE,GAAG,YAAY,QAAQ,cAAc;AAC7F,WAAO;AAAA,EACT,GAAG,CAAC,mBAAmB,UAAU,UAAU,UAAU,CAAC;AAEtD,SACE,4EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACN,GAAG;AAAA,QACJ,UAAU;AAAA,QACV;AAAA,QACA,WAAW;AAAA,QACX,oBAAoB;AAAA,QACpB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QAEC;AAAA;AAAA,UACA,kBAAkB,CAAC,YAAY,CAAC,sBAAsB,4CAAC,8BAAU;AAAA;AAAA;AAAA,IACpE;AAAA,IACC,uBAAuB,4CAAC,0CAAgB;AAAA,KAC3C;AAEJ;",
+  "sourcesContent": ["import { useContext, useMemo } from 'react';\nimport type { IRenderTrackParams } from 'react-range/lib/types.js';\nimport DSSliderV2Context from '../DSSliderV2CTX.js';\nimport { TickMarks } from './TickMarks.js';\nimport { TickMarksValues } from './TickMarksValues.js';\nimport { StyledTrack } from './styles.js';\n\nexport const Track = ({ children, props: reactRangeOpinionatedProps, disabled }: IRenderTrackParams) => {\n  const {\n    propsWithDefault: {\n      minValue,\n      maxValue,\n      applyAriaDisabled,\n      readOnly,\n      hasError,\n      withTickMarksValues,\n      withTickMarks,\n      multiple,\n    },\n    rangeValues,\n    getOwnerProps,\n    getOwnerPropsArguments,\n    isAnyThumbHovered,\n    isAnyThumbFocused,\n  } = useContext(DSSliderV2Context);\n\n  const { ref, style: trackStyle, ...propsFromReactRangeTookAsIsForTheTrack } = reactRangeOpinionatedProps;\n\n  const sanitizedStyle = useMemo(() => {\n    // we want to keep the cursor but when disabled, we want it to show as 'not-allowed'\n    if (disabled || applyAriaDisabled || readOnly) return { ...trackStyle, cursor: 'not-allowed' };\n    return trackStyle;\n  }, [applyAriaDisabled, disabled, readOnly, trackStyle]);\n\n  return (\n    <>\n      <StyledTrack\n        style={sanitizedStyle}\n        {...propsFromReactRangeTookAsIsForTheTrack} // This is needed because it's received from the library\n        innerRef={ref}\n        disabled={disabled}\n        $readOnly={readOnly}\n        $applyAriaDisabled={applyAriaDisabled}\n        $hasError={hasError}\n        $isAnyThumbHovered={isAnyThumbHovered}\n        $isAnyThumbFocused={isAnyThumbFocused}\n        minValue={minValue}\n        maxValue={maxValue}\n        rangeValues={rangeValues}\n        multiple={multiple}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        {children}\n        {/*\n         * Step marks are not gated on any interaction state. Spec v1.5.0's Design Notes require them\n         * to stay visible across both track segments and every interactive state, and neither the\n         * Disabled nor the Aria-Disabled row hides them. A previous `(!disabled || !applyAriaDisabled)`\n         * guard sat here; it only evaluated false when both flags were true at once, so it never hid\n         * anything \u2014 and \"fixing\" it to `&&` would have introduced a spec violation.\n         */}\n        {withTickMarks && <TickMarks />}\n      </StyledTrack>\n      {withTickMarksValues && <TickMarksValues />}\n    </>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmCnB;AAnCJ,mBAAoC;AAEpC,2BAA8B;AAC9B,uBAA0B;AAC1B,6BAAgC;AAChC,oBAA4B;AAErB,MAAM,QAAQ,CAAC,EAAE,UAAU,OAAO,4BAA4B,SAAS,MAA0B;AACtG,QAAM;AAAA,IACJ,kBAAkB;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,qBAAAA,OAAiB;AAEhC,QAAM,EAAE,KAAK,OAAO,YAAY,GAAG,uCAAuC,IAAI;AAE9E,QAAM,qBAAiB,sBAAQ,MAAM;AAEnC,QAAI,YAAY,qBAAqB,SAAU,QAAO,EAAE,GAAG,YAAY,QAAQ,cAAc;AAC7F,WAAO;AAAA,EACT,GAAG,CAAC,mBAAmB,UAAU,UAAU,UAAU,CAAC;AAEtD,SACE,4EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACN,GAAG;AAAA,QACJ,UAAU;AAAA,QACV;AAAA,QACA,WAAW;AAAA,QACX,oBAAoB;AAAA,QACpB,WAAW;AAAA,QACX,oBAAoB;AAAA,QACpB,oBAAoB;AAAA,QACpB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QAEC;AAAA;AAAA,UAQA,iBAAiB,4CAAC,8BAAU;AAAA;AAAA;AAAA,IAC/B;AAAA,IACC,uBAAuB,4CAAC,0CAAgB;AAAA,KAC3C;AAEJ;",
   "names": ["DSSliderV2Context"]
 }

package/dist/cjs/parts/styles.js

@@ -41,18 +41,38 @@ module.exports = __toCommonJS(styles_exports);
 var React = __toESM(require("react"));
 var import_ds_grid = require("@elliemae/ds-grid");
 var import_ds_system = require("@elliemae/ds-system");
+var import_ds_typography = require("@elliemae/ds-typography");
 var import_react_range = require("react-range");
 var import_constants = require("../constants/index.js");
 const StyledWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_constants.DSSliderV2Name, slot: import_constants.SLIDER_V2_SLOTS.ROOT })``;
 const StyledRangeWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_constants.DSSliderV2Name, slot: import_constants.SLIDER_V2_SLOTS.RANGE_WRAPPER })``;
+const SPEC_ERROR_ACTIVE = 900;
+const SPEC_ERROR_INACTIVE = 200;
 const TrackStates = import_ds_system.css`
-  ${({ theme, disabled, $applyAriaDisabled, $readOnly, rangeValues, multiple, minValue, maxValue }) => {
-  if (disabled) return `background: ${theme.colors.neutral[400]};`;
-  let trackColorSelected = theme.colors.brand[600];
-  const trackColorUnselected = theme.colors.neutral[400];
-  if ($applyAriaDisabled || $readOnly) trackColorSelected = theme.colors.neutral[700];
-  const reactRangeColors = multiple ? [trackColorUnselected, trackColorSelected, trackColorUnselected] : [trackColorSelected, trackColorUnselected];
-  if ($applyAriaDisabled || $readOnly) trackColorSelected = theme.colors.neutral[700];
+  ${({
+  theme,
+  disabled,
+  $applyAriaDisabled,
+  $readOnly,
+  $hasError,
+  $isAnyThumbHovered,
+  $isAnyThumbFocused,
+  rangeValues,
+  multiple,
+  minValue,
+  maxValue
+}) => {
+  const { neutral, brand, danger } = theme.colors;
+  const pickColors = () => {
+    if (disabled) return { active: neutral[400], inactive: neutral[300] };
+    if ($applyAriaDisabled || $readOnly) return { active: neutral[500], inactive: neutral[300] };
+    if ($hasError) return { active: danger[SPEC_ERROR_ACTIVE], inactive: danger[SPEC_ERROR_INACTIVE] };
+    if ($isAnyThumbFocused) return { active: brand[800], inactive: neutral[400] };
+    if ($isAnyThumbHovered) return { active: brand[700], inactive: neutral[400] };
+    return { active: brand[600], inactive: neutral[400] };
+  };
+  const { active, inactive } = pickColors();
+  const reactRangeColors = multiple ? [inactive, active, inactive] : [active, inactive];
   return `background: ${(0, import_react_range.getTrackBackground)({
     values: rangeValues,
     colors: reactRangeColors,
@@ -77,7 +97,7 @@ const StyledDot = (0, import_ds_system.styled)("div", { name: import_constants.D
     display: block;
     position: relative;
     width: 2px;
-    height: 2px;
+    height: 4px;
   }
 `;
 const StyledDotsContainer = (0, import_ds_system.styled)("div", { name: import_constants.DSSliderV2Name, slot: import_constants.SLIDER_V2_SLOTS.DOT_CONTAINER })`
@@ -93,7 +113,10 @@ const StyledDotsContainer = (0, import_ds_system.styled)("div", { name: import_c
   bottom: 0;
   z-index: ${(props) => props.theme.zIndex.tooltip - 1};
 `;
-const StyledTickMarkValue = (0, import_ds_system.styled)("div", { name: import_constants.DSSliderV2Name, slot: import_constants.SLIDER_V2_SLOTS.TICK_MARK_VALUE })`
+const StyledTickMarkValue = (0, import_ds_system.styled)(import_ds_typography.DSTypography, {
+  name: import_constants.DSSliderV2Name,
+  slot: import_constants.SLIDER_V2_SLOTS.TICK_MARK_VALUE
+})`
   display: flex;
   justify-content: center;
   text-align: center;
@@ -118,41 +141,41 @@ const StyledTickMarksContainer = (0, import_ds_system.styled)("div", {
   overflow-wrap: normal;
 `;
 const ThumbStates = import_ds_system.css`
-  ${({ theme, disabled, $applyAriaDisabled, $readOnly }) => {
+  ${({ theme, disabled, $applyAriaDisabled, $readOnly, $hasError }) => {
+  const { neutral, brand, danger } = theme.colors;
+  const background = `background-color: ${neutral["000"]};`;
+  const focusRing = `:focus {
+        border: 2px solid ${brand[800]};
+        outline: unset;
+      }`;
   if (disabled)
     return `
-      background-color: ${theme.colors.neutral[400]};
-    `;
-  const standardBgColorAndBorder = `
-      background-color: ${theme.colors.neutral["000"]};
-      border: 1px solid ${theme.colors.neutral[400]};
+      ${background}
+      border: 2px solid ${neutral[400]};
     `;
-  const standardFocusRing = `:focus {
-        border: 2px solid ${theme.colors.brand[700]};
-        outline: unset;
-      }`;
   if ($applyAriaDisabled || $readOnly)
     return `
-      ${standardBgColorAndBorder}
-      :hover{
-        background-color: ${theme.colors.neutral["050"]};
-      }
-      ${standardFocusRing}`;
+      ${background}
+      border: 2px solid ${neutral[500]};
+      ${focusRing}`;
+  if ($hasError)
+    return `
+      ${background}
+      border: 2px solid ${danger[SPEC_ERROR_ACTIVE]};
+      ${focusRing}`;
   return `
-      ${standardBgColorAndBorder}
-      :hover{
-        background-color: ${theme.colors.brand[200]};
-      }
-      :hover:not(:focus){
-        border: 1px solid ${theme.colors.brand[600]};
+      ${background}
+      border: 2px solid ${brand[600]};
+      :hover {
+        border: 2px solid ${brand[700]};
       }
-      ${standardFocusRing}`;
+      ${focusRing}`;
 }}
 `;
 const StyledThumb = (0, import_ds_system.styled)("div", { name: import_constants.DSSliderV2Name, slot: import_constants.SLIDER_V2_SLOTS.THUMB })`
   height: 20px;
-  width: 20px;
-  border-radius: 50%;
+  width: 12px;
+  border-radius: 2px;
   top: 0;
   z-index: ${(props) => props.theme.zIndex.tooltip};
   ${ThumbStates}

package/dist/cjs/parts/styles.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/styles.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { Grid } from '@elliemae/ds-grid';\nimport { css, styled } from '@elliemae/ds-system';\nimport { getTrackBackground } from 'react-range';\nimport { DSSliderV2Name, SLIDER_V2_SLOTS } from '../constants/index.js';\n\nexport const StyledWrapper = styled(Grid, { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.ROOT })``;\n\nexport const StyledRangeWrapper = styled(Grid, { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.RANGE_WRAPPER })``;\n\ninterface TrackProps {\n  disabled: boolean;\n  $applyAriaDisabled: boolean;\n  $readOnly: boolean;\n  multiple: boolean;\n  minValue: number;\n  maxValue: number;\n  rangeValues: [number] | [number, number];\n}\n\nconst TrackStates = css<TrackProps>`\n  ${({ theme, disabled, $applyAriaDisabled, $readOnly, rangeValues, multiple, minValue, maxValue }) => {\n    if (disabled) return `background: ${theme.colors.neutral[400]};`;\n\n    let trackColorSelected = theme.colors.brand[600];\n    const trackColorUnselected = theme.colors.neutral[400];\n\n    if ($applyAriaDisabled || $readOnly) trackColorSelected = theme.colors.neutral[700];\n\n    const reactRangeColors = multiple\n      ? [trackColorUnselected, trackColorSelected, trackColorUnselected]\n      : [trackColorSelected, trackColorUnselected];\n\n    if ($applyAriaDisabled || $readOnly) trackColorSelected = theme.colors.neutral[700];\n\n    return `background: ${getTrackBackground({\n      values: rangeValues,\n      colors: reactRangeColors,\n      min: minValue,\n      max: maxValue,\n    })};`;\n  }}\n`;\n\nexport const StyledTrack = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.TRACK })<TrackProps>`\n  position: relative;\n  height: ${(props) => props.theme.space.xxxs};\n  width: 100%;\n  min-width: ${(props) => props.theme.space.xl};\n  border-radius: ${(props) => props.theme.space.xxxs};\n  ${TrackStates}\n`;\n\nexport const StyledDot = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.DOT })`\n  &:after {\n    content: '';\n    background: ${(props) => props.theme.colors.neutral['000']};\n    border-radius: ${(props) => props.theme.space.xxxs};\n    display: block;\n    position: relative;\n    width: 2px;\n    height: 2px;\n  }\n`;\n\nexport const StyledDotsContainer = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.DOT_CONTAINER })`\n  padding: 0 2px;\n  align-items: center;\n  display: flex;\n  justify-content: space-between;\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: ${(props) => props.theme.zIndex.tooltip - 1};\n`;\n\nexport const StyledTickMarkValue = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.TICK_MARK_VALUE })<{\n  isSelected: boolean;\n}>`\n  display: flex;\n  justify-content: center;\n  text-align: center;\n  min-height: ${(props) => props.theme.space.xs};\n  overflow: visible;\n  color: ${(props) => (props.isSelected ? props.theme.colors.neutral[800] : props.theme.colors.neutral[500])};\n  place-self: baseline;\n  transform: translateX(-50%);\n  white-space: normal;\n  overflow-wrap: break-word;\n  word-break: break-word;\n`;\n\nexport const StyledTickMarksContainer = styled('div', {\n  name: DSSliderV2Name,\n  slot: SLIDER_V2_SLOTS.TICK_MARK_CONTAINER,\n})<{ columnCount: number; columnWidth: string }>`\n  display: grid;\n  grid-template-columns: repeat(${(props) => props.columnCount}, calc(${(props) => props.columnWidth} - 4px));\n  gap: 4px;\n  justify-content: space-between;\n  // this next property-value reverts the sanitize.css value\n  overflow-wrap: normal;\n`;\n\ninterface ThumbProps {\n  disabled: boolean;\n  $applyAriaDisabled: boolean;\n  $readOnly: boolean;\n}\nconst ThumbStates = css<ThumbProps>`\n  ${({ theme, disabled, $applyAriaDisabled, $readOnly }) => {\n    // ---------------------------------------------------------\n    //  THE CURSOR IS HANDLED BY THE LIBRARY VIA INLINE STYLES\n    // ---------------------------------------------------------\n    if (disabled)\n      return `\n      background-color: ${theme.colors.neutral[400]};\n    `;\n\n    const standardBgColorAndBorder = `\n      background-color: ${theme.colors.neutral['000']};\n      border: 1px solid ${theme.colors.neutral[400]};\n    `;\n    const standardFocusRing = `:focus {\n        border: 2px solid ${theme.colors.brand[700]};\n        outline: unset;\n      }`;\n\n    if ($applyAriaDisabled || $readOnly)\n      return `\n      ${standardBgColorAndBorder}\n      :hover{\n        background-color: ${theme.colors.neutral['050']};\n      }\n      ${standardFocusRing}`;\n\n    return `\n      ${standardBgColorAndBorder}\n      :hover{\n        background-color: ${theme.colors.brand[200]};\n      }\n      :hover:not(:focus){\n        border: 1px solid ${theme.colors.brand[600]};\n      }\n      ${standardFocusRing}`;\n  }}\n`;\n\nexport const StyledThumb = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.THUMB })<ThumbProps>`\n  height: 20px;\n  width: 20px;\n  border-radius: 50%;\n  top: 0;\n  z-index: ${(props) => props.theme.zIndex.tooltip};\n  ${ThumbStates}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { Grid } from '@elliemae/ds-grid';\nimport { css, styled } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { getTrackBackground } from 'react-range';\nimport { DSSliderV2Name, SLIDER_V2_SLOTS } from '../constants/index.js';\n\nexport const StyledWrapper = styled(Grid, { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.ROOT })``;\n\nexport const StyledRangeWrapper = styled(Grid, { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.RANGE_WRAPPER })``;\n\n// Spec v1.5.0 uses the token names `Error-900` / `Error-200`. There is no `error` palette in the\n// theme \u2014 the key is `danger`, and these are its matching steps. Always reference the token, never\n// the hex: `danger[900]` and `danger[950]` are one step apart and easy to confuse.\nconst SPEC_ERROR_ACTIVE = 900;\nconst SPEC_ERROR_INACTIVE = 200;\n\ninterface TrackProps {\n  disabled: boolean;\n  $applyAriaDisabled: boolean;\n  $readOnly: boolean;\n  $hasError: boolean;\n  $isAnyThumbHovered: boolean;\n  $isAnyThumbFocused: boolean;\n  multiple: boolean;\n  minValue: number;\n  maxValue: number;\n  rangeValues: [number] | [number, number];\n}\n\n/**\n * Spec v1.5.0 track colours, one branch per row of the state table.\n *\n * Precedence: disabled > aria-disabled / readOnly > error > focus > hover > idle. The first three\n * come from the standard Dim Sum interaction state hierarchy; focus over hover is because a handle\n * that is both focused and hovered reads as focused.\n *\n * `readOnly` shares the aria-disabled tokens. Spec v1.5.0 defines no read-only row, and the two\n * states are visually identical by design \u2014 see `.github/memories/project_interaction_states.md`.\n *\n * The blocked states keep their own track colours when focused: the spec's `Aria-Disabled + Focus`\n * row marks the track \"unchanged\" and moves only the handle border. Error follows the same shape by\n * analogy; the spec has no `Error + Focus` row.\n */\nconst TrackStates = css<TrackProps>`\n  ${({\n    theme,\n    disabled,\n    $applyAriaDisabled,\n    $readOnly,\n    $hasError,\n    $isAnyThumbHovered,\n    $isAnyThumbFocused,\n    rangeValues,\n    multiple,\n    minValue,\n    maxValue,\n  }) => {\n    const { neutral, brand, danger } = theme.colors;\n\n    const pickColors = () => {\n      if (disabled) return { active: neutral[400], inactive: neutral[300] };\n      if ($applyAriaDisabled || $readOnly) return { active: neutral[500], inactive: neutral[300] };\n      if ($hasError) return { active: danger[SPEC_ERROR_ACTIVE], inactive: danger[SPEC_ERROR_INACTIVE] };\n      if ($isAnyThumbFocused) return { active: brand[800], inactive: neutral[400] };\n      if ($isAnyThumbHovered) return { active: brand[700], inactive: neutral[400] };\n      return { active: brand[600], inactive: neutral[400] };\n    };\n    const { active, inactive } = pickColors();\n\n    // react-range paints the whole track as one gradient, so both segments are handed over together:\n    // the range version has an inactive segment on each side of the selection.\n    const reactRangeColors = multiple ? [inactive, active, inactive] : [active, inactive];\n\n    return `background: ${getTrackBackground({\n      values: rangeValues,\n      colors: reactRangeColors,\n      min: minValue,\n      max: maxValue,\n    })};`;\n  }}\n`;\n\nexport const StyledTrack = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.TRACK })<TrackProps>`\n  position: relative;\n  height: ${(props) => props.theme.space.xxxs};\n  width: 100%;\n  min-width: ${(props) => props.theme.space.xl};\n  border-radius: ${(props) => props.theme.space.xxxs};\n  ${TrackStates}\n`;\n\nexport const StyledDot = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.DOT })`\n  &:after {\n    content: '';\n    background: ${(props) => props.theme.colors.neutral['000']};\n    border-radius: ${(props) => props.theme.space.xxxs};\n    display: block;\n    position: relative;\n    width: 2px;\n    height: 4px;\n  }\n`;\n\nexport const StyledDotsContainer = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.DOT_CONTAINER })`\n  padding: 0 2px;\n  align-items: center;\n  display: flex;\n  justify-content: space-between;\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: ${(props) => props.theme.zIndex.tooltip - 1};\n`;\n\n// Spec v1.5.0 asks the step value for `typography-variant: b2-Regular`. Naming a variant means the\n// design system's typography, not an ad-hoc font declaration \u2014 so the slot is the DSTypography\n// itself rather than a div wrapping one. Same shape as `StyledTitleTypography` in\n// ds-card-navigation, and it keeps the node count and the `data-testid` unchanged.\n//\n// This is also what makes the value respond to browser text resize: the variant's sizes are in rem\n// against the theme's root, so a 200% zoom scales them proportionally.\nexport const StyledTickMarkValue = styled(DSTypography, {\n  name: DSSliderV2Name,\n  slot: SLIDER_V2_SLOTS.TICK_MARK_VALUE,\n})<{\n  isSelected: boolean;\n}>`\n  display: flex;\n  justify-content: center;\n  text-align: center;\n  min-height: ${(props) => props.theme.space.xs};\n  overflow: visible;\n  color: ${(props) => (props.isSelected ? props.theme.colors.neutral[800] : props.theme.colors.neutral[500])};\n  place-self: baseline;\n  transform: translateX(-50%);\n  white-space: normal;\n  overflow-wrap: break-word;\n  word-break: break-word;\n`;\n\nexport const StyledTickMarksContainer = styled('div', {\n  name: DSSliderV2Name,\n  slot: SLIDER_V2_SLOTS.TICK_MARK_CONTAINER,\n})<{ columnCount: number; columnWidth: string }>`\n  display: grid;\n  grid-template-columns: repeat(${(props) => props.columnCount}, calc(${(props) => props.columnWidth} - 4px));\n  gap: 4px;\n  justify-content: space-between;\n  // this next property-value reverts the sanitize.css value\n  overflow-wrap: normal;\n`;\n\ninterface ThumbProps {\n  disabled: boolean;\n  $applyAriaDisabled: boolean;\n  $readOnly: boolean;\n  $hasError: boolean;\n}\n\n/**\n * Spec v1.5.0 handle borders. Background is `N-000` in every state, so it is set once outside the\n * branches.\n *\n * Hover and focus stay as CSS pseudo-classes rather than reading the context flags, because the\n * border is per handle: in range mode hovering one handle must highlight that one only. The context\n * flags exist for the track, which is a single shared surface \u2014 see `useSliderV2.ts`.\n *\n * The cursor is not set here. react-range supplies grab/grabbing through inline styles, and the\n * not-allowed override for the blocked states is applied in `Thumb.tsx`, which is why the\n * `Disabled + Hover` and `Aria-Disabled + Hover` rows need no branch: they are cursor-only.\n */\nconst ThumbStates = css<ThumbProps>`\n  ${({ theme, disabled, $applyAriaDisabled, $readOnly, $hasError }) => {\n    const { neutral, brand, danger } = theme.colors;\n    const background = `background-color: ${neutral['000']};`;\n    // Focus survives a blocked state: `applyAriaDisabled` and `readOnly` keep focusability on\n    // purpose, so the indicator has to remain visible.\n    const focusRing = `:focus {\n        border: 2px solid ${brand[800]};\n        outline: unset;\n      }`;\n\n    // Native `disabled` cannot receive focus, which is why the spec marks `Disabled + Focus` N/A.\n    if (disabled)\n      return `\n      ${background}\n      border: 2px solid ${neutral[400]};\n    `;\n\n    if ($applyAriaDisabled || $readOnly)\n      return `\n      ${background}\n      border: 2px solid ${neutral[500]};\n      ${focusRing}`;\n\n    if ($hasError)\n      return `\n      ${background}\n      border: 2px solid ${danger[SPEC_ERROR_ACTIVE]};\n      ${focusRing}`;\n\n    return `\n      ${background}\n      border: 2px solid ${brand[600]};\n      :hover {\n        border: 2px solid ${brand[700]};\n      }\n      ${focusRing}`;\n  }}\n`;\n\nexport const StyledThumb = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.THUMB })<ThumbProps>`\n  height: 20px;\n  width: 12px;\n  border-radius: 2px;\n  top: 0;\n  z-index: ${(props) => props.theme.zIndex.tooltip};\n  ${ThumbStates}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,qBAAqB;AACrB,uBAA4B;AAC5B,2BAA6B;AAC7B,yBAAmC;AACnC,uBAAgD;AAEzC,MAAM,oBAAgB,yBAAO,qBAAM,EAAE,MAAM,iCAAgB,MAAM,iCAAgB,KAAK,CAAC;AAEvF,MAAM,yBAAqB,yBAAO,qBAAM,EAAE,MAAM,iCAAgB,MAAM,iCAAgB,cAAc,CAAC;AAK5G,MAAM,oBAAoB;AAC1B,MAAM,sBAAsB;AA6B5B,MAAM,cAAc;AAAA,IAChB,CAAC;AAAA,EACD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,SAAS,OAAO,OAAO,IAAI,MAAM;AAEzC,QAAM,aAAa,MAAM;AACvB,QAAI,SAAU,QAAO,EAAE,QAAQ,QAAQ,GAAG,GAAG,UAAU,QAAQ,GAAG,EAAE;AACpE,QAAI,sBAAsB,UAAW,QAAO,EAAE,QAAQ,QAAQ,GAAG,GAAG,UAAU,QAAQ,GAAG,EAAE;AAC3F,QAAI,UAAW,QAAO,EAAE,QAAQ,OAAO,iBAAiB,GAAG,UAAU,OAAO,mBAAmB,EAAE;AACjG,QAAI,mBAAoB,QAAO,EAAE,QAAQ,MAAM,GAAG,GAAG,UAAU,QAAQ,GAAG,EAAE;AAC5E,QAAI,mBAAoB,QAAO,EAAE,QAAQ,MAAM,GAAG,GAAG,UAAU,QAAQ,GAAG,EAAE;AAC5E,WAAO,EAAE,QAAQ,MAAM,GAAG,GAAG,UAAU,QAAQ,GAAG,EAAE;AAAA,EACtD;AACA,QAAM,EAAE,QAAQ,SAAS,IAAI,WAAW;AAIxC,QAAM,mBAAmB,WAAW,CAAC,UAAU,QAAQ,QAAQ,IAAI,CAAC,QAAQ,QAAQ;AAEpF,SAAO,mBAAe,uCAAmB;AAAA,IACvC,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,KAAK;AAAA,IACL,KAAK;AAAA,EACP,CAAC,CAAC;AACJ,CAAC;AAAA;AAGI,MAAM,kBAAc,yBAAO,OAAO,EAAE,MAAM,iCAAgB,MAAM,iCAAgB,MAAM,CAAC;AAAA;AAAA,YAElF,CAAC,UAAU,MAAM,MAAM,MAAM,IAAI;AAAA;AAAA,eAE9B,CAAC,UAAU,MAAM,MAAM,MAAM,EAAE;AAAA,mBAC3B,CAAC,UAAU,MAAM,MAAM,MAAM,IAAI;AAAA,IAChD,WAAW;AAAA;AAGR,MAAM,gBAAY,yBAAO,OAAO,EAAE,MAAM,iCAAgB,MAAM,iCAAgB,IAAI,CAAC;AAAA;AAAA;AAAA,kBAGxE,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,qBACzC,CAAC,UAAU,MAAM,MAAM,MAAM,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ/C,MAAM,0BAAsB,yBAAO,OAAO,EAAE,MAAM,iCAAgB,MAAM,iCAAgB,cAAc,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAWjG,CAAC,UAAU,MAAM,MAAM,OAAO,UAAU,CAAC;AAAA;AAU/C,MAAM,0BAAsB,yBAAO,mCAAc;AAAA,EACtD,MAAM;AAAA,EACN,MAAM,iCAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA,gBAMe,CAAC,UAAU,MAAM,MAAM,MAAM,EAAE;AAAA;AAAA,WAEpC,CAAC,UAAW,MAAM,aAAa,MAAM,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQrG,MAAM,+BAA2B,yBAAO,OAAO;AAAA,EACpD,MAAM;AAAA,EACN,MAAM,iCAAgB;AACxB,CAAC;AAAA;AAAA,kCAEiC,CAAC,UAAU,MAAM,WAAW,UAAU,CAAC,UAAU,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AA0BpG,MAAM,cAAc;AAAA,IAChB,CAAC,EAAE,OAAO,UAAU,oBAAoB,WAAW,UAAU,MAAM;AACnE,QAAM,EAAE,SAAS,OAAO,OAAO,IAAI,MAAM;AACzC,QAAM,aAAa,qBAAqB,QAAQ,KAAK,CAAC;AAGtD,QAAM,YAAY;AAAA,4BACM,MAAM,GAAG,CAAC;AAAA;AAAA;AAKlC,MAAI;AACF,WAAO;AAAA,QACL,UAAU;AAAA,0BACQ,QAAQ,GAAG,CAAC;AAAA;AAGlC,MAAI,sBAAsB;AACxB,WAAO;AAAA,QACL,UAAU;AAAA,0BACQ,QAAQ,GAAG,CAAC;AAAA,QAC9B,SAAS;AAEb,MAAI;AACF,WAAO;AAAA,QACL,UAAU;AAAA,0BACQ,OAAO,iBAAiB,CAAC;AAAA,QAC3C,SAAS;AAEb,SAAO;AAAA,QACH,UAAU;AAAA,0BACQ,MAAM,GAAG,CAAC;AAAA;AAAA,4BAER,MAAM,GAAG,CAAC;AAAA;AAAA,QAE9B,SAAS;AACf,CAAC;AAAA;AAGI,MAAM,kBAAc,yBAAO,OAAO,EAAE,MAAM,iCAAgB,MAAM,iCAAgB,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,aAKjF,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO;AAAA,IAC9C,WAAW;AAAA;",
   "names": []
 }

package/dist/cjs/react-desc-prop-types.js

@@ -46,7 +46,8 @@ const defaultProps = {
   customTickMarksValues: [],
   multiple: false,
   applyAriaDisabled: false,
-  readOnly: false
+  readOnly: false,
+  hasError: false
 };
 const DSSliderV2PropTypes = {
   ...(0, import_ds_props_helpers.getPropsPerSlotPropTypes)(import_constants.DSSliderV2Name, import_constants.SLIDER_V2_SLOTS),
@@ -70,6 +71,9 @@ const DSSliderV2PropTypes = {
   readOnly: import_ds_props_helpers.PropTypes.bool.description(
     "Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION."
   ).defaultValue(false),
+  hasError: import_ds_props_helpers.PropTypes.bool.description(
+    "Whether the slider has error. Yields to disabled, applyAriaDisabled and readOnly when combined with any of them."
+  ).defaultValue(false),
   minRange: import_ds_props_helpers.PropTypes.number.description(
     "In a multiple selection scenario, this defines the minimum range that must be maintained between the two values."
   ).defaultValue(0)

package/dist/cjs/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/react-desc-prop-types.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-redundant-type-constituents */\n\nimport type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSSliderV2Name, SLIDER_V2_SLOTS } from './constants/index.js';\n\nexport declare namespace DSSliderV2T {\n  /* **************************************************************************************************************\n   *                                           SLIDER V2 IS POLYMORPHIC                                           *\n   ****************************************************************************************************************\n   *                                           DEFINE COMMONS INTERFACES                                          *\n   ************************************************************************************************************** */\n  export type CommonRequiredProps = {\n    minValue: number;\n    maxValue: number;\n  };\n  export type CommonDefaultProps = {\n    disabled: boolean;\n    applyAriaDisabled: boolean;\n    readOnly: boolean;\n    step: number;\n    withTickMarks: boolean;\n    withTickMarksValues: boolean;\n    customTickMarksValues: string[];\n  };\n  export interface CommonOptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<\n    typeof DSSliderV2Name,\n    typeof SLIDER_V2_SLOTS\n  > {\n    className?: string;\n  }\n\n  /* **************************************************************************************************************\n   *                                        DEFINE EACH POLYMORPH INTERFACE                                       *\n   ****************************************************************************************************************\n   *                            make sure to expand the relevant commons interfaces!!!                            *\n   ************************************************************************************************************** */\n\n  /* **************************************************************************************************************\n   *                                            MULTIPLE(range version)                                           *\n   ************************************************************************************************************** */\n\n  // MULTIPLE POLYMORPH TYPES\n  export type RequiredPropsMultiple = CommonRequiredProps & {\n    value: [number, number];\n  };\n  export type DefaultPropsMultiple = CommonDefaultProps & {\n    multiple: true; // this must be ACTUALLY true, it's used as the distinguisher from typescript\n    onValueChange: (newValue: [number, number]) => void;\n    minRange: number; // for the \"multiple\" version, the minimum range is a default prop\n  };\n  export type OptionalPropsMultiple = CommonOptionalProps;\n  /* **************************************************************************************************************\n   *                    each polimorphism needs it's own \"Props\" and \"InternalProps\" defined!!!                   *\n   ************************************************************************************************************** */\n  export type PropsMultiple = Partial<DefaultPropsMultiple> &\n    OptionalPropsMultiple &\n    Omit<\n      GlobalAttributesT<HTMLButtonElement>,\n      keyof DefaultPropsMultiple | keyof OptionalPropsMultiple | keyof XstyledProps | keyof RequiredPropsMultiple\n    > &\n    XstyledProps &\n    RequiredPropsMultiple;\n  export type InternalPropsMultiple = DefaultPropsMultiple &\n    OptionalPropsMultiple &\n    Omit<\n      GlobalAttributesT<HTMLButtonElement>,\n      keyof DefaultPropsMultiple | keyof OptionalPropsMultiple | keyof XstyledProps | keyof RequiredPropsMultiple\n    > &\n    XstyledProps &\n    RequiredPropsMultiple;\n\n  /* **************************************************************************************************************\n   *                                         SINGLE(number picker version)                                        *\n   ************************************************************************************************************** */\n  // SINGLE POLYMORPH TYPES\n  export type RequiredPropsSingle = CommonRequiredProps & {\n    value: number;\n  };\n  export type DefaultPropsSingle = CommonDefaultProps & {\n    multiple: false; // this must be ACTUALLY false, it's used as the distinguisher from typescript\n    onValueChange: (newValue: number) => void;\n  };\n  export type OptionalPropsSingle = CommonOptionalProps & {\n    // for the \"single\" version, the minimum range is not applicable\n    // keeping this minRange here helps typescript to discriminate if the component is being used in \"single\" or \"multiple\" mode\n    // by setting it to \"never\", we ensure that if someone tries to use \"minRange\" with the single version, TypeScript will throw an error\n    minRange?: never;\n  };\n  /* **************************************************************************************************************\n   *                    each polimorphism needs it's own \"Props\" and \"InternalProps\" defined!!!                   *\n   ************************************************************************************************************** */\n  export type PropsSingle = Partial<DefaultPropsSingle> &\n    OptionalPropsSingle &\n    Omit<\n      GlobalAttributesT<HTMLButtonElement>,\n      keyof DefaultPropsSingle | keyof OptionalPropsSingle | keyof XstyledProps | keyof RequiredPropsSingle\n    > &\n    XstyledProps &\n    RequiredPropsSingle;\n  export type InternalPropsSingle = DefaultPropsSingle &\n    OptionalPropsSingle &\n    Omit<\n      GlobalAttributesT<HTMLButtonElement>,\n      keyof DefaultPropsSingle | keyof OptionalPropsSingle | keyof XstyledProps | keyof RequiredPropsSingle\n    > &\n    XstyledProps &\n    RequiredPropsSingle;\n\n  /* **************************************************************************************************************\n   *                                       WRAP UP THE POLYMORPHIC CONTRACT                                       *\n   ************************************************************************************************************** */\n  export type DefaultProps = DefaultPropsMultiple | DefaultPropsSingle;\n  export type RequiredProps = RequiredPropsMultiple | RequiredPropsSingle;\n  export type OptionalProps = OptionalPropsMultiple | OptionalPropsSingle;\n  export type Props = PropsMultiple | PropsSingle;\n  export type InternalProps = InternalPropsMultiple | InternalPropsSingle;\n}\n\nexport const defaultProps: DSSliderV2T.DefaultProps = {\n  disabled: false,\n  step: 5,\n  onValueChange: () => {},\n  withTickMarks: false,\n  withTickMarksValues: false,\n  customTickMarksValues: [],\n  multiple: false,\n  applyAriaDisabled: false,\n  readOnly: false,\n};\n\nexport const DSSliderV2PropTypes: DSPropTypesSchema<DSSliderV2T.Props> = {\n  ...getPropsPerSlotPropTypes(DSSliderV2Name, SLIDER_V2_SLOTS),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  value: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)]).description(\n    'The current value of the slider. Can be a single number or an array of two numbers for multiple sliders.',\n  ).isRequired,\n  onValueChange: PropTypes.func\n    .description('change handler, if multiple is true it will receive an array of two numbers')\n    .signature('(value: number) => void | (value: [number, number]) => void')\n    .defaultValue(() => {}),\n  disabled: PropTypes.bool.description('disable slider').defaultValue(false),\n  minValue: PropTypes.number.description('min value for slider').defaultValue(0),\n  maxValue: PropTypes.number.description('max value for slider').defaultValue(100),\n  step: PropTypes.number.description('steps of values from min to max').defaultValue(5),\n  withTickMarks: PropTypes.bool.description('add tick marks between steps').defaultValue(false),\n  withTickMarksValues: PropTypes.bool.description('add step value to tickmark').defaultValue(false),\n  customTickMarksValues: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))\n    .description('Explicitly set tickmark values for custom tickmarks')\n    .defaultValue([]),\n  applyAriaDisabled: PropTypes.bool\n    .description(\n      'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n    )\n    .defaultValue(false),\n  readOnly: PropTypes.bool\n    .description(\n      'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n    )\n    .defaultValue(false),\n  minRange: PropTypes.number\n    .description(\n      'In a multiple selection scenario, this defines the minimum range that must be maintained between the two values.',\n    )\n    .defaultValue(0),\n};\n\nexport const DSSliderV2PropTypesSchema = DSSliderV2PropTypes as unknown as ValidationMap<DSSliderV2T.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,8BAKO;AAEP,uBAAgD;AAmHzC,MAAM,eAAyC;AAAA,EACpD,UAAU;AAAA,EACV,MAAM;AAAA,EACN,eAAe,MAAM;AAAA,EAAC;AAAA,EACtB,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,uBAAuB,CAAC;AAAA,EACxB,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,UAAU;AACZ;AAEO,MAAM,sBAA4D;AAAA,EACvE,OAAG,kDAAyB,iCAAgB,gCAAe;AAAA,EAC3D,GAAG;AAAA,EACH,GAAG;AAAA,EACH,OAAO,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,QAAQ,kCAAU,MAAM,CAAC,CAAC,EAAE;AAAA,IAClF;AAAA,EACF,EAAE;AAAA,EACF,eAAe,kCAAU,KACtB,YAAY,6EAA6E,EACzF,UAAU,6DAA6D,EACvE,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EACxB,UAAU,kCAAU,KAAK,YAAY,gBAAgB,EAAE,aAAa,KAAK;AAAA,EACzE,UAAU,kCAAU,OAAO,YAAY,sBAAsB,EAAE,aAAa,CAAC;AAAA,EAC7E,UAAU,kCAAU,OAAO,YAAY,sBAAsB,EAAE,aAAa,GAAG;AAAA,EAC/E,MAAM,kCAAU,OAAO,YAAY,iCAAiC,EAAE,aAAa,CAAC;AAAA,EACpF,eAAe,kCAAU,KAAK,YAAY,8BAA8B,EAAE,aAAa,KAAK;AAAA,EAC5F,qBAAqB,kCAAU,KAAK,YAAY,4BAA4B,EAAE,aAAa,KAAK;AAAA,EAChG,uBAAuB,kCAAU,QAAQ,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,MAAM,CAAC,CAAC,EAC/F,YAAY,qDAAqD,EACjE,aAAa,CAAC,CAAC;AAAA,EAClB,mBAAmB,kCAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AAAA,EACrB,UAAU,kCAAU,KACjB;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AAAA,EACrB,UAAU,kCAAU,OACjB;AAAA,IACC;AAAA,EACF,EACC,aAAa,CAAC;AACnB;AAEO,MAAM,4BAA4B;",
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-redundant-type-constituents */\n\nimport type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSSliderV2Name, SLIDER_V2_SLOTS } from './constants/index.js';\n\nexport declare namespace DSSliderV2T {\n  /* **************************************************************************************************************\n   *                                           SLIDER V2 IS POLYMORPHIC                                           *\n   ****************************************************************************************************************\n   *                                           DEFINE COMMONS INTERFACES                                          *\n   ************************************************************************************************************** */\n  export type CommonRequiredProps = {\n    minValue: number;\n    maxValue: number;\n  };\n  export type CommonDefaultProps = {\n    disabled: boolean;\n    applyAriaDisabled: boolean;\n    readOnly: boolean;\n    hasError: boolean;\n    step: number;\n    withTickMarks: boolean;\n    withTickMarksValues: boolean;\n    customTickMarksValues: string[];\n  };\n  export interface CommonOptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<\n    typeof DSSliderV2Name,\n    typeof SLIDER_V2_SLOTS\n  > {\n    className?: string;\n  }\n\n  /* **************************************************************************************************************\n   *                                        DEFINE EACH POLYMORPH INTERFACE                                       *\n   ****************************************************************************************************************\n   *                            make sure to expand the relevant commons interfaces!!!                            *\n   ************************************************************************************************************** */\n\n  /* **************************************************************************************************************\n   *                                            MULTIPLE(range version)                                           *\n   ************************************************************************************************************** */\n\n  // MULTIPLE POLYMORPH TYPES\n  export type RequiredPropsMultiple = CommonRequiredProps & {\n    value: [number, number];\n  };\n  export type DefaultPropsMultiple = CommonDefaultProps & {\n    multiple: true; // this must be ACTUALLY true, it's used as the distinguisher from typescript\n    onValueChange: (newValue: [number, number]) => void;\n    minRange: number; // for the \"multiple\" version, the minimum range is a default prop\n  };\n  export type OptionalPropsMultiple = CommonOptionalProps;\n  /* **************************************************************************************************************\n   *                    each polimorphism needs it's own \"Props\" and \"InternalProps\" defined!!!                   *\n   ************************************************************************************************************** */\n  export type PropsMultiple = Partial<DefaultPropsMultiple> &\n    OptionalPropsMultiple &\n    Omit<\n      GlobalAttributesT<HTMLButtonElement>,\n      keyof DefaultPropsMultiple | keyof OptionalPropsMultiple | keyof XstyledProps | keyof RequiredPropsMultiple\n    > &\n    XstyledProps &\n    RequiredPropsMultiple;\n  export type InternalPropsMultiple = DefaultPropsMultiple &\n    OptionalPropsMultiple &\n    Omit<\n      GlobalAttributesT<HTMLButtonElement>,\n      keyof DefaultPropsMultiple | keyof OptionalPropsMultiple | keyof XstyledProps | keyof RequiredPropsMultiple\n    > &\n    XstyledProps &\n    RequiredPropsMultiple;\n\n  /* **************************************************************************************************************\n   *                                         SINGLE(number picker version)                                        *\n   ************************************************************************************************************** */\n  // SINGLE POLYMORPH TYPES\n  export type RequiredPropsSingle = CommonRequiredProps & {\n    value: number;\n  };\n  export type DefaultPropsSingle = CommonDefaultProps & {\n    multiple: false; // this must be ACTUALLY false, it's used as the distinguisher from typescript\n    onValueChange: (newValue: number) => void;\n  };\n  export type OptionalPropsSingle = CommonOptionalProps & {\n    // for the \"single\" version, the minimum range is not applicable\n    // keeping this minRange here helps typescript to discriminate if the component is being used in \"single\" or \"multiple\" mode\n    // by setting it to \"never\", we ensure that if someone tries to use \"minRange\" with the single version, TypeScript will throw an error\n    minRange?: never;\n  };\n  /* **************************************************************************************************************\n   *                    each polimorphism needs it's own \"Props\" and \"InternalProps\" defined!!!                   *\n   ************************************************************************************************************** */\n  export type PropsSingle = Partial<DefaultPropsSingle> &\n    OptionalPropsSingle &\n    Omit<\n      GlobalAttributesT<HTMLButtonElement>,\n      keyof DefaultPropsSingle | keyof OptionalPropsSingle | keyof XstyledProps | keyof RequiredPropsSingle\n    > &\n    XstyledProps &\n    RequiredPropsSingle;\n  export type InternalPropsSingle = DefaultPropsSingle &\n    OptionalPropsSingle &\n    Omit<\n      GlobalAttributesT<HTMLButtonElement>,\n      keyof DefaultPropsSingle | keyof OptionalPropsSingle | keyof XstyledProps | keyof RequiredPropsSingle\n    > &\n    XstyledProps &\n    RequiredPropsSingle;\n\n  /* **************************************************************************************************************\n   *                                       WRAP UP THE POLYMORPHIC CONTRACT                                       *\n   ************************************************************************************************************** */\n  export type DefaultProps = DefaultPropsMultiple | DefaultPropsSingle;\n  export type RequiredProps = RequiredPropsMultiple | RequiredPropsSingle;\n  export type OptionalProps = OptionalPropsMultiple | OptionalPropsSingle;\n  export type Props = PropsMultiple | PropsSingle;\n  export type InternalProps = InternalPropsMultiple | InternalPropsSingle;\n}\n\nexport const defaultProps: DSSliderV2T.DefaultProps = {\n  disabled: false,\n  step: 5,\n  onValueChange: () => {},\n  withTickMarks: false,\n  withTickMarksValues: false,\n  customTickMarksValues: [],\n  multiple: false,\n  applyAriaDisabled: false,\n  readOnly: false,\n  hasError: false,\n};\n\nexport const DSSliderV2PropTypes: DSPropTypesSchema<DSSliderV2T.Props> = {\n  ...getPropsPerSlotPropTypes(DSSliderV2Name, SLIDER_V2_SLOTS),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  value: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)]).description(\n    'The current value of the slider. Can be a single number or an array of two numbers for multiple sliders.',\n  ).isRequired,\n  onValueChange: PropTypes.func\n    .description('change handler, if multiple is true it will receive an array of two numbers')\n    .signature('(value: number) => void | (value: [number, number]) => void')\n    .defaultValue(() => {}),\n  disabled: PropTypes.bool.description('disable slider').defaultValue(false),\n  minValue: PropTypes.number.description('min value for slider').defaultValue(0),\n  maxValue: PropTypes.number.description('max value for slider').defaultValue(100),\n  step: PropTypes.number.description('steps of values from min to max').defaultValue(5),\n  withTickMarks: PropTypes.bool.description('add tick marks between steps').defaultValue(false),\n  withTickMarksValues: PropTypes.bool.description('add step value to tickmark').defaultValue(false),\n  customTickMarksValues: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))\n    .description('Explicitly set tickmark values for custom tickmarks')\n    .defaultValue([]),\n  applyAriaDisabled: PropTypes.bool\n    .description(\n      'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n    )\n    .defaultValue(false),\n  readOnly: PropTypes.bool\n    .description(\n      'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n    )\n    .defaultValue(false),\n  hasError: PropTypes.bool\n    .description(\n      'Whether the slider has error. Yields to disabled, applyAriaDisabled and readOnly when combined with any of them.',\n    )\n    .defaultValue(false),\n  minRange: PropTypes.number\n    .description(\n      'In a multiple selection scenario, this defines the minimum range that must be maintained between the two values.',\n    )\n    .defaultValue(0),\n};\n\nexport const DSSliderV2PropTypesSchema = DSSliderV2PropTypes as unknown as ValidationMap<DSSliderV2T.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,8BAKO;AAEP,uBAAgD;AAoHzC,MAAM,eAAyC;AAAA,EACpD,UAAU;AAAA,EACV,MAAM;AAAA,EACN,eAAe,MAAM;AAAA,EAAC;AAAA,EACtB,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,uBAAuB,CAAC;AAAA,EACxB,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AACZ;AAEO,MAAM,sBAA4D;AAAA,EACvE,OAAG,kDAAyB,iCAAgB,gCAAe;AAAA,EAC3D,GAAG;AAAA,EACH,GAAG;AAAA,EACH,OAAO,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,QAAQ,kCAAU,MAAM,CAAC,CAAC,EAAE;AAAA,IAClF;AAAA,EACF,EAAE;AAAA,EACF,eAAe,kCAAU,KACtB,YAAY,6EAA6E,EACzF,UAAU,6DAA6D,EACvE,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EACxB,UAAU,kCAAU,KAAK,YAAY,gBAAgB,EAAE,aAAa,KAAK;AAAA,EACzE,UAAU,kCAAU,OAAO,YAAY,sBAAsB,EAAE,aAAa,CAAC;AAAA,EAC7E,UAAU,kCAAU,OAAO,YAAY,sBAAsB,EAAE,aAAa,GAAG;AAAA,EAC/E,MAAM,kCAAU,OAAO,YAAY,iCAAiC,EAAE,aAAa,CAAC;AAAA,EACpF,eAAe,kCAAU,KAAK,YAAY,8BAA8B,EAAE,aAAa,KAAK;AAAA,EAC5F,qBAAqB,kCAAU,KAAK,YAAY,4BAA4B,EAAE,aAAa,KAAK;AAAA,EAChG,uBAAuB,kCAAU,QAAQ,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,MAAM,CAAC,CAAC,EAC/F,YAAY,qDAAqD,EACjE,aAAa,CAAC,CAAC;AAAA,EAClB,mBAAmB,kCAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AAAA,EACrB,UAAU,kCAAU,KACjB;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AAAA,EACrB,UAAU,kCAAU,KACjB;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AAAA,EACrB,UAAU,kCAAU,OACjB;AAAA,IACC;AAAA,EACF,EACC,aAAa,CAAC;AACnB;AAEO,MAAM,4BAA4B;",
   "names": []
 }

package/dist/cjs/typescript-testing/typescript-slider-v2-valid-auto-polymorph-multiple.js

@@ -55,6 +55,7 @@ const testCompleteDefaults = {
   customTickMarksValues: [],
   applyAriaDisabled: false,
   readOnly: false,
+  hasError: false,
   minRange: 10
 };
 const testInternalProps = {

package/dist/cjs/typescript-testing/typescript-slider-v2-valid-auto-polymorph-multiple.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-slider-v2-valid-auto-polymorph-multiple.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSSliderV2 } from '../index.js';\nimport type { DSSliderV2T } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSSliderV2T.Props;\ntype ComponentPropsInternals = DSSliderV2T.InternalProps;\ntype ComponentPropsDefaultProps = DSSliderV2T.DefaultProps;\ntype ComponentPropsOptionalProps = DSSliderV2T.OptionalProps;\ntype ComponentPropsRequiredProps = DSSliderV2T.RequiredProps;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n  value: [10, 50],\n  minValue: 0,\n  maxValue: 100,\n};\nconst testOptionalProps: ComponentPropsOptionalProps = {};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n//  Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n  multiple: true,\n  applyAriaDisabled: false,\n};\n\nconst testProps: ComponentPropsForApp = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  multiple: true,\n  disabled: false,\n  step: 5,\n  onValueChange: () => {},\n  withTickMarks: false,\n  withTickMarksValues: false,\n  customTickMarksValues: [],\n  applyAriaDisabled: false,\n  readOnly: false,\n  minRange: 10,\n};\nconst testInternalProps: ComponentPropsInternals = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n};\nconst testInternalPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  value: [10, 50],\n  minValue: 0,\n  maxValue: 100,\n  multiple: true,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  value: [10, 50],\n  minValue: 0,\n  maxValue: 100,\n  multiple: true,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  value: [10, 50] as [number, number],\n  minValue: 0,\n  maxValue: 100,\n  multiple: true,\n} as const;\n\nconst onValueChange = (value: [number, number]) => {};\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSSliderV2 {...testExplicitDefinition} />\n    <DSSliderV2 {...testInferedTypeCompatibility} />\n    <DSSliderV2 {...testDefinitionAsConst} />\n    {/* works with inline values */}\n    <DSSliderV2 multiple value={[0, 100]} minValue={0} maxValue={100} onValueChange={onValueChange} />\n  </>\n);\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACuFrB;AAtFF,eAA2B;AAU3B,MAAM,oBAAiD;AAAA,EACrD,OAAO,CAAC,IAAI,EAAE;AAAA,EACd,UAAU;AAAA,EACV,UAAU;AACZ;AACA,MAAM,oBAAiD,CAAC;AAIxD,MAAM,sBAA2D;AAAA,EAC/D,UAAU;AAAA,EACV,mBAAmB;AACrB;AAEA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,uBAA6D;AAAA,EACjE,UAAU;AAAA,EACV,UAAU;AAAA,EACV,MAAM;AAAA,EACN,eAAe,MAAM;AAAA,EAAC;AAAA,EACtB,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,uBAAuB,CAAC;AAAA,EACxB,mBAAmB;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AACZ;AACA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,OAAO,CAAC,IAAI,EAAE;AAAA,EACd,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AACZ;AAGA,MAAM,+BAA+B;AAAA,EACnC,OAAO,CAAC,IAAI,EAAE;AAAA,EACd,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AACZ;AAEA,MAAM,wBAAwB;AAAA,EAC5B,OAAO,CAAC,IAAI,EAAE;AAAA,EACd,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AACZ;AAEA,MAAM,gBAAgB,CAAC,UAA4B;AAAC;AAEpD,MAAM,wBAAwB,MAC5B,4EAEE;AAAA,8CAAC,uBAAY,GAAG,wBAAwB;AAAA,EACxC,4CAAC,uBAAY,GAAG,8BAA8B;AAAA,EAC9C,4CAAC,uBAAY,GAAG,uBAAuB;AAAA,EAEvC,4CAAC,uBAAW,UAAQ,MAAC,OAAO,CAAC,GAAG,GAAG,GAAG,UAAU,GAAG,UAAU,KAAK,eAA8B;AAAA,GAClG;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSSliderV2 } from '../index.js';\nimport type { DSSliderV2T } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSSliderV2T.Props;\ntype ComponentPropsInternals = DSSliderV2T.InternalProps;\ntype ComponentPropsDefaultProps = DSSliderV2T.DefaultProps;\ntype ComponentPropsOptionalProps = DSSliderV2T.OptionalProps;\ntype ComponentPropsRequiredProps = DSSliderV2T.RequiredProps;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n  value: [10, 50],\n  minValue: 0,\n  maxValue: 100,\n};\nconst testOptionalProps: ComponentPropsOptionalProps = {};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n//  Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n  multiple: true,\n  applyAriaDisabled: false,\n};\n\nconst testProps: ComponentPropsForApp = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  multiple: true,\n  disabled: false,\n  step: 5,\n  onValueChange: () => {},\n  withTickMarks: false,\n  withTickMarksValues: false,\n  customTickMarksValues: [],\n  applyAriaDisabled: false,\n  readOnly: false,\n  hasError: false,\n  minRange: 10,\n};\nconst testInternalProps: ComponentPropsInternals = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n};\nconst testInternalPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  value: [10, 50],\n  minValue: 0,\n  maxValue: 100,\n  multiple: true,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  value: [10, 50],\n  minValue: 0,\n  maxValue: 100,\n  multiple: true,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  value: [10, 50] as [number, number],\n  minValue: 0,\n  maxValue: 100,\n  multiple: true,\n} as const;\n\nconst onValueChange = (value: [number, number]) => {};\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSSliderV2 {...testExplicitDefinition} />\n    <DSSliderV2 {...testInferedTypeCompatibility} />\n    <DSSliderV2 {...testDefinitionAsConst} />\n    {/* works with inline values */}\n    <DSSliderV2 multiple value={[0, 100]} minValue={0} maxValue={100} onValueChange={onValueChange} />\n  </>\n);\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACwFrB;AAvFF,eAA2B;AAU3B,MAAM,oBAAiD;AAAA,EACrD,OAAO,CAAC,IAAI,EAAE;AAAA,EACd,UAAU;AAAA,EACV,UAAU;AACZ;AACA,MAAM,oBAAiD,CAAC;AAIxD,MAAM,sBAA2D;AAAA,EAC/D,UAAU;AAAA,EACV,mBAAmB;AACrB;AAEA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,uBAA6D;AAAA,EACjE,UAAU;AAAA,EACV,UAAU;AAAA,EACV,MAAM;AAAA,EACN,eAAe,MAAM;AAAA,EAAC;AAAA,EACtB,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,uBAAuB,CAAC;AAAA,EACxB,mBAAmB;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AACZ;AACA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,OAAO,CAAC,IAAI,EAAE;AAAA,EACd,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AACZ;AAGA,MAAM,+BAA+B;AAAA,EACnC,OAAO,CAAC,IAAI,EAAE;AAAA,EACd,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AACZ;AAEA,MAAM,wBAAwB;AAAA,EAC5B,OAAO,CAAC,IAAI,EAAE;AAAA,EACd,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AACZ;AAEA,MAAM,gBAAgB,CAAC,UAA4B;AAAC;AAEpD,MAAM,wBAAwB,MAC5B,4EAEE;AAAA,8CAAC,uBAAY,GAAG,wBAAwB;AAAA,EACxC,4CAAC,uBAAY,GAAG,8BAA8B;AAAA,EAC9C,4CAAC,uBAAY,GAAG,uBAAuB;AAAA,EAEvC,4CAAC,uBAAW,UAAQ,MAAC,OAAO,CAAC,GAAG,GAAG,GAAG,UAAU,GAAG,UAAU,KAAK,eAA8B;AAAA,GAClG;",
   "names": []
 }

package/dist/cjs/typescript-testing/typescript-slider-v2-valid-auto-polymorph-single.js

@@ -56,7 +56,8 @@ const testCompleteDefaults = {
   withTickMarksValues: false,
   customTickMarksValues: [],
   applyAriaDisabled: false,
-  readOnly: false
+  readOnly: false,
+  hasError: false
 };
 const testInternalProps = {
   ...testRequiredProps,