reshaped 2.10.14 → 2.10.16

package/components/Tabs/TabsList.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { classNames, throttle } from "../../utilities/helpers.js";
 import useRTL from "../../hooks/useRTL.js";
-import { focusNextElement, focusPreviousElement, focusFirstElement, focusLastElement, } from "../../utilities/a11y.js";
+import { focusNextElement, focusPreviousElement, focusFirstElement, focusLastElement, } from "../../utilities/a11y/focus.js";
 import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
 import useHotkeys from "../../hooks/useHotkeys.js";
 import Button from "../Button/index.js";
@@ -23,8 +23,8 @@ const TabsList = (props) => {
     const { children, className, attributes } = props;
     const { value, setDefaultValue, itemWidth, variant, name, direction, size, selection, setSelection, elActiveRef, elPrevActiveRef, elScrollableRef, } = useTabs();
     const [rtl] = useRTL();
-    const [cutOffSide, setCutOffSide] = React.useState(null);
-    const rootClassNames = classNames(s.root, size && s[`--size-${size}`], direction && s[`--direction-${direction}`], itemWidth && s[`--item-width-${itemWidth}`], variant && s[`--variant-${variant}`], cutOffSide && s[`--cut-off-${cutOffSide}`], className);
+    const [fadeSide, setFadeSide] = React.useState(null);
+    const rootClassNames = classNames(s.root, size && s[`--size-${size}`], direction && s[`--direction-${direction}`], itemWidth && s[`--item-width-${itemWidth}`], variant && s[`--variant-${variant}`], (fadeSide === "start" || fadeSide === "both") && s["--fade-start"], (fadeSide === "end" || fadeSide === "both") && s["--fade-end"], className);
     const selectorClassNames = classNames(s.selector, selection.status === "idle" && s["--selector-hidden"], selection.status === "animated" && s["--selector-animated"]);
     const handleNextClick = () => {
         elScrollableRef.current.scrollBy({
@@ -114,19 +114,19 @@ const TabsList = (props) => {
         const updateArrowNav = () => {
             const isScrollable = elScrollable.clientWidth < elScrollable.scrollWidth;
             if (!isScrollable)
-                setCutOffSide(null);
+                setFadeSide(null);
             // scrollLeft in RTL starts from 1 instead of 0, so we compare values using this delta
             const scrollLeft = elScrollable.scrollLeft * (rtl ? -1 : 1);
             const cutOffStart = scrollLeft > 1;
             const cutOffEnd = scrollLeft + elScrollable.clientWidth < elScrollable.scrollWidth - 1;
             if (cutOffEnd && cutOffStart)
-                return setCutOffSide("both");
+                return setFadeSide("both");
             if (cutOffStart)
-                return setCutOffSide("start");
+                return setFadeSide("start");
             if (cutOffEnd)
-                return setCutOffSide("end");
+                return setFadeSide("end");
         };
-        const debouncedUpdateArrowNav = throttle(updateArrowNav, 100);
+        const debouncedUpdateArrowNav = throttle(updateArrowNav, 16);
         // Use RaF when scroll to have scrollWidth calculated correctly on the first effect
         // For example: And edge case inside the complex flexbox layout
         requestAnimationFrame(() => {
@@ -148,6 +148,6 @@ const TabsList = (props) => {
                                 "--rs-tab-selection-y": selection.top,
                                 "--rs-tab-selection-scale-x": selection.scaleX,
                                 "--rs-tab-selection-scale-y": selection.scaleY,
-                            } })] }) }), (cutOffSide === "start" || cutOffSide === "both") && (_jsx("span", { className: s.prev, children: _jsx(Button, { onClick: handlePrevClick, size: "small", icon: IconChevronLeft, rounded: true, attributes: { "aria-hidden": true, tabIndex: -1 } }) })), (cutOffSide === "end" || cutOffSide === "both") && (_jsx("span", { className: s.next, children: _jsx(Button, { onClick: handleNextClick, size: "small", icon: IconChevronRight, rounded: true, attributes: { "aria-hidden": true, tabIndex: -1 } }) }))] })));
+                            } })] }) }), (fadeSide === "start" || fadeSide === "both") && (_jsx("span", { className: s.prev, children: _jsx(Button, { onClick: handlePrevClick, size: "small", icon: IconChevronLeft, rounded: true, attributes: { "aria-hidden": true, tabIndex: -1 } }) })), (fadeSide === "end" || fadeSide === "both") && (_jsx("span", { className: s.next, children: _jsx(Button, { onClick: handleNextClick, size: "small", icon: IconChevronRight, rounded: true, attributes: { "aria-hidden": true, tabIndex: -1 } }) }))] })));
 };
 export default TabsList;

package/components/Toast/Toast.module.css

@@ -1 +1 @@
-.container{display:block;opacity:0;position:relative;transition:var(--rs-duration-medium) ease-out;transition-property:transform,height,opacity;width:100%}.container--visible{opacity:1}.container--visible .wrapper{height:calc(100% - var(--rs-unit-x2))}.container--index-0{z-index:var(--rs-z-index-raised)}.container--index-1{height:var(--rs-unit-x2)!important}.container--index-1 .wrapper{height:100%;transform:translateY(calc(var(--rs-unit-x1) * -1)) translateZ(0) scaleX(.9)}.container--index-2{height:var(--rs-unit-x2)!important}.container--index-2 .wrapper{height:100%;transform:translateY(calc(var(--rs-unit-x2) * -1)) translateZ(0) scaleX(.8)}.container--index-overflow{height:0!important}.container--index-overflow .wrapper{height:100%;opacity:0;transform:translateY(calc(var(--rs-unit-x3) * -1)) translateZ(0) scaleX(.8)}.wrapper{border-radius:var(--rs-unit-radius-medium);box-shadow:var(--rs-shadow-overlay);height:100%;margin-top:var(--rs-unit-x2);overflow:hidden;transform-origin:50% 0;transition:var(--rs-duration-medium) ease-out;transition-property:height,transform,opacity}.region,.wrapper{display:flex;flex-direction:column}.region{max-width:100%;padding:var(--rs-unit-x4);position:fixed;width:100%;z-index:var(--rs-z-index-notification)}.region--nested{position:absolute}.region--position-top{align-items:center;left:50%;top:0;transform:translateX(-50%)}.region--position-top-start{align-items:start;inset-inline-start:0;top:0}.region--position-top-end{inset-inline-end:0;top:0}.region--position-top,.region--position-top-end,.region--position-top-start{flex-direction:column-reverse}.region--position-top .wrapper,.region--position-top-end .wrapper,.region--position-top-start .wrapper{justify-content:flex-end;margin-bottom:var(--rs-unit-x2);margin-top:0;transform-origin:bottom}.region--position-top .container--index-2 .wrapper,.region--position-top-end .container--index-2 .wrapper,.region--position-top-start .container--index-2 .wrapper{transform:translateY(0) translateZ(0) scaleX(.8)}.region--position-top .container--index-overflow .wrapper,.region--position-top-end .container--index-overflow .wrapper,.region--position-top-start .container--index-overflow .wrapper{transform:translateY(var(--rs-unit-x1)) translateZ(0) scaleX(.8)}.region--position-bottom{align-items:center;bottom:0;left:50%;transform:translateX(-50%)}.region--position-bottom-start{align-items:start;bottom:0;inset-inline-start:0}.region--position-bottom-end{align-items:end;bottom:0;inset-inline-end:0}@media (--rs-viewport-m ){.region{width:360px}}
+.container{display:block;opacity:0;position:relative;transition:var(--rs-duration-medium) ease-out;transition-property:transform,height,opacity;width:100%}.container--visible{opacity:1}.container--visible .wrapper{height:calc(100% - var(--rs-unit-x2))}.container--index-0{z-index:var(--rs-z-index-raised)}.container--index-1{height:var(--rs-unit-x2)!important}.container--index-1 .wrapper{height:100%;transform:translateY(calc(var(--rs-unit-x1) * -1)) translateZ(0) scaleX(0.9)}.container--index-2{height:var(--rs-unit-x2)!important}.container--index-2 .wrapper{height:100%;transform:translateY(calc(var(--rs-unit-x2) * -1)) translateZ(0) scaleX(0.8)}.container--index-overflow{height:0!important}.container--index-overflow .wrapper{height:100%;opacity:0;transform:translateY(calc(var(--rs-unit-x3) * -1)) translateZ(0) scaleX(0.8)}.wrapper{border-radius:var(--rs-unit-radius-medium);box-shadow:var(--rs-shadow-overlay);height:100%;margin-top:var(--rs-unit-x2);overflow:hidden;transform-origin:50% 0;transition:var(--rs-duration-medium) ease-out;transition-property:height,transform,opacity}.region,.wrapper{display:flex;flex-direction:column}.region{max-width:100%;padding:var(--rs-unit-x4);position:fixed;width:100%;z-index:var(--rs-z-index-notification)}.region--nested{position:absolute}.region--position-top{align-items:center;left:50%;top:0;transform:translateX(-50%)}.region--position-top-start{align-items:start;inset-inline-start:0;top:0}.region--position-top-end{inset-inline-end:0;top:0}.region--position-top,.region--position-top-end,.region--position-top-start{flex-direction:column-reverse}.region--position-top .wrapper,.region--position-top-end .wrapper,.region--position-top-start .wrapper{justify-content:flex-end;margin-bottom:var(--rs-unit-x2);margin-top:0;transform-origin:bottom}.region--position-top .container--index-2 .wrapper,.region--position-top-end .container--index-2 .wrapper,.region--position-top-start .container--index-2 .wrapper{transform:translateY(0) translateZ(0) scaleX(0.8)}.region--position-top .container--index-overflow .wrapper,.region--position-top-end .container--index-overflow .wrapper,.region--position-top-start .container--index-overflow .wrapper{transform:translateY(var(--rs-unit-x1)) translateZ(0) scaleX(0.8)}.region--position-bottom{align-items:center;bottom:0;left:50%;transform:translateX(-50%)}.region--position-bottom-start{align-items:start;bottom:0;inset-inline-start:0}.region--position-bottom-end{align-items:end;bottom:0;inset-inline-end:0}@media (--rs-viewport-m ){.region{width:360px}}

package/components/Toast/ToastContainer.js

@@ -3,7 +3,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { classNames } from "../../utilities/helpers.js";
 import { onNextFrame } from "../../utilities/animation.js";
-import { trapFocus, isKeyboardMode } from "../../utilities/a11y.js";
+import { checkKeyboardMode } from "../../utilities/a11y/keyboardMode.js";
+import TrapFocus from "../../utilities/a11y/TrapFocus.js";
 import Toast from "./Toast.js";
 import ToastContext from "./Toast.context.js";
 import { timeouts } from "./Toast.constants.js";
@@ -15,7 +16,6 @@ const ToastContainer = (props) => {
     const [toastHeight, setToastHeight] = React.useState();
     const timeoutRef = React.useRef();
     const resizingRef = React.useRef(false);
-    const trapFocusRef = React.useRef(null);
     const wrapperRef = React.useRef(null);
     const visible = status === "entered";
     const containerClassNames = classNames(s.container, visible && s[`container--visible`], index === 0 && s[`container--index-${index}`], !inspected && (index === 1 || index === 2) && s[`container--index-${index}`], !inspected && index >= 3 && s["container--index-overflow"]);
@@ -60,15 +60,15 @@ const ToastContainer = (props) => {
     React.useEffect(() => {
         if (!wrapperRef.current)
             return;
+        const trapFocus = new TrapFocus(wrapperRef.current);
         if (visible) {
-            trapFocusRef.current = trapFocus(wrapperRef.current, {
+            trapFocus.trap({
                 includeTrigger: true,
                 mode: "content-menu",
             });
         }
-        else if (trapFocusRef.current && isKeyboardMode()) {
-            trapFocusRef.current();
-            trapFocusRef.current = null;
+        else if (checkKeyboardMode()) {
+            trapFocus.release();
         }
     }, [visible]);
     React.useEffect(() => {

package/components/Toast/ToastRegion.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { classNames } from "../../utilities/helpers.js";
-import { focusableSelector } from "../../utilities/a11y.js";
+import { focusableSelector } from "../../utilities/a11y/focus.js";
 import ToastContainer from "./ToastContainer.js";
 import ToastContext from "./Toast.context.js";
 import s from "./Toast.module.css";

package/components/_private/Flyout/Flyout.module.css

@@ -1 +1 @@
-.content{--rs-flyout-gap:2;--rs-flyout-origin-x:50%;--rs-flyout-origin-y:50%;position:absolute}.inner{opacity:0;transform:scale(.8) translateY(0);transform-origin:var(--rs-flyout-origin-x) var(--rs-flyout-origin-y)}.content.--width-trigger .inner{transform:scale(1) translateY(var(--rs-unit-x2))}.content.--position-top,.content.--position-top-end,.content.--position-top-start{--rs-flyout-origin-y:100%;padding-bottom:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-bottom,.content.--position-bottom-end,.content.--position-bottom-start{--rs-flyout-origin-y:0%;padding-top:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-bottom-start,.content.--position-top-start{--rs-flyout-origin-x:0%}.content.--position-bottom-end,.content.--position-top-end{--rs-flyout-origin-x:100%}.content.--position-start,.content.--position-start-bottom,.content.--position-start-top{--rs-flyout-origin-x:100%;padding-right:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-end,.content.--position-end-bottom,.content.--position-end-top{--rs-flyout-origin-x:0%;padding-left:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-end-top,.content.--position-start-top{--rs-flyout-origin-y:0%}.content.--position-end-bottom,.content.--position-start-bottom{--rs-flyout-origin-y:100%}.content.--visible .inner{opacity:1;transform:scale(1) translateY(0)}.content.--animated .inner{transition:var(--rs-duration-fast) var(--rs-easing-accelerate);transition-property:opacity,transform}.content.--animated.--visible .inner{transition-timing-function:var(--rs-easing-decelerate)}
+.content{--rs-flyout-gap:2;--rs-flyout-origin-x:50%;--rs-flyout-origin-y:50%;position:absolute}.inner{opacity:0;transform:scale(0.8) translateY(0);transform-origin:var(--rs-flyout-origin-x) var(--rs-flyout-origin-y)}.content.--width-trigger .inner{transform:scale(1) translateY(var(--rs-unit-x2))}.content.--position-top,.content.--position-top-end,.content.--position-top-start{--rs-flyout-origin-y:100%;padding-bottom:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-bottom,.content.--position-bottom-end,.content.--position-bottom-start{--rs-flyout-origin-y:0%;padding-top:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-bottom-start,.content.--position-top-start{--rs-flyout-origin-x:0%}.content.--position-bottom-end,.content.--position-top-end{--rs-flyout-origin-x:100%}.content.--position-start,.content.--position-start-bottom,.content.--position-start-top{--rs-flyout-origin-x:100%;padding-right:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-end,.content.--position-end-bottom,.content.--position-end-top{--rs-flyout-origin-x:0%;padding-left:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-end-top,.content.--position-start-top{--rs-flyout-origin-y:0%}.content.--position-end-bottom,.content.--position-start-bottom{--rs-flyout-origin-y:100%}.content.--visible .inner{opacity:1;transform:scale(1) translateY(0)}.content.--animated .inner{transition:var(--rs-duration-fast) var(--rs-easing-accelerate);transition-property:opacity,transform}.content.--animated.--visible .inner{transition-timing-function:var(--rs-easing-decelerate)}

package/components/_private/Flyout/Flyout.types.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import type * as G from "../../../types/global";
-import type { TrapMode } from "../../../utilities/a11y";
+import type { TrapMode } from "../../../utilities/a11y/types";
 import useFlyout, { FlyoutPosition, FlyoutWidth } from "../../../hooks/_private/useFlyout";
 export type InstanceRef = {
     open: () => void;

package/components/_private/Flyout/FlyoutControlled.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { debounce } from "../../../utilities/helpers.js";
-import { trapFocus } from "../../../utilities/a11y.js";
+import TrapFocus from "../../../utilities/a11y/TrapFocus.js";
 import * as timeouts from "../../../constants/timeouts.js";
 import useIsDismissible from "../../../hooks/_private/useIsDismissible.js";
 import useElementId from "../../../hooks/useElementId.js";
@@ -20,7 +20,7 @@ const FlyoutRoot = (props) => {
     const flyoutElRef = React.useRef(null);
     const id = useElementId(passedId);
     const timerRef = React.useRef();
-    const releaseFocusRef = React.useRef(null);
+    const trapFocusRef = React.useRef(null);
     const lockedRef = React.useRef(false);
     const lockedBlurEffects = React.useRef(false);
     const shouldReturnFocusRef = React.useRef(true);
@@ -134,21 +134,22 @@ const FlyoutRoot = (props) => {
     useIsomorphicLayoutEffect(() => {
         if (status !== "visible" || !flyoutElRef.current)
             return;
-        releaseFocusRef.current = trapFocus(flyoutElRef.current, {
+        trapFocusRef.current = new TrapFocus(flyoutElRef.current);
+        trapFocusRef.current.trap({
             mode: trapFocusMode,
             includeTrigger: triggerType === "hover" && trapFocusMode === "content-menu",
             onNavigateOutside: () => {
-                releaseFocusRef.current = null;
                 handleClose();
             },
         });
     }, [status, triggerType, handleClose, trapFocusMode]);
     React.useEffect(() => {
+        var _a;
         if (!disableHideAnimation && status !== "hidden")
             return;
         if (disableHideAnimation && status !== "idle")
             return;
-        if (releaseFocusRef.current) {
+        if ((_a = trapFocusRef.current) === null || _a === void 0 ? void 0 : _a.trapped) {
             /* Locking the popover to not open it again on trigger focus */
             if (triggerType === "hover") {
                 lockedRef.current = true;
@@ -156,10 +157,7 @@ const FlyoutRoot = (props) => {
                     lockedRef.current = false;
                 }, 100);
             }
-            releaseFocusRef.current({
-                withoutFocusReturn: !shouldReturnFocusRef.current,
-            });
-            releaseFocusRef.current = null;
+            trapFocusRef.current.release({ withoutFocusReturn: !shouldReturnFocusRef.current });
             shouldReturnFocusRef.current = true;
         }
     }, [status, triggerType, disableHideAnimation]);
@@ -167,11 +165,7 @@ const FlyoutRoot = (props) => {
      * Release focus trapping on unmount
      */
     React.useEffect(() => {
-        return () => {
-            if (releaseFocusRef.current)
-                releaseFocusRef.current();
-            releaseFocusRef.current = null;
-        };
+        return () => { var _a; return (_a = trapFocusRef.current) === null || _a === void 0 ? void 0 : _a.release(); };
     }, []);
     /**
      * Update position on resize or RTL

package/config/postcss.d.ts

@@ -22,6 +22,7 @@ export declare const getConfig: (options: {
         cssnano: {
             preset: (string | {
                 calc: boolean;
+                convertValues: boolean;
             })[];
         };
     };

package/config/postcss.js

@@ -26,7 +26,7 @@ const getConfig = (options) => {
                 files: [themeMediaCSSPath],
             },
             "postcss-custom-media": {},
-            cssnano: { preset: ["default", { calc: false }] },
+            cssnano: { preset: ["default", { calc: false, convertValues: false }] },
         },
     };
 };

package/hooks/_private/useSingletonKeyboardMode.js

@@ -1,14 +1,14 @@
 import React from "react";
-import { keyboardModeAttribute } from "../../constants/attributes.js";
+import { enableKeyboardMode, disableKeyboardMode } from "../../utilities/a11y/keyboardMode.js";
 const useSingletonKeyboardMode = () => {
     React.useEffect(() => {
         const handleKeyDown = (e) => {
             if (e.metaKey || e.altKey || e.ctrlKey)
                 return;
-            document.documentElement.setAttribute(keyboardModeAttribute, "true");
+            enableKeyboardMode();
         };
         const handleClick = () => {
-            document.documentElement.removeAttribute(keyboardModeAttribute);
+            disableKeyboardMode();
         };
         window.addEventListener("keydown", handleKeyDown);
         window.addEventListener("mousedown", handleClick);

package/hooks/useHotkeys.d.ts

@@ -1,10 +1,10 @@
 import React from "react";
-declare const useHotkeys: <Element_1 extends HTMLElement>(hotkeys: Record<string, ((e: KeyboardEvent) => void) | null>, deps?: unknown[], options?: {
-    ref?: React.RefObject<Element_1> | undefined;
-    disabled?: boolean | undefined;
-    preventDefault?: boolean | undefined;
-} | undefined) => {
-    ref: React.RefObject<Element_1>;
+declare const useHotkeys: <Element extends HTMLElement>(hotkeys: Record<string, ((e: KeyboardEvent) => void) | null>, deps?: unknown[], options?: {
+    ref?: React.RefObject<Element>;
+    disabled?: boolean;
+    preventDefault?: boolean;
+}) => {
+    ref: React.RefObject<Element>;
     checkHotkeyState: (key: string) => boolean;
 };
 export default useHotkeys;

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "reshaped",
 	"description": "Professionally crafted design system in React & Figma for building products of any scale and complexity",
-	"version": "2.10.14",
+	"version": "2.10.16",
 	"license": "MIT",
 	"email": "hello@reshaped.so",
 	"homepage": "https://reshaped.so",
@@ -73,7 +73,7 @@
 		"test:unit": "jest --config tools/jest/jest.config.js",
 		"test:size": "size-limit",
 		"lint": "yarn lint:js && yarn lint:css",
-		"lint:js": "eslint --ext .ts,.tsx src/**/*.ts src/**/*.tsx --quiet --fix",
+		"lint:js": "eslint --quiet --fix",
 		"lint:css": "stylelint 'src/**/*.css'",
 		"commit": "git-cz"
 	},
@@ -81,28 +81,28 @@
 		"defaults and not IE 11"
 	],
 	"devDependencies": {
-		"@commitlint/cli": "18.6.0",
-		"@commitlint/config-conventional": "18.6.0",
-		"@commitlint/types": "18.6.0",
-		"@size-limit/preset-big-lib": "11.0.2",
-		"@storybook/addon-a11y": "7.6.12",
-		"@storybook/addon-controls": "7.6.12",
-		"@storybook/addon-docs": "7.6.12",
-		"@storybook/addon-storysource": "7.6.12",
-		"@storybook/react": "7.6.12",
-		"@storybook/react-vite": "7.6.12",
-		"@testing-library/jest-dom": "6.4.1",
-		"@testing-library/react": "14.2.1",
+		"@commitlint/cli": "19.2.1",
+		"@commitlint/config-conventional": "19.1.0",
+		"@commitlint/types": "19.0.3",
+		"@size-limit/preset-big-lib": "11.1.2",
+		"@storybook/addon-a11y": "8.0.6",
+		"@storybook/addon-controls": "8.0.6",
+		"@storybook/addon-docs": "8.0.6",
+		"@storybook/addon-storysource": "8.0.6",
+		"@storybook/react": "8.0.6",
+		"@storybook/react-vite": "8.0.6",
+		"@testing-library/jest-dom": "6.4.2",
+		"@testing-library/react": "14.3.0",
 		"@testing-library/user-event": "14.5.2",
 		"@types/events": "3.0.3",
 		"@types/jest": "29.5.12",
-		"@types/node": "20.11.16",
-		"@types/react": "18.2.52",
-		"@types/react-dom": "18.2.18",
-		"@typescript-eslint/eslint-plugin": "6.20.0",
-		"@typescript-eslint/parser": "6.20.0",
+		"@types/node": "20.12.5",
+		"@types/react": "18.2.74",
+		"@types/react-dom": "18.2.24",
+		"@typescript-eslint/eslint-plugin": "7.6.0",
+		"@typescript-eslint/parser": "7.6.0",
 		"@vitejs/plugin-react": "4.2.1",
-		"chromatic": "10.7.1",
+		"chromatic": "11.3.0",
 		"cz-conventional-changelog": "3.3.0",
 		"eslint": "8.56.0",
 		"eslint-config-airbnb-typescript": "17.1.0",
@@ -116,24 +116,24 @@
 		"jest": "29.7.0",
 		"jest-environment-jsdom": "29.7.0",
 		"jest-matchmedia-mock": "1.1.0",
-		"lefthook": "1.6.1",
-		"postcss": "8.4.33",
+		"lefthook": "1.6.8",
+		"postcss": "8.4.38",
 		"postcss-cli": "11.0.0",
 		"postcss-each": "1.1.0",
 		"postcss-nested": "6.0.1",
 		"prettier": "3.2.5",
 		"react": "18.2.0",
 		"react-dom": "18.2.0",
-		"resolve-tspaths": "0.8.17",
-		"size-limit": "11.0.2",
-		"storybook": "7.6.12",
-		"stylelint": "16.2.1",
+		"resolve-tspaths": "0.8.18",
+		"size-limit": "11.1.2",
+		"storybook": "8.0.6",
+		"stylelint": "16.3.1",
 		"stylelint-config-prettier": "9.0.5",
 		"stylelint-config-standard": "36.0.0",
 		"ts-jest": "29.1.2",
-		"typescript": "5.3.3",
-		"vite": "5.0.12",
-		"vite-tsconfig-paths": "4.3.1"
+		"typescript": "5.4.4",
+		"vite": "5.2.8",
+		"vite-tsconfig-paths": "4.3.2"
 	},
 	"peerDependencies": {
 		"postcss": "^8",
@@ -144,8 +144,8 @@
 		"@csstools/postcss-global-data": "2.1.1",
 		"chalk": "4.1.2",
 		"commander": "11.1.0",
-		"cssnano": "6.0.3",
-		"postcss-custom-media": "10.0.2"
+		"cssnano": "6.1.2",
+		"postcss-custom-media": "10.0.4"
 	},
 	"resolutions": {
 		"jackspeak": "2.1.1"

package/utilities/a11y/TrapFocus.d.ts

@@ -0,0 +1,41 @@
+import Chain from "../Chain";
+import TrapScreenReader from "./TrapScreenReader";
+import type { FocusableElement, TrapMode } from "./types";
+type ReleaseOptions = {
+    withoutFocusReturn?: boolean;
+};
+type TrapOptions = {
+    onNavigateOutside?: () => void;
+    includeTrigger?: boolean;
+    mode?: TrapMode;
+};
+declare class TrapFocus {
+    static chain: Chain<TrapFocus>;
+    chainId?: number;
+    root: HTMLElement;
+    trigger: FocusableElement | null;
+    options: TrapOptions & {
+        pseudoFocus?: boolean;
+    };
+    trapped?: boolean;
+    screenReaderTrap: TrapScreenReader;
+    mutationObserver: MutationObserver | null;
+    constructor(root: HTMLElement);
+    /**
+     * Handle keyboard navigation while focus is trapped
+     */
+    handleKeyDown: (event: KeyboardEvent) => void;
+    addListeners: () => void;
+    removeListeners: () => void;
+    /**
+     * Trap the focus, add observer and keyboard event listeners
+     * and create a chain item
+     */
+    trap: (options?: TrapOptions) => void;
+    /**
+     * Disabled the trap focus for the element,
+     * cleanup all observers/handlers and trap for the previous element in the chain
+     */
+    release: (releaseOptions?: ReleaseOptions) => void;
+}
+export default TrapFocus;

package/utilities/a11y/TrapFocus.js

@@ -0,0 +1,127 @@
+import Chain from "../Chain.js";
+import * as keys from "../../constants/keys.js";
+import TrapScreenReader from "./TrapScreenReader.js";
+import { getActiveElement, getFocusableElements, focusElement, getFocusData } from "./focus.js";
+import { checkKeyboardMode } from "./keyboardMode.js";
+class TrapFocus {
+    constructor(root) {
+        this.trigger = null;
+        this.options = {};
+        this.mutationObserver = null;
+        /**
+         * Handle keyboard navigation while focus is trapped
+         */
+        this.handleKeyDown = (event) => {
+            if (TrapFocus.chain.tailId !== this.chainId)
+                return;
+            const { mode, onNavigateOutside, pseudoFocus, includeTrigger } = this.options;
+            let navigationMode = "tabs";
+            if (mode === "action-menu" || mode === "selection-menu")
+                navigationMode = "arrows";
+            const key = event.key;
+            const isTab = key === keys.TAB;
+            const isNextTab = isTab && !event.shiftKey;
+            const isBackTab = isTab && event.shiftKey;
+            const isUp = navigationMode === "arrows" && key === keys.UP;
+            const isDown = navigationMode === "arrows" && key === keys.DOWN;
+            const isPrev = (isBackTab && navigationMode === "tabs") || isUp;
+            const isNext = (isNextTab && navigationMode === "tabs") || isDown;
+            const isFocusedOnTrigger = getActiveElement() === this.trigger;
+            const focusData = getFocusData({
+                root: this.root,
+                target: isPrev ? "prev" : "next",
+                options: {
+                    additionalElement: includeTrigger ? this.trigger : undefined,
+                    circular: mode !== "action-menu",
+                },
+            });
+            // Release the trap when tab is used in navigation modes that support arrows
+            const hasNavigatedOutside = (isTab && navigationMode === "arrows") ||
+                (mode === "content-menu" && isTab && focusData.overflow);
+            if (hasNavigatedOutside) {
+                // Prevent shift + tab event to avoid focus moving after the trap release
+                if (isBackTab && !isFocusedOnTrigger)
+                    event.preventDefault();
+                this.release();
+                onNavigateOutside === null || onNavigateOutside === void 0 ? void 0 : onNavigateOutside();
+                return;
+            }
+            if (!isPrev && !isNext)
+                return;
+            event.preventDefault();
+            if (!focusData.el)
+                return;
+            focusElement(focusData.el, { pseudoFocus });
+        };
+        this.addListeners = () => document.addEventListener("keydown", this.handleKeyDown);
+        this.removeListeners = () => document.removeEventListener("keydown", this.handleKeyDown);
+        /**
+         * Trap the focus, add observer and keyboard event listeners
+         * and create a chain item
+         */
+        this.trap = (options = {}) => {
+            const { mode = "dialog", includeTrigger } = options;
+            const trigger = getActiveElement();
+            const focusable = getFocusableElements(this.root, {
+                additionalElement: includeTrigger ? trigger : undefined,
+            });
+            const pseudoFocus = mode === "selection-menu";
+            this.options = Object.assign(Object.assign({}, options), { pseudoFocus });
+            this.trigger = trigger;
+            this.mutationObserver = new MutationObserver(() => {
+                const currentActiveElement = getActiveElement();
+                // Focus stayed inside the wrapper, no need to refocus
+                if (this.root.contains(currentActiveElement))
+                    return;
+                const focusable = getFocusableElements(this.root, {
+                    additionalElement: includeTrigger ? trigger : undefined,
+                });
+                if (!focusable.length)
+                    return;
+                focusElement(focusable[0], { pseudoFocus });
+            });
+            this.removeListeners();
+            if (mode === "dialog")
+                this.screenReaderTrap.trap();
+            this.mutationObserver.observe(this.root, { childList: true, subtree: true });
+            if (!focusable.length)
+                return;
+            this.addListeners();
+            // Don't add back to the chain if we're traversing back
+            const tailItem = TrapFocus.chain.tailId && TrapFocus.chain.get(TrapFocus.chain.tailId);
+            if (!tailItem || this.root !== tailItem.data.root) {
+                this.chainId = TrapFocus.chain.add(this);
+                focusElement(focusable[0], { pseudoFocus });
+            }
+            this.trapped = true;
+        };
+        /**
+         * Disabled the trap focus for the element,
+         * cleanup all observers/handlers and trap for the previous element in the chain
+         */
+        this.release = (releaseOptions = {}) => {
+            var _a;
+            const { withoutFocusReturn } = releaseOptions;
+            if (!this.trapped || !this.chainId)
+                return;
+            this.trapped = false;
+            if (this.trigger) {
+                const preventScroll = withoutFocusReturn || !checkKeyboardMode();
+                this.trigger.focus({ preventScroll });
+            }
+            TrapFocus.chain.removePreviousTill(this.chainId, (item) => document.body.contains(item.data.trigger));
+            (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+            this.removeListeners();
+            this.screenReaderTrap.release();
+            const previousItem = TrapFocus.chain.tailId && TrapFocus.chain.get(TrapFocus.chain.tailId);
+            if (previousItem) {
+                const trapInstance = new TrapFocus(previousItem.data.root);
+                trapInstance.trap(previousItem.data.options);
+            }
+        };
+        this.root = root;
+        this.screenReaderTrap = new TrapScreenReader(root);
+    }
+}
+TrapFocus.chain = new Chain();
+export default TrapFocus;

package/utilities/a11y/TrapScreenReader.d.ts

@@ -0,0 +1,15 @@
+declare class TrapScreenReader {
+    root: HTMLElement;
+    /**
+     * Elements ignored by screen reader when trap is active
+     */
+    private hiddenElements;
+    constructor(root: HTMLElement);
+    /**
+     * Apply aria-hidden to all elements except the passed
+     */
+    hideSiblingsFromScreenReader: (el: HTMLElement) => void;
+    release: () => void;
+    trap: () => void;
+}
+export default TrapScreenReader;

package/utilities/a11y/TrapScreenReader.js

@@ -0,0 +1,39 @@
+class TrapScreenReader {
+    constructor(root) {
+        /**
+         * Elements ignored by screen reader when trap is active
+         */
+        this.hiddenElements = [];
+        /**
+         * Apply aria-hidden to all elements except the passed
+         */
+        this.hideSiblingsFromScreenReader = (el) => {
+            let sibling = el.parentNode && el.parentNode.firstChild;
+            while (sibling) {
+                const notCurrent = sibling !== el;
+                const isValid = sibling.nodeType === 1 && !sibling.hasAttribute("aria-hidden");
+                if (notCurrent && isValid) {
+                    sibling.setAttribute("aria-hidden", "true");
+                    this.hiddenElements.push(sibling);
+                }
+                sibling = sibling.nextSibling;
+            }
+        };
+        this.release = () => {
+            this.hiddenElements.forEach((el) => {
+                el.removeAttribute("aria-hidden");
+            });
+            this.hiddenElements = [];
+        };
+        this.trap = () => {
+            let currentEl = this.root;
+            this.release();
+            while (currentEl !== document.body) {
+                this.hideSiblingsFromScreenReader(currentEl);
+                currentEl = currentEl.parentElement;
+            }
+        };
+        this.root = root;
+    }
+}
+export default TrapScreenReader;

package/utilities/a11y/focus.d.ts

@@ -0,0 +1,24 @@
+import type { FocusableElement } from "./types";
+export declare const focusableSelector = "a,button,input:not([type=\"hidden\"]),textarea,select,details,[tabindex]:not([tabindex=\"-1\"])";
+export declare const getActiveElement: () => HTMLButtonElement;
+export declare const focusElement: (el: FocusableElement, options?: {
+    pseudoFocus?: boolean;
+}) => void;
+export declare const getFocusableElements: (rootEl: HTMLElement, options?: {
+    additionalElement?: FocusableElement | null;
+}) => FocusableElement[];
+export declare const getFocusData: (args: {
+    root: HTMLElement;
+    target: "next" | "prev" | "first" | "last";
+    options?: {
+        circular?: boolean;
+        additionalElement?: FocusableElement | null;
+    };
+}) => {
+    overflow: boolean;
+    el: FocusableElement;
+};
+export declare const focusNextElement: (root: HTMLElement) => void;
+export declare const focusPreviousElement: (root: HTMLElement) => void;
+export declare const focusFirstElement: (root: HTMLElement) => void;
+export declare const focusLastElement: (root: HTMLElement) => void;