@evolve.ui/core-components 1.1.0 → 1.2.0

package/splitButton.cjs

@@ -3,5 +3,5 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-const require_SplitButton = require("./SplitButton-DcmmLW8j.cjs");
+const require_SplitButton = require("./SplitButton-B_Y253RU.cjs");
 exports.SplitButton = require_SplitButton.SplitButton;

package/splitButton.mjs

@@ -1,3 +1,3 @@
 'use client';
-import { t as SplitButton } from "./SplitButton-WE5ymwCQ.mjs";
+import { t as SplitButton } from "./SplitButton-_poP9Ykq.mjs";
 export { SplitButton };

package/src/BottomSheet/components/BottomSheetContentArea/BottomSheetContentArea.tsx

@@ -60,12 +60,13 @@ export const BottomSheetContentArea = memo<Props>(({ children, contentRef, disab
                 // Layout - flexible scrollable area
                 'min-h-0 flex-shrink flex-grow',
                 // When disableScroll is active (after delay), make this a flex container for children to handle their own scrolling
+                // Deliberately no focus suppression: this div has no tabIndex and is never focused
+                // programmatically, but Chrome's keyboard-focusable scroll containers can still put
+                // it in the tab order — in which case the UA ring is the only indicator it has.
                 {
                     'flex flex-col overflow-hidden': isDisableScrollActive,
                     'overflow-auto overscroll-contain': !isDisableScrollActive,
-                },
-                // Focus
-                'focus:outline-none'
+                }
             )}
             data-testid="rsbs-scroll"
             key="scroll"

package/src/BottomSheet/components/BottomSheetOverlay/BottomSheetOverlayTranslate3d.tsx

@@ -83,8 +83,11 @@ export const BottomSheetOverlayTranslate3d = memo<Props>(
                     'relative',
                     // Border radius (dynamic via CSS custom property with fallback)
                     'rounded-t-xl',
-                    // Focus outline
-                    'hui-focus-visible-outline focus:outline-none',
+                    // focus-convention: intentional — this is a role="dialog" tabIndex={-1} programmatic focus
+                    // target, never Tab-reachable, so suppressing the outline is correct; a ring around
+                    // the whole sheet on open would be the regression. The hui- class was dead here:
+                    // outline-none (utilities, later) already beat it at equal specificity (DS-98 Phase 0).
+                    'focus:outline-none',
                     // EXPERIMENTAL: Static height instead of animated height
                     'h-[var(--rsbs-overlay-h-static,100vh)]',
                     // EXPERIMENTAL: translate3d for GPU acceleration

package/src/Button/buttonColorClasses.ts

@@ -18,7 +18,7 @@ export const filledNeutralClasses = cn(
 );
 
 export const filledInverseClasses = cn(
-    'bg-surface-50 text-primary-500 outline-transparent focus:hui-focus-visible-outline-inverse hover:bg-surface-100 active:bg-surface-200 disabled:cursor-not-allowed disabled:bg-background-disabled aria-busy:cursor-not-allowed aria-busy:text-transparent'
+    'hui-focus-visible-outline-inverse bg-surface-50 text-primary-500 outline-transparent hover:bg-surface-100 active:bg-surface-200 disabled:cursor-not-allowed disabled:bg-background-disabled aria-busy:cursor-not-allowed aria-busy:text-transparent'
 );
 
 export const outlinedNeutralClasses = cn(
@@ -33,7 +33,12 @@ export const outlinedCriticalClasses = cn(
 );
 
 export const outlinedInverseClasses = cn(
-    'outline-solid bg-transparent text-icon-inverse outline outline-1 outline-surface-50 focus:hui-focus-visible-outline-inverse hover:bg-background-hover-inverse focus:outline-focus-inverse active:bg-background-pressed-inverse disabled:cursor-not-allowed disabled:text-text-disabled disabled:outline-border-disabled aria-busy:cursor-not-allowed aria-busy:text-transparent'
+    // Atomic (DS-98): de-prefixing the ring and deleting the bare-focus outline-color are one edit.
+    // The latter is deleted rather than de-prefixed — this string carries a static `outline outline-1
+    // outline-surface-50`, so an unconditional outline-color would permanently recolour the resting
+    // outline; it also recoloured it on mouse click, which is the SA-07 defect. The -inverse ring
+    // already sets that colour at :focus-visible.
+    'outline-solid hui-focus-visible-outline-inverse bg-transparent text-icon-inverse outline outline-1 outline-surface-50 hover:bg-background-hover-inverse active:bg-background-pressed-inverse disabled:cursor-not-allowed disabled:text-text-disabled disabled:outline-border-disabled aria-busy:cursor-not-allowed aria-busy:text-transparent'
 );
 
 export const transparentPrimaryClasses = cn(
@@ -49,5 +54,5 @@ export const transparentNeutralClasses = cn(
 );
 
 export const transparentInverseClasses = cn(
-    'bg-transparent text-icon-inverse outline-transparent focus:hui-focus-visible-outline-inverse hover:bg-background-hover-inverse active:bg-background-pressed-inverse disabled:cursor-not-allowed disabled:bg-transparent aria-busy:cursor-not-allowed aria-busy:text-transparent'
+    'hui-focus-visible-outline-inverse bg-transparent text-icon-inverse outline-transparent hover:bg-background-hover-inverse active:bg-background-pressed-inverse disabled:cursor-not-allowed disabled:bg-transparent aria-busy:cursor-not-allowed aria-busy:text-transparent'
 );

package/src/Drawer/Drawer.tsx

@@ -372,14 +372,11 @@ export const Drawer = ({
     return (
         <>
             <div
-                className={cn(
-                    'hui-focus-visible-outline invisible fixed inset-0 z-30 bg-background-overlay opacity-0 duration-500 focus:m-2xs focus:transition-none',
-                    {
-                        'opacity-1 visible': renderDrawer,
-                        'pointer-events-none invisible opacity-0': !renderDrawer,
-                        'transition-none': removeTransitionForTest,
-                    }
-                )}
+                className={cn('invisible fixed inset-0 z-30 bg-background-overlay opacity-0 duration-500', {
+                    'opacity-1 visible': renderDrawer,
+                    'pointer-events-none invisible opacity-0': !renderDrawer,
+                    'transition-none': removeTransitionForTest,
+                })}
                 data-testid="drawer-backdrop"
                 ref={backdropRef}
             />

package/src/FavoriteButton/components/IconOnlyFavoriteButton/IconOnlyFavoriteButton.tsx

@@ -44,7 +44,10 @@ export const IconOnlyFavoriteButton = forwardRef<HTMLButtonElement, IconOnlyFavo
                         'bg-background-primary text-critical-500': favorited,
                     },
                     // Focus state
-                    'focus-visible:hui-focus-visible-outline focus:outline-none focus-visible:outline-offset-1',
+                    // Atomic: the bare-focus outline suppression had to go in the same edit as the de-prefix.
+                    // Prefixed,
+                    // the ring was 0,3,0 and beat it; bare it is 0,2,0 and would lose (DS-98 Phase 0).
+                    'hui-focus-visible-outline focus-visible:outline-offset-1',
                     // Active state - immediately show critical color when clicked
                     'active:text-border-critical-400 active:bg-critical-50',
                     // Hover state

package/src/FavoriteButton/components/LabeledAnimatedFavoriteButton/LabeledAnimatedFavoriteButton.tsx

@@ -15,7 +15,7 @@ import { useFavoriteButtonState } from '../../hooks/useFavoriteButtonState';
  * - `isWiggling`: side-to-side wiggle (button), 3D twirl + bloom (heart icon),
  *   color flash (critical fill pulse on heart when not favorited), and shimmer (label text).
  *   During nudge the heart uses `fill` weight with critical color; at rest unfavorited uses `bold`.
- *   Apply for ~1300ms, then reset to false to re-arm.
+ *   Apply for ~650ms, then reset to false to re-arm.
  *
  * - `isActivating`: pulse (button) and heart pop (icon). Apply for ~500ms.
  *
@@ -25,6 +25,13 @@ import { useFavoriteButtonState } from '../../hooks/useFavoriteButtonState';
  * The heart-color flash uses `.hui-fb-color-flash` to animate fill on the nested
  * SVG path via a descendant selector. Icon weight: `bold` when unfavorited at rest,
  * `fill` during nudge, favorited, or active press — matching the static `labeled` variant at rest.
+ *
+ * Reduced motion is gated once at the registry level
+ * (`theme-system/src/tailwind/reducedMotion.ts`), so these call sites deliberately carry no
+ * `motion-reduce:` variants — adding them back would reintroduce a second mechanism. The
+ * shimmer is the one exception: `.hui-fb-shimmer` also drops its gradient under reduce, because
+ * the label is painted *by* that gradient (`-webkit-text-fill-color: transparent`) and would
+ * otherwise be illegible.
  */
 
 type Props = {
@@ -42,7 +49,7 @@ type Props = {
     isActivating?: boolean;
     /**
      * When true, fires the nudge animation (wiggle + twirl + shimmer + color flash).
-     * Reset to false after ~1300ms to re-arm.
+     * Reset to false after ~650ms to re-arm.
      */
     isWiggling?: boolean;
     /** Label text shown when not favorited. @default 'Save' */
@@ -122,10 +129,10 @@ export const LabeledAnimatedFavoriteButton = forwardRef<HTMLButtonElement, Props
                         'hover:border-critical-700 hover:bg-critical-50 hover:text-critical-700',
                         'active:border-critical-900 active:bg-critical-100 active:text-critical-900',
                         // Nudge animation — wiggle on button root + color flash on nested SVG path
-                        isWiggling && 'animate-saveButtonWiggle motion-reduce:animate-none',
+                        isWiggling && 'animate-saveButtonWiggle',
                         isWiggling && !favorited && 'hui-fb-color-flash',
                         // Save-click animation — pulse on button root
-                        isActivating && 'animate-saveButtonPulse motion-reduce:animate-none',
+                        isActivating && 'animate-saveButtonPulse',
                         className
                     )}
                     data-hui-id="FavoriteButton"
@@ -148,7 +155,7 @@ export const LabeledAnimatedFavoriteButton = forwardRef<HTMLButtonElement, Props
                             // Critical color during nudge so fill weight reads red immediately (not surface-500 grey)
                             isWiggling && !favorited && 'text-critical-500',
                             // Nudge animation — 3D twirl + bloom on icon frame
-                            isWiggling && 'animate-saveHeartTwirlBloom motion-reduce:animate-none'
+                            isWiggling && 'animate-saveHeartTwirlBloom'
                         )}
                         style={{ height: '14px', perspective: '200px', width: '14px' }}
                     >
@@ -156,7 +163,7 @@ export const LabeledAnimatedFavoriteButton = forwardRef<HTMLButtonElement, Props
                             className={cn(
                                 '[transform-style:preserve-3d]',
                                 // Save-click animation — heart pop on SVG element
-                                isActivating && 'animate-saveHeartPop motion-reduce:animate-none'
+                                isActivating && 'animate-saveHeartPop'
                             )}
                             color="inherit"
                             size="xs"

package/src/FavoriteButton/types/favoriteButton.ts

@@ -63,7 +63,7 @@ export type FavoriteButtonProps = BaseFavoriteButtonProps & {
     /**
      * When true, fires the nudge animation (wiggle + twirl + shimmer).
      * Only meaningful for the `labeled-animated` variant.
-     * Reset to false after ~1300ms to re-arm.
+     * Reset to false after ~650ms to re-arm.
      */
     isWiggling?: boolean;
     /**

package/src/FileUpload/components/GridFileCard/GridFileCard.tsx

@@ -230,7 +230,7 @@ export const GridFileCard = ({
                         // transitions
                         'opacity-0 transition-opacity duration-200',
                         // group focus/hover states
-                        'group-focus-within/grid-file-card:opacity-100 group-hover/grid-file-card:opacity-100',
+                        'group-hover/grid-file-card:opacity-100 group-has-[:focus-visible]/grid-file-card:opacity-100',
                         // mouse pointer
                         'cursor-pointer',
                         {

package/src/FileUpload/components/ListFileCard/ListFileCard.tsx

@@ -78,8 +78,8 @@ export const ListFileCard = ({
 
     const actionBtnClasses = showActionsOnHover
         ? cn(
-              'opacity-0 group-focus-within/list-file-card:opacity-100 group-hover/list-file-card:opacity-100',
-              'focus:opacity-100',
+              'opacity-0 group-hover/list-file-card:opacity-100 group-has-[:focus-visible]/list-file-card:opacity-100',
+              'focus-visible:opacity-100',
               'transition-opacity duration-200'
           )
         : '';

package/src/ImageSlider/ImageSlider.tsx

@@ -382,7 +382,9 @@ export const ImageSlider = ({
             aria-label="Image gallery"
             aria-roledescription="carousel"
             className={cn(
-                'relative mx-auto w-full pr-lg outline-none smMax:pr-0',
+                // Adds the shared ring — this role="application" container is tabIndex={0} and
+                // was shipping with no focus indicator at all (WCAG 2.4.7) — DS-98 row 17.
+                'hui-focus-visible-outline relative mx-auto w-full pr-lg smMax:pr-0',
                 // Only extend beyond viewport for bleed effect when there are multiple cards
                 { 'xsMax:-ml-sm xsMax:w-[calc(100%+32px)]': numberOfPages > 1 },
                 className

package/src/ImageSlider/components/Thumbnails/Thumbnails.tsx

@@ -129,7 +129,7 @@ export const Thumbnails = ({
                     aria-selected={isActive}
                     className={cn(
                         'box-border flex-shrink-0 cursor-pointer overflow-hidden rounded-md transition-all duration-100',
-                        'hui-focus-visible-outline hover:opacity-80 focus:-outline-offset-4',
+                        'hui-focus-visible-outline hover:opacity-80 focus-visible:-outline-offset-4',
                         `aspect-square h-[${thumbnailSize}px] w-[${thumbnailSize}px] max-h-[${thumbnailSize}px] max-w-[${thumbnailSize}px]`,
                         // Use outline instead of border to avoid affecting box dimensions
                         isActive

package/src/JumpMenu/components/JumpMenuItem/JumpMenuItem.tsx

@@ -35,7 +35,10 @@ export const JumpMenuItem = ({
                 'hui-text-body-secondary relative whitespace-nowrap rounded-md px-xs py-2xs last:mr-sm [&:not(:last-child)]:mr-xs',
                 // Default state (Selected=Off, Hover=Off, Focused=Off)
                 'text-text-secondary',
-                // Focus styles - inset focus ring to stay within button dimensions
+                // Focus styles - inset focus ring to stay within button dimensions.
+                // Permitted clause-2 deviation (DS-98): hui-focus-visible-outline is outline-based and
+                // cannot express an inset ring. The outline-none is focus-visible-scoped, so it
+                // suppresses only alongside this replacement indicator.
                 'focus-visible:shadow-[inset_0_0_0_4px_rgb(var(--color-focus-primary)/0.50)] focus-visible:outline-none',
                 // Interactive states
                 'cursor-pointer',

package/src/Menu/components/MenuItem/MenuItem.tsx

@@ -215,7 +215,7 @@ export const MenuItem = forwardRef<HTMLDivElement, MenuItemProps & HTMLAttribute
                 className={cn(
                     {
                         'active:bg-background-hover': !isHeader,
-                        'focus:bg-background-hover': !isHeader,
+                        'focus-visible:bg-background-hover': !isHeader,
                         'hover:bg-background-hover': !isHeader,
                     },
                     'MenuItem relative grid w-full cursor-pointer items-center justify-start gap-x-xs border-none px-sm py-3 outline-0',

package/src/Modal/ComposableModal.tsx

@@ -238,7 +238,15 @@ export const ComposableModal = ({
                 )}
                 data-hui-id="Modal"
                 data-testid={dataTestId}
-                onAnimationEnd={() => {
+                onAnimationEnd={(event) => {
+                    // `animationend` bubbles, so only the dialog's own close animation counts.
+                    // Under `prefers-reduced-motion: reduce` every animation collapses to ~1ms,
+                    // which compresses descendant completions into the same tick as the close —
+                    // without this check an animated child could close the modal early.
+                    if (event.target !== event.currentTarget) {
+                        return;
+                    }
+
                     if (modalAnimation === 'closing') {
                         onModalCloseAnimationEnd?.();
                     }

package/src/Modal/hooks/useCloseModal.ts

@@ -120,7 +120,14 @@ export const useCloseModal = (handleCloseData?: any) => {
 
         setModalAnimation('closing');
 
-        container.addEventListener('animationend', () => {
+        container.addEventListener('animationend', (event) => {
+            // `animationend` bubbles up from descendants. Under `prefers-reduced-motion: reduce`
+            // every animation collapses to ~1ms, so a child finishing in the same tick would
+            // otherwise clear the watchdog and resolve the close before the modal has animated.
+            if (event.target !== event.currentTarget) {
+                return;
+            }
+
             clearTimeout(timeout);
             forceCloseModal();
             storedResolve();

package/src/PhoneInput/PhoneInput.tsx

@@ -306,6 +306,12 @@ export const PhoneInput = (unfilteredProps: Props) => {
     }, [countryMenuOpen, usePortalMenu]);
 
     // Create the country dropdown content
+    // focus-convention: intentional — text field resting border (:focus-visible always matches a
+    // focused text input, mouse or keyboard). The outline-none is permitted because the border
+    // change is itself a visible focus indicator, so WCAG 2.4.7 is still met (SA-07/DS-98).
+    const countrySearchClasses =
+        'rounded w-full border border-border-secondary bg-background-primary px-xs py-2xs !text-[16px] text-sm text-text-primary placeholder:text-[16px] placeholder:text-text-inactive focus:border-border-selected focus:outline-none';
+
     const countryDropdownContent = (
         <div
             aria-label="Country list"
@@ -341,7 +347,7 @@ export const PhoneInput = (unfilteredProps: Props) => {
             <div className="px-xs pb-xs">
                 <input
                     aria-label="Search countries"
-                    className="rounded w-full border border-border-secondary bg-background-primary px-xs py-2xs !text-[16px] text-sm text-text-primary placeholder:text-[16px] placeholder:text-text-inactive focus:border-border-selected focus:outline-none"
+                    className={countrySearchClasses}
                     onBlur={(e) => {
                         e.stopPropagation();
                         e.preventDefault();

package/src/ProgressCircle/ProgressCircle.tsx

@@ -229,7 +229,7 @@ export const ProgressCircle = ({
                         x={iconViewBoxOffset}
                         y={iconViewBoxOffset}
                     >
-                        <div className="flex h-full w-full animate-progress-icon-fade-in items-center justify-center">
+                        <div className="animate-progress-icon-fade-in flex h-full w-full items-center justify-center">
                             <CheckCircle
                                 color="success"
                                 size="md"

package/src/SearchInput/SearchInput.tsx

@@ -168,7 +168,7 @@ export const SearchInput = ({
         <div className={cn('rounded-search-input bg-background-primary', className)}>
             <form
                 className={cn(
-                    'overflow-none box-content flex items-center gap-2xs rounded-search-input border border-border-secondary bg-background-primary outline-1 outline-background-critical-dark hover:border-border-hover has-[:focus]:border-border-selected',
+                    'overflow-none box-content flex items-center gap-2xs rounded-search-input border border-border-secondary bg-background-primary outline-1 outline-background-critical-dark hover:border-border-hover has-[:focus-visible]:border-border-selected',
                     {
                         'border-0': emphasis === 'bold',
                         'h-[32px]': small, // Smaller due to box-content to prevent clipping
@@ -184,11 +184,12 @@ export const SearchInput = ({
                     },
                     // Focus Styles
                     {
-                        'has-[:focus]:border-border-secondary has-[:focus]:bg-background-primary has-[:focus]:outline has-[:focus]:outline-focus-inverse':
+                        'has-[:focus-visible]:border-border-secondary has-[:focus-visible]:bg-background-primary has-[:focus-visible]:outline has-[:focus-visible]:outline-focus-inverse':
                             emphasis === 'bold',
-                        'has-[:focus]:outline-2 has-[:focus]:outline-border-black':
+                        'has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-border-black':
                             style === 'neutral' && emphasis === 'bold',
-                        'has-[:focus]:outline-4 has-[:focus]:outline-focus-inverse': style === 'inverse',
+                        'has-[:focus-visible]:outline-4 has-[:focus-visible]:outline-focus-inverse':
+                            style === 'inverse',
                     }
                 )}
                 data-hui-id="SearchInput"

package/src/Select/selectComponents.tsx

@@ -142,8 +142,7 @@ export const Option = ({
                     // Selected AND disabled - show as selected but with disabled text color
                     '!cursor-not-allowed !bg-background-inverse !text-text-disabled hover:!bg-background-inverse':
                         isSelectedAndDisabled,
-                    '!cursor-not-allowed !text-text-disabled hover:!bg-background-primary focus:!bg-background-primary':
-                        isDisabled && !isSelected,
+                    '!cursor-not-allowed !text-text-disabled hover:!bg-background-primary': isDisabled && !isSelected,
                 }
             )}
             innerProps={{

package/src/Tabs/Tabs.tsx

@@ -105,8 +105,9 @@ export const Tabs = ({
                     'hui-text-h5',
                     // Base styles
                     'z-[2] overflow-visible whitespace-nowrap border-b-4 border-b-transparent bg-transparent p-0 outline-none',
-                    // Focus visible styles
-                    'hui-focus-visible-outline focus:text-text-secondary focus:-outline-offset-1',
+                    // Focus visible styles. The offset is load-bearing: the base `outline-none` above
+                    // sets outline-offset: 2px, and hui-focus-visible-outline sets no offset.
+                    'hui-focus-visible-outline focus-visible:-outline-offset-1',
                     // Base state
                     'cursor-pointer text-text-secondary',
 
@@ -122,8 +123,7 @@ export const Tabs = ({
                     },
                     // Active tab styles
                     {
-                        'border-b-border-selected text-text-primary focus:text-text-primary':
-                            tab.contentId === activeTab,
+                        'border-b-border-selected text-text-primary': tab.contentId === activeTab,
                     }
                 )}
                 key={tab.contentId}

package/src/TextArea/TextArea.tsx

@@ -131,6 +131,8 @@ export const TextAreaInput = forwardRef<HTMLTextAreaElement, Props>((unfilteredP
                         'hover:border-border-hover': !formLabelProps.disabled,
                     },
                     // Focus state (when not disabled)
+                    // focus-convention: intentional — text field resting border; :focus-visible always matches a
+                    // focused text input, and the border is expected on mouse focus too (SA-07/DS-98).
                     {
                         'focus:border-border-focused': !formLabelProps.disabled,
                     },

package/src/TextInput/TextInput.tsx

@@ -105,7 +105,7 @@ export const TextInput = forwardRef<HTMLInputElement, Props>((unfilteredProps, r
         >
             <div
                 className={cn(
-                    'overflow-none box-content flex items-center gap-2xs rounded-input border border-border-secondary bg-background-primary px-xs hover:border-border-hover has-[:focus]:border-border-selected',
+                    'overflow-none box-content flex items-center gap-2xs rounded-input border border-border-secondary bg-background-primary px-xs hover:border-border-hover has-[:focus-visible]:border-border-selected',
                     {
                         '!border-border-disabled bg-background-disabled text-text-disabled': disabled,
                         'border-border-critical': hasError,

package/src/Tooltip/InfoIconTooltip.tsx

@@ -29,7 +29,7 @@ export const InfoIconTooltip = ({
     <>
         <Info
             aria-label={ariaLabel}
-            className={cn('overflow-visible focus:outline-0 focus-visible:outline-0', className)}
+            className={cn('hui-focus-visible-outline overflow-visible', className)}
             color={color}
             id={id}
             role="button"

package/src/Typography/InlineButton/InlineButton.tsx

@@ -112,10 +112,11 @@ export const InlineButton = forwardRef<HTMLButtonElement, Props>(
                 className={cn(
                     // GENERAL
                     'hui-text-body-primary inline-flex w-min cursor-pointer items-center gap-2xs whitespace-nowrap border-none bg-transparent p-0 tracking-[0.5px] outline-none',
-                    // FOCUS
-                    'focus-visible:hui-focus-visible-outline focus-visible:underline',
+                    // FOCUS — the base `outline-none` above is unvariant (0,1,0), so the bare ring
+                    // (0,2,0) still wins after de-prefixing (DS-98 Phase 0).
+                    'hui-focus-visible-outline focus-visible:underline',
                     {
-                        'focus-visible:hui-focus-visible-outline-inverse': style === 'inverse',
+                        'hui-focus-visible-outline-inverse': style === 'inverse',
                     },
                     // HOVER
                     'hover:underline',

package/src/utils/smoothScrollTo.ts

@@ -13,6 +13,15 @@ const easeInOutCubic = (t: number): number => {
  * @param targetY - The target vertical scroll position in pixels
  * @param duration - The duration of the scroll animation in milliseconds (defaults to 300ms)
  *
+ * Under `prefers-reduced-motion: reduce` this jumps straight to the target instead of easing.
+ * The preference is read once, at call time, so toggling it mid-scroll will not interrupt a
+ * scroll already in flight — deliberate, since the scroll is at most a few hundred milliseconds.
+ *
+ * The `typeof` check is required rather than defensive: jsdom does not implement `matchMedia`,
+ * so an unguarded call would throw in tests. (`window` itself is not guarded because this
+ * function already dereferences `window.scrollY` unconditionally and only runs from event
+ * handlers.)
+ *
  * @example
  * ```tsx
  * // Scroll to 500px from the top over 300ms
@@ -27,6 +36,15 @@ const easeInOutCubic = (t: number): number => {
  * ```
  */
 export const smoothScrollTo = (targetY: number, duration: number = 300): void => {
+    const prefersReducedMotion =
+        typeof window.matchMedia === 'function' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+    if (prefersReducedMotion) {
+        window.scrollTo(0, targetY);
+
+        return;
+    }
+
     const startY = window.scrollY;
     const distance = targetY - startY;
     const startTime = performance.now();

package/table.cjs

@@ -3,5 +3,5 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-const require_Table = require("./Table-CLlDragJ.cjs");
+const require_Table = require("./Table-D4UYosb1.cjs");
 exports.Table = require_Table.Table;

package/table.mjs

@@ -1,3 +1,3 @@
 'use client';
-import { t as Table } from "./Table-M-rANdMt.mjs";
+import { t as Table } from "./Table-CQGtDpvH.mjs";
 export { Table };

package/tabs.cjs

@@ -42,7 +42,7 @@ const Tabs = ({ className, contentClassName, currentTab, defaultTab, isContentSc
 	}, [isContentScrollable, checkScrollState]);
 	const renderedTabs = tabs.map((tab) => {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-			className: (0, _evolve_ui_theme_system.cn)("hui-text-h5", "z-[2] overflow-visible whitespace-nowrap border-b-4 border-b-transparent bg-transparent p-0 outline-none", "hui-focus-visible-outline focus:text-text-secondary focus:-outline-offset-1", "cursor-pointer text-text-secondary", { "hover:border-b-border-hover hover:text-link-hover": tab.contentId !== activeTab }, { "mb-2xs": isContentScrollable }, { "active:border-b-border-selected active:text-text-primary": tab.contentId !== activeTab }, { "border-b-border-selected text-text-primary focus:text-text-primary": tab.contentId === activeTab }),
+			className: (0, _evolve_ui_theme_system.cn)("hui-text-h5", "z-[2] overflow-visible whitespace-nowrap border-b-4 border-b-transparent bg-transparent p-0 outline-none", "hui-focus-visible-outline focus-visible:-outline-offset-1", "cursor-pointer text-text-secondary", { "hover:border-b-border-hover hover:text-link-hover": tab.contentId !== activeTab }, { "mb-2xs": isContentScrollable }, { "active:border-b-border-selected active:text-text-primary": tab.contentId !== activeTab }, { "border-b-border-selected text-text-primary": tab.contentId === activeTab }),
 			onClick: (e) => {
 				if (typeof e.currentTarget.scrollIntoView === "function") e.currentTarget.scrollIntoView({
 					behavior: "smooth",

package/tabs.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.cjs","names":["useHorizontalScrollFadeMixin"],"sources":["../src/Tabs/Tabs.tsx"],"sourcesContent":["import { cn, wrapVarRgb } from '@evolve.ui/theme-system';\nimport { ReactNode, useCallback, useEffect, useRef, useState } from 'react';\n\nimport { useHorizontalScrollFadeMixin } from '../mixins/horizontalScrollFadeMixin';\n\nexport type Tab = {\n    /** The content to render when this tab is selected */\n    content: ReactNode;\n    /** The id of the content to render when this tab is selected */\n    contentId: string;\n    /** The label of the tab */\n    label: string | ReactNode;\n    /** The function to call when the tab is clicked */\n    onClick?: (contentId: string) => void;\n};\n\ntype Props = {\n    className?: string;\n    contentClassName?: string;\n    isContentScrollable?: boolean;\n    /**\n     * When `true` (default), inactive tab panels stay mounted in the DOM but are visually hidden\n     * and marked `inert` so their content is not keyboard- or assistive-technology-interactive.\n     */\n    keepTabsInDOM?: boolean;\n    tabs: Tab[];\n} & (\n    | {\n          /** Used with `onTabChanged` to control tabs externally */\n          currentTab: string;\n          /** Use only if `currentTab` and `onTabChanged` are not provided */\n          defaultTab?: never;\n          /** Used with `currentTab` to control tabs externally */\n          onTabChanged: (contentId: string) => void;\n      }\n    | {\n          /** Use only if `defaultTab` is not provided. This is the contentId of the tab to be selected */\n          currentTab?: never;\n          /** Sets the default tab on first render. This is the contentId of the tab to be selected */\n          defaultTab?: string;\n          /** Use only if `defaultTab` is not provided */\n          onTabChanged?: never;\n      }\n);\n\nexport const Tabs = ({\n    className,\n    contentClassName,\n    currentTab,\n    defaultTab,\n    isContentScrollable = false,\n    keepTabsInDOM = true,\n    onTabChanged,\n    tabs,\n}: Props) => {\n    const [selectedTab, setSelectedTab] = useState(defaultTab ?? currentTab ?? tabs[0].contentId);\n    // In controlled mode, use currentTab as the source of truth; otherwise use selectedTab\n    const activeTab = currentTab !== undefined ? currentTab : selectedTab;\n    const horizontalScrollFadeProps = useHorizontalScrollFadeMixin(0);\n\n    // Create refs for each tab panel to handle scrolling\n    const tabPanelRefs = useRef<Record<string, HTMLDivElement | null>>({});\n    // Create refs for each tab button to handle scrolling into view\n    const tabButtonRefs = useRef<Record<string, HTMLButtonElement | null>>({});\n\n    // Track scroll state for gradient overlay\n    // Start with true if content is scrollable, will be updated once we measure the actual content\n    const [isScrollable, setIsScrollable] = useState(isContentScrollable);\n    const [isScrolledToBottom, setIsScrolledToBottom] = useState(false);\n\n    /**\n     * Checks if the content is scrollable and if it's scrolled to the bottom\n     * @param element - The scrollable element to check\n     */\n    const checkScrollState = useCallback((element: HTMLDivElement) => {\n        const { clientHeight, scrollHeight, scrollTop } = element;\n        const scrollable = scrollHeight > clientHeight;\n        const scrolledToBottom = scrollable ? scrollHeight - scrollTop <= clientHeight + 1 : true;\n\n        setIsScrollable(scrollable);\n        setIsScrolledToBottom(scrolledToBottom);\n    }, []);\n\n    /**\n     * Scrolls the content area to the top if isContentScrollable is true\n     * @param contentId - The content ID of the tab panel to scroll\n     */\n    const scrollToTop = useCallback(\n        (contentId: string) => {\n            if (isContentScrollable) {\n                const tabPanel = tabPanelRefs.current[contentId];\n                if (tabPanel) {\n                    tabPanel.scrollTop = 0;\n                    checkScrollState(tabPanel);\n                }\n            }\n        },\n        [isContentScrollable, checkScrollState]\n    );\n\n    const renderedTabs = tabs.map((tab) => {\n        return (\n            <button\n                className={cn(\n                    'hui-text-h5',\n                    // Base styles\n                    'z-[2] overflow-visible whitespace-nowrap border-b-4 border-b-transparent bg-transparent p-0 outline-none',\n                    // Focus visible styles\n                    'hui-focus-visible-outline focus:text-text-secondary focus:-outline-offset-1',\n                    // Base state\n                    'cursor-pointer text-text-secondary',\n\n                    // Hover state (when not active)\n                    {\n                        'hover:border-b-border-hover hover:text-link-hover': tab.contentId !== activeTab,\n                    },\n                    // Spacing adjustments - mb to create space between border and divider line\n                    { 'mb-2xs': isContentScrollable },\n                    // Active state (when not disabled)\n                    {\n                        'active:border-b-border-selected active:text-text-primary': tab.contentId !== activeTab,\n                    },\n                    // Active tab styles\n                    {\n                        'border-b-border-selected text-text-primary focus:text-text-primary':\n                            tab.contentId === activeTab,\n                    }\n                )}\n                key={tab.contentId}\n                onClick={(e) => {\n                    // Scroll the clicked tab into view FIRST, before state updates\n                    if (typeof e.currentTarget.scrollIntoView === 'function') {\n                        e.currentTarget.scrollIntoView({\n                            behavior: 'smooth',\n                            block: 'nearest',\n                            inline: 'center',\n                        });\n                    }\n\n                    setSelectedTab(tab.contentId);\n                    scrollToTop(tab.contentId);\n                    onTabChanged?.(tab.contentId);\n                    if (tab.onClick) {\n                        tab.onClick(tab.contentId);\n                    }\n                }}\n                ref={(el) => {\n                    tabButtonRefs.current[tab.contentId] = el;\n                }}\n                aria-selected={tab.contentId === activeTab}\n                role=\"tab\"\n            >\n                {tab.label}\n            </button>\n        );\n    });\n\n    const renderedTabPanels = tabs.map((tab) => {\n        const isActive = tab.contentId === activeTab;\n        const isScrollable = isContentScrollable && isActive;\n\n        const props = {\n            'aria-labelledby': tab.contentId,\n            id: tab.contentId,\n            role: 'tabpanel',\n            // Scrollable regions must be focusable for keyboard accessibility\n            ...(isScrollable && { tabIndex: 0 }),\n        };\n\n        const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {\n            if (isContentScrollable && isActive) {\n                checkScrollState(e.currentTarget);\n            }\n        };\n\n        if (keepTabsInDOM) {\n            return (\n                <div\n                    className={cn(\n                        {\n                            'absolute h-0 w-0 overflow-hidden': !isActive,\n                            'h-full overflow-y-auto': isScrollable,\n                        },\n                        contentClassName\n                    )}\n                    inert={!isActive}\n                    key={tab.contentId}\n                    onScroll={handleScroll}\n                    ref={(el) => {\n                        tabPanelRefs.current[tab.contentId] = el;\n                        if (el && isActive && isContentScrollable) {\n                            checkScrollState(el);\n                        }\n                    }}\n                    {...props}\n                >\n                    {tab.content}\n                </div>\n            );\n        }\n\n        if (!isActive) {\n            return null;\n        }\n\n        return (\n            <div\n                className={cn(\n                    {\n                        'h-full overflow-y-auto': isContentScrollable,\n                    },\n                    contentClassName\n                )}\n                key={tab.contentId}\n                onScroll={handleScroll}\n                ref={(el) => {\n                    tabPanelRefs.current[tab.contentId] = el;\n                    if (el && isContentScrollable) {\n                        checkScrollState(el);\n                    }\n                }}\n                {...props}\n            >\n                {tab.content}\n            </div>\n        );\n    });\n    // Handle controlled tabs - when currentTab prop changes externally, update internal state and scroll tab into view\n    useEffect(() => {\n        if (currentTab && currentTab !== selectedTab) {\n            setSelectedTab(currentTab);\n            scrollToTop(currentTab);\n\n            // Scroll the tab button into view when controlled externally\n            const tabButton = tabButtonRefs.current[currentTab];\n            if (tabButton && typeof tabButton.scrollIntoView === 'function') {\n                tabButton.scrollIntoView({\n                    behavior: 'smooth',\n                    block: 'nearest',\n                    inline: 'center',\n                });\n            }\n        }\n    }, [currentTab, selectedTab, scrollToTop]);\n\n    // Scroll the selected tab into view on initial render\n    // Only scroll if it's not the first tab (first tab is already visible)\n    // This is useful for bottom sheet on mobile where a non-first tab might be selected initially\n    useEffect(() => {\n        // Skip scroll if it's the first tab to prevent page jumping on initial load\n        if (selectedTab === tabs[0].contentId) {\n            return;\n        }\n\n        const tabButton = tabButtonRefs.current[selectedTab];\n        if (tabButton && typeof tabButton.scrollIntoView === 'function') {\n            tabButton.scrollIntoView({\n                behavior: 'instant',\n                block: 'nearest',\n                inline: 'center',\n            });\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []); // Only run on mount\n\n    // Check scroll state when active tab changes or content loads\n    useEffect(() => {\n        if (isContentScrollable) {\n            const activePanel = tabPanelRefs.current[activeTab];\n            if (activePanel) {\n                // Match BottomSheet opening animation duration to ensure layout is stable\n                const timer = setTimeout(() => {\n                    checkScrollState(activePanel);\n                }, 300);\n\n                return () => clearTimeout(timer);\n            }\n        }\n\n        return undefined;\n    }, [activeTab, isContentScrollable, checkScrollState, tabs]);\n\n    return (\n        <div\n            className={cn(className, {\n                'flex h-full min-h-0 flex-1 flex-col': isContentScrollable,\n            })}\n        >\n            <div\n                className=\"relative flex-shrink-0 overflow-x-clip\"\n                role=\"tablist\"\n            >\n                <div\n                    className=\"flex gap-sm overflow-x-auto xsMax:scrollbar-hide\"\n                    ref={horizontalScrollFadeProps.ref}\n                >\n                    {/* Left fade overlay */}\n                    <div\n                        className={cn(\n                            'pointer-events-none absolute left-0 top-0 z-10 w-[48px] bg-gradient-to-r from-background-primary to-transparent transition-opacity duration-300 ease-in-out',\n                            {\n                                'bottom-0': !isContentScrollable,\n                                'bottom-2xs': isContentScrollable,\n                                'opacity-0': !horizontalScrollFadeProps.shouldShowLeftFade,\n                                'opacity-100': horizontalScrollFadeProps.shouldShowLeftFade,\n                            }\n                        )}\n                    />\n\n                    {/* Right fade overlay */}\n                    <div\n                        className={cn(\n                            'pointer-events-none absolute right-0 top-0 z-10 w-[48px] bg-gradient-to-l from-background-primary to-transparent transition-opacity duration-300 ease-in-out',\n                            {\n                                'bottom-0': !isContentScrollable,\n                                'bottom-2xs': isContentScrollable,\n                                'opacity-0': !horizontalScrollFadeProps.shouldShowRightFade,\n                                'opacity-100': horizontalScrollFadeProps.shouldShowRightFade,\n                            }\n                        )}\n                    />\n\n                    {renderedTabs}\n                    <div\n                        className={cn('absolute left-0 right-0 z-[1] h-px border-b border-border-secondary', {\n                            'bottom-0': !isContentScrollable,\n                            'bottom-2xs': isContentScrollable,\n                        })}\n                        role=\"none\"\n                    />\n                </div>\n            </div>\n            <div\n                className={cn('relative', {\n                    'min-h-0 flex-grow pb-3xs': isContentScrollable,\n                })}\n            >\n                {renderedTabPanels}\n                {/* Bottom gradient overlay - shows when content is scrollable and not at bottom */}\n                {isContentScrollable && (\n                    <div\n                        className={cn(\n                            'pointer-events-none absolute bottom-0 left-0 right-0 h-xl transition-opacity duration-300 ease-in-out',\n                            {\n                                'opacity-0': isScrolledToBottom && isScrollable,\n                                'opacity-100': !isScrolledToBottom && isScrollable,\n                            }\n                        )}\n                        data-testid=\"tabs-gradient-overlay\"\n                        style={{\n                            background: `linear-gradient(to bottom, transparent, ${wrapVarRgb('--color-background-primary')})`,\n                        }}\n                    />\n                )}\n            </div>\n        </div>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"file":"tabs.cjs","names":["useHorizontalScrollFadeMixin"],"sources":["../src/Tabs/Tabs.tsx"],"sourcesContent":["import { cn, wrapVarRgb } from '@evolve.ui/theme-system';\nimport { ReactNode, useCallback, useEffect, useRef, useState } from 'react';\n\nimport { useHorizontalScrollFadeMixin } from '../mixins/horizontalScrollFadeMixin';\n\nexport type Tab = {\n    /** The content to render when this tab is selected */\n    content: ReactNode;\n    /** The id of the content to render when this tab is selected */\n    contentId: string;\n    /** The label of the tab */\n    label: string | ReactNode;\n    /** The function to call when the tab is clicked */\n    onClick?: (contentId: string) => void;\n};\n\ntype Props = {\n    className?: string;\n    contentClassName?: string;\n    isContentScrollable?: boolean;\n    /**\n     * When `true` (default), inactive tab panels stay mounted in the DOM but are visually hidden\n     * and marked `inert` so their content is not keyboard- or assistive-technology-interactive.\n     */\n    keepTabsInDOM?: boolean;\n    tabs: Tab[];\n} & (\n    | {\n          /** Used with `onTabChanged` to control tabs externally */\n          currentTab: string;\n          /** Use only if `currentTab` and `onTabChanged` are not provided */\n          defaultTab?: never;\n          /** Used with `currentTab` to control tabs externally */\n          onTabChanged: (contentId: string) => void;\n      }\n    | {\n          /** Use only if `defaultTab` is not provided. This is the contentId of the tab to be selected */\n          currentTab?: never;\n          /** Sets the default tab on first render. This is the contentId of the tab to be selected */\n          defaultTab?: string;\n          /** Use only if `defaultTab` is not provided */\n          onTabChanged?: never;\n      }\n);\n\nexport const Tabs = ({\n    className,\n    contentClassName,\n    currentTab,\n    defaultTab,\n    isContentScrollable = false,\n    keepTabsInDOM = true,\n    onTabChanged,\n    tabs,\n}: Props) => {\n    const [selectedTab, setSelectedTab] = useState(defaultTab ?? currentTab ?? tabs[0].contentId);\n    // In controlled mode, use currentTab as the source of truth; otherwise use selectedTab\n    const activeTab = currentTab !== undefined ? currentTab : selectedTab;\n    const horizontalScrollFadeProps = useHorizontalScrollFadeMixin(0);\n\n    // Create refs for each tab panel to handle scrolling\n    const tabPanelRefs = useRef<Record<string, HTMLDivElement | null>>({});\n    // Create refs for each tab button to handle scrolling into view\n    const tabButtonRefs = useRef<Record<string, HTMLButtonElement | null>>({});\n\n    // Track scroll state for gradient overlay\n    // Start with true if content is scrollable, will be updated once we measure the actual content\n    const [isScrollable, setIsScrollable] = useState(isContentScrollable);\n    const [isScrolledToBottom, setIsScrolledToBottom] = useState(false);\n\n    /**\n     * Checks if the content is scrollable and if it's scrolled to the bottom\n     * @param element - The scrollable element to check\n     */\n    const checkScrollState = useCallback((element: HTMLDivElement) => {\n        const { clientHeight, scrollHeight, scrollTop } = element;\n        const scrollable = scrollHeight > clientHeight;\n        const scrolledToBottom = scrollable ? scrollHeight - scrollTop <= clientHeight + 1 : true;\n\n        setIsScrollable(scrollable);\n        setIsScrolledToBottom(scrolledToBottom);\n    }, []);\n\n    /**\n     * Scrolls the content area to the top if isContentScrollable is true\n     * @param contentId - The content ID of the tab panel to scroll\n     */\n    const scrollToTop = useCallback(\n        (contentId: string) => {\n            if (isContentScrollable) {\n                const tabPanel = tabPanelRefs.current[contentId];\n                if (tabPanel) {\n                    tabPanel.scrollTop = 0;\n                    checkScrollState(tabPanel);\n                }\n            }\n        },\n        [isContentScrollable, checkScrollState]\n    );\n\n    const renderedTabs = tabs.map((tab) => {\n        return (\n            <button\n                className={cn(\n                    'hui-text-h5',\n                    // Base styles\n                    'z-[2] overflow-visible whitespace-nowrap border-b-4 border-b-transparent bg-transparent p-0 outline-none',\n                    // Focus visible styles. The offset is load-bearing: the base `outline-none` above\n                    // sets outline-offset: 2px, and hui-focus-visible-outline sets no offset.\n                    'hui-focus-visible-outline focus-visible:-outline-offset-1',\n                    // Base state\n                    'cursor-pointer text-text-secondary',\n\n                    // Hover state (when not active)\n                    {\n                        'hover:border-b-border-hover hover:text-link-hover': tab.contentId !== activeTab,\n                    },\n                    // Spacing adjustments - mb to create space between border and divider line\n                    { 'mb-2xs': isContentScrollable },\n                    // Active state (when not disabled)\n                    {\n                        'active:border-b-border-selected active:text-text-primary': tab.contentId !== activeTab,\n                    },\n                    // Active tab styles\n                    {\n                        'border-b-border-selected text-text-primary': tab.contentId === activeTab,\n                    }\n                )}\n                key={tab.contentId}\n                onClick={(e) => {\n                    // Scroll the clicked tab into view FIRST, before state updates\n                    if (typeof e.currentTarget.scrollIntoView === 'function') {\n                        e.currentTarget.scrollIntoView({\n                            behavior: 'smooth',\n                            block: 'nearest',\n                            inline: 'center',\n                        });\n                    }\n\n                    setSelectedTab(tab.contentId);\n                    scrollToTop(tab.contentId);\n                    onTabChanged?.(tab.contentId);\n                    if (tab.onClick) {\n                        tab.onClick(tab.contentId);\n                    }\n                }}\n                ref={(el) => {\n                    tabButtonRefs.current[tab.contentId] = el;\n                }}\n                aria-selected={tab.contentId === activeTab}\n                role=\"tab\"\n            >\n                {tab.label}\n            </button>\n        );\n    });\n\n    const renderedTabPanels = tabs.map((tab) => {\n        const isActive = tab.contentId === activeTab;\n        const isScrollable = isContentScrollable && isActive;\n\n        const props = {\n            'aria-labelledby': tab.contentId,\n            id: tab.contentId,\n            role: 'tabpanel',\n            // Scrollable regions must be focusable for keyboard accessibility\n            ...(isScrollable && { tabIndex: 0 }),\n        };\n\n        const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {\n            if (isContentScrollable && isActive) {\n                checkScrollState(e.currentTarget);\n            }\n        };\n\n        if (keepTabsInDOM) {\n            return (\n                <div\n                    className={cn(\n                        {\n                            'absolute h-0 w-0 overflow-hidden': !isActive,\n                            'h-full overflow-y-auto': isScrollable,\n                        },\n                        contentClassName\n                    )}\n                    inert={!isActive}\n                    key={tab.contentId}\n                    onScroll={handleScroll}\n                    ref={(el) => {\n                        tabPanelRefs.current[tab.contentId] = el;\n                        if (el && isActive && isContentScrollable) {\n                            checkScrollState(el);\n                        }\n                    }}\n                    {...props}\n                >\n                    {tab.content}\n                </div>\n            );\n        }\n\n        if (!isActive) {\n            return null;\n        }\n\n        return (\n            <div\n                className={cn(\n                    {\n                        'h-full overflow-y-auto': isContentScrollable,\n                    },\n                    contentClassName\n                )}\n                key={tab.contentId}\n                onScroll={handleScroll}\n                ref={(el) => {\n                    tabPanelRefs.current[tab.contentId] = el;\n                    if (el && isContentScrollable) {\n                        checkScrollState(el);\n                    }\n                }}\n                {...props}\n            >\n                {tab.content}\n            </div>\n        );\n    });\n    // Handle controlled tabs - when currentTab prop changes externally, update internal state and scroll tab into view\n    useEffect(() => {\n        if (currentTab && currentTab !== selectedTab) {\n            setSelectedTab(currentTab);\n            scrollToTop(currentTab);\n\n            // Scroll the tab button into view when controlled externally\n            const tabButton = tabButtonRefs.current[currentTab];\n            if (tabButton && typeof tabButton.scrollIntoView === 'function') {\n                tabButton.scrollIntoView({\n                    behavior: 'smooth',\n                    block: 'nearest',\n                    inline: 'center',\n                });\n            }\n        }\n    }, [currentTab, selectedTab, scrollToTop]);\n\n    // Scroll the selected tab into view on initial render\n    // Only scroll if it's not the first tab (first tab is already visible)\n    // This is useful for bottom sheet on mobile where a non-first tab might be selected initially\n    useEffect(() => {\n        // Skip scroll if it's the first tab to prevent page jumping on initial load\n        if (selectedTab === tabs[0].contentId) {\n            return;\n        }\n\n        const tabButton = tabButtonRefs.current[selectedTab];\n        if (tabButton && typeof tabButton.scrollIntoView === 'function') {\n            tabButton.scrollIntoView({\n                behavior: 'instant',\n                block: 'nearest',\n                inline: 'center',\n            });\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []); // Only run on mount\n\n    // Check scroll state when active tab changes or content loads\n    useEffect(() => {\n        if (isContentScrollable) {\n            const activePanel = tabPanelRefs.current[activeTab];\n            if (activePanel) {\n                // Match BottomSheet opening animation duration to ensure layout is stable\n                const timer = setTimeout(() => {\n                    checkScrollState(activePanel);\n                }, 300);\n\n                return () => clearTimeout(timer);\n            }\n        }\n\n        return undefined;\n    }, [activeTab, isContentScrollable, checkScrollState, tabs]);\n\n    return (\n        <div\n            className={cn(className, {\n                'flex h-full min-h-0 flex-1 flex-col': isContentScrollable,\n            })}\n        >\n            <div\n                className=\"relative flex-shrink-0 overflow-x-clip\"\n                role=\"tablist\"\n            >\n                <div\n                    className=\"flex gap-sm overflow-x-auto xsMax:scrollbar-hide\"\n                    ref={horizontalScrollFadeProps.ref}\n                >\n                    {/* Left fade overlay */}\n                    <div\n                        className={cn(\n                            'pointer-events-none absolute left-0 top-0 z-10 w-[48px] bg-gradient-to-r from-background-primary to-transparent transition-opacity duration-300 ease-in-out',\n                            {\n                                'bottom-0': !isContentScrollable,\n                                'bottom-2xs': isContentScrollable,\n                                'opacity-0': !horizontalScrollFadeProps.shouldShowLeftFade,\n                                'opacity-100': horizontalScrollFadeProps.shouldShowLeftFade,\n                            }\n                        )}\n                    />\n\n                    {/* Right fade overlay */}\n                    <div\n                        className={cn(\n                            'pointer-events-none absolute right-0 top-0 z-10 w-[48px] bg-gradient-to-l from-background-primary to-transparent transition-opacity duration-300 ease-in-out',\n                            {\n                                'bottom-0': !isContentScrollable,\n                                'bottom-2xs': isContentScrollable,\n                                'opacity-0': !horizontalScrollFadeProps.shouldShowRightFade,\n                                'opacity-100': horizontalScrollFadeProps.shouldShowRightFade,\n                            }\n                        )}\n                    />\n\n                    {renderedTabs}\n                    <div\n                        className={cn('absolute left-0 right-0 z-[1] h-px border-b border-border-secondary', {\n                            'bottom-0': !isContentScrollable,\n                            'bottom-2xs': isContentScrollable,\n                        })}\n                        role=\"none\"\n                    />\n                </div>\n            </div>\n            <div\n                className={cn('relative', {\n                    'min-h-0 flex-grow pb-3xs': isContentScrollable,\n                })}\n            >\n                {renderedTabPanels}\n                {/* Bottom gradient overlay - shows when content is scrollable and not at bottom */}\n                {isContentScrollable && (\n                    <div\n                        className={cn(\n                            'pointer-events-none absolute bottom-0 left-0 right-0 h-xl transition-opacity duration-300 ease-in-out',\n                            {\n                                'opacity-0': isScrolledToBottom && isScrollable,\n                                'opacity-100': !isScrolledToBottom && isScrollable,\n                            }\n                        )}\n                        data-testid=\"tabs-gradient-overlay\"\n                        style={{\n                            background: `linear-gradient(to bottom, transparent, ${wrapVarRgb('--color-background-primary')})`,\n                        }}\n                    />\n                )}\n            </div>\n        </div>\n    );\n};\n"],"mappings":";;;;;;;;;AA6CA,MAAa,QAAQ,EACjB,WACA,kBACA,YACA,YACA,sBAAsB,OACtB,gBAAgB,MAChB,cACA,WACS;CACT,MAAM,CAAC,aAAa,mBAAA,GAAA,MAAA,SAAA,CAA2B,cAAc,cAAc,KAAK,EAAE,CAAC,SAAS;CAE5F,MAAM,YAAY,eAAe,KAAA,IAAY,aAAa;CAC1D,MAAM,4BAA4BA,kCAAAA,6BAA6B,CAAC;CAGhE,MAAM,gBAAA,GAAA,MAAA,OAAA,CAA6D,CAAC,CAAC;CAErE,MAAM,iBAAA,GAAA,MAAA,OAAA,CAAiE,CAAC,CAAC;CAIzE,MAAM,CAAC,cAAc,oBAAA,GAAA,MAAA,SAAA,CAA4B,mBAAmB;CACpE,MAAM,CAAC,oBAAoB,0BAAA,GAAA,MAAA,SAAA,CAAkC,KAAK;;;;;CAMlE,MAAM,oBAAA,GAAA,MAAA,YAAA,EAAgC,YAA4B;EAC9D,MAAM,EAAE,cAAc,cAAc,cAAc;EAClD,MAAM,aAAa,eAAe;EAClC,MAAM,mBAAmB,aAAa,eAAe,aAAa,eAAe,IAAI;EAErF,gBAAgB,UAAU;EAC1B,sBAAsB,gBAAgB;CAC1C,GAAG,CAAC,CAAC;;;;;CAML,MAAM,eAAA,GAAA,MAAA,YAAA,EACD,cAAsB;EACnB,IAAI,qBAAqB;GACrB,MAAM,WAAW,aAAa,QAAQ;GACtC,IAAI,UAAU;IACV,SAAS,YAAY;IACrB,iBAAiB,QAAQ;GAC7B;EACJ;CACJ,GACA,CAAC,qBAAqB,gBAAgB,CAC1C;CAEA,MAAM,eAAe,KAAK,KAAK,QAAQ;EACnC,OACI,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;GACI,YAAA,GAAA,wBAAA,GAAA,CACI,eAEA,4GAGA,6DAEA,sCAGA,EACI,qDAAqD,IAAI,cAAc,UAC3E,GAEA,EAAE,UAAU,oBAAoB,GAEhC,EACI,4DAA4D,IAAI,cAAc,UAClF,GAEA,EACI,8CAA8C,IAAI,cAAc,UACpE,CACJ;GAEA,UAAU,MAAM;IAEZ,IAAI,OAAO,EAAE,cAAc,mBAAmB,YAC1C,EAAE,cAAc,eAAe;KAC3B,UAAU;KACV,OAAO;KACP,QAAQ;IACZ,CAAC;IAGL,eAAe,IAAI,SAAS;IAC5B,YAAY,IAAI,SAAS;IACzB,eAAe,IAAI,SAAS;IAC5B,IAAI,IAAI,SACJ,IAAI,QAAQ,IAAI,SAAS;GAEjC;GACA,MAAM,OAAO;IACT,cAAc,QAAQ,IAAI,aAAa;GAC3C;GACA,iBAAe,IAAI,cAAc;GACjC,MAAK;aAEJ,IAAI;EACD,GAzBC,IAAI,SAyBL;CAEhB,CAAC;CAED,MAAM,oBAAoB,KAAK,KAAK,QAAQ;EACxC,MAAM,WAAW,IAAI,cAAc;EACnC,MAAM,eAAe,uBAAuB;EAE5C,MAAM,QAAQ;GACV,mBAAmB,IAAI;GACvB,IAAI,IAAI;GACR,MAAM;GAEN,GAAI,gBAAgB,EAAE,UAAU,EAAE;EACtC;EAEA,MAAM,gBAAgB,MAAqC;GACvD,IAAI,uBAAuB,UACvB,iBAAiB,EAAE,aAAa;EAExC;EAEA,IAAI,eACA,OACI,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GACI,YAAA,GAAA,wBAAA,GAAA,CACI;IACI,oCAAoC,CAAC;IACrC,0BAA0B;GAC9B,GACA,gBACJ;GACA,OAAO,CAAC;GAER,UAAU;GACV,MAAM,OAAO;IACT,aAAa,QAAQ,IAAI,aAAa;IACtC,IAAI,MAAM,YAAY,qBAClB,iBAAiB,EAAE;GAE3B;GACA,GAAI;aAEH,IAAI;EACJ,GAXI,IAAI,SAWR;EAIb,IAAI,CAAC,UACD,OAAO;EAGX,OACI,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GACI,YAAA,GAAA,wBAAA,GAAA,CACI,EACI,0BAA0B,oBAC9B,GACA,gBACJ;GAEA,UAAU;GACV,MAAM,OAAO;IACT,aAAa,QAAQ,IAAI,aAAa;IACtC,IAAI,MAAM,qBACN,iBAAiB,EAAE;GAE3B;GACA,GAAI;aAEH,IAAI;EACJ,GAXI,IAAI,SAWR;CAEb,CAAC;CAED,CAAA,GAAA,MAAA,UAAA,OAAgB;EACZ,IAAI,cAAc,eAAe,aAAa;GAC1C,eAAe,UAAU;GACzB,YAAY,UAAU;GAGtB,MAAM,YAAY,cAAc,QAAQ;GACxC,IAAI,aAAa,OAAO,UAAU,mBAAmB,YACjD,UAAU,eAAe;IACrB,UAAU;IACV,OAAO;IACP,QAAQ;GACZ,CAAC;EAET;CACJ,GAAG;EAAC;EAAY;EAAa;CAAW,CAAC;CAKzC,CAAA,GAAA,MAAA,UAAA,OAAgB;EAEZ,IAAI,gBAAgB,KAAK,EAAE,CAAC,WACxB;EAGJ,MAAM,YAAY,cAAc,QAAQ;EACxC,IAAI,aAAa,OAAO,UAAU,mBAAmB,YACjD,UAAU,eAAe;GACrB,UAAU;GACV,OAAO;GACP,QAAQ;EACZ,CAAC;CAGT,GAAG,CAAC,CAAC;CAGL,CAAA,GAAA,MAAA,UAAA,OAAgB;EACZ,IAAI,qBAAqB;GACrB,MAAM,cAAc,aAAa,QAAQ;GACzC,IAAI,aAAa;IAEb,MAAM,QAAQ,iBAAiB;KAC3B,iBAAiB,WAAW;IAChC,GAAG,GAAG;IAEN,aAAa,aAAa,KAAK;GACnC;EACJ;CAGJ,GAAG;EAAC;EAAW;EAAqB;EAAkB;CAAI,CAAC;CAE3D,OACI,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EACI,YAAA,GAAA,wBAAA,GAAA,CAAc,WAAW,EACrB,uCAAuC,oBAC3C,CAAC;YAHL,CAKI,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GACI,WAAU;GACV,MAAK;aAEL,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;IACI,WAAU;IACV,KAAK,0BAA0B;cAFnC;KAKI,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD,EACI,YAAA,GAAA,wBAAA,GAAA,CACI,+JACA;MACI,YAAY,CAAC;MACb,cAAc;MACd,aAAa,CAAC,0BAA0B;MACxC,eAAe,0BAA0B;KAC7C,CACJ,EACH,CAAA;KAGD,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD,EACI,YAAA,GAAA,wBAAA,GAAA,CACI,gKACA;MACI,YAAY,CAAC;MACb,cAAc;MACd,aAAa,CAAC,0BAA0B;MACxC,eAAe,0BAA0B;KAC7C,CACJ,EACH,CAAA;KAEA;KACD,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;MACI,YAAA,GAAA,wBAAA,GAAA,CAAc,uEAAuE;OACjF,YAAY,CAAC;OACb,cAAc;MAClB,CAAC;MACD,MAAK;KACR,CAAA;IACA;;EACJ,CAAA,GACL,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;GACI,YAAA,GAAA,wBAAA,GAAA,CAAc,YAAY,EACtB,4BAA4B,oBAChC,CAAC;aAHL,CAKK,mBAEA,uBACG,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IACI,YAAA,GAAA,wBAAA,GAAA,CACI,yGACA;KACI,aAAa,sBAAsB;KACnC,eAAe,CAAC,sBAAsB;IAC1C,CACJ;IACA,eAAY;IACZ,OAAO,EACH,YAAY,4CAAA,GAAA,wBAAA,WAAA,CAAsD,4BAA4B,EAAE,GACpG;GACH,CAAA,CAEJ;IACJ;;AAEb"}

package/tabs.mjs

@@ -38,7 +38,7 @@ const Tabs = ({ className, contentClassName, currentTab, defaultTab, isContentSc
 	}, [isContentScrollable, checkScrollState]);
 	const renderedTabs = tabs.map((tab) => {
 		return /* @__PURE__ */ jsx("button", {
-			className: cn("hui-text-h5", "z-[2] overflow-visible whitespace-nowrap border-b-4 border-b-transparent bg-transparent p-0 outline-none", "hui-focus-visible-outline focus:text-text-secondary focus:-outline-offset-1", "cursor-pointer text-text-secondary", { "hover:border-b-border-hover hover:text-link-hover": tab.contentId !== activeTab }, { "mb-2xs": isContentScrollable }, { "active:border-b-border-selected active:text-text-primary": tab.contentId !== activeTab }, { "border-b-border-selected text-text-primary focus:text-text-primary": tab.contentId === activeTab }),
+			className: cn("hui-text-h5", "z-[2] overflow-visible whitespace-nowrap border-b-4 border-b-transparent bg-transparent p-0 outline-none", "hui-focus-visible-outline focus-visible:-outline-offset-1", "cursor-pointer text-text-secondary", { "hover:border-b-border-hover hover:text-link-hover": tab.contentId !== activeTab }, { "mb-2xs": isContentScrollable }, { "active:border-b-border-selected active:text-text-primary": tab.contentId !== activeTab }, { "border-b-border-selected text-text-primary": tab.contentId === activeTab }),
 			onClick: (e) => {
 				if (typeof e.currentTarget.scrollIntoView === "function") e.currentTarget.scrollIntoView({
 					behavior: "smooth",