@chayns-components/core 5.4.12 → 5.4.13-alpha.0

package/lib/cjs/components/truncation/Truncation.styles.js

@@ -3,10 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledTruncationPseudoContent = exports.StyledTruncationClampWrapper = exports.StyledTruncationClamp = exports.StyledTruncation = exports.StyledMotionTruncationContent = void 0;
+exports.StyledTruncationPseudoContent = exports.StyledTruncationClampWrapper = exports.StyledTruncationClampFocusWrapper = exports.StyledTruncationClamp = exports.StyledTruncation = exports.StyledMotionTruncationContent = void 0;
 var _react = require("motion/react");
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _truncation = require("../../types/truncation");
+var _keyboardFocusHighlighting = require("../../utils/keyboardFocusHighlighting.styles");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const StyledTruncation = exports.StyledTruncation = _styledComponents.default.div`
     position: relative;
@@ -45,8 +46,24 @@ const StyledTruncationClampWrapper = exports.StyledTruncationClampWrapper = _sty
   }
 }}
 `;
+const StyledTruncationClampFocusWrapper = exports.StyledTruncationClampFocusWrapper = _styledComponents.default.div`
+    display: inline-block;
+    border-radius: 3px;
+
+    ${({
+  $shouldShowKeyboardHighlighting
+}) => $shouldShowKeyboardHighlighting && (0, _styledComponents.css)`
+            &:focus-within {
+                transition: none;
+                ${_keyboardFocusHighlighting.keyboardFocusHighlightingRingCss};
+                color: inherit;
+            }
+        `}
+`;
 const StyledTruncationClamp = exports.StyledTruncationClamp = _styledComponents.default.a`
     cursor: pointer;
     z-index: 2;
+    display: inline-block;
+    line-height: 1.2;
 `;
 //# sourceMappingURL=Truncation.styles.js.map

package/lib/cjs/components/truncation/Truncation.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Truncation.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","_truncation","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledTruncation","exports","styled","div","StyledMotionTruncationContent","motion","StyledTruncationPseudoContent","StyledTruncationClampWrapper","$position","ClampPosition","Left","css","Middle","StyledTruncationClamp","a"],"sources":["../../../../src/components/truncation/Truncation.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport { ClampPosition } from '../../types/truncation';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledTruncation = styled.div`\n    position: relative;\n    overflow: hidden;\n`;\n\n// Fix framer-motion bug\nexport const StyledMotionTruncationContent = styled(motion.div)`\n    overflow: hidden;\n    position: relative;\n`;\n\nexport const StyledTruncationPseudoContent = styled.div`\n    visibility: hidden;\n    position: absolute;\n    width: 100%;\n`;\n\ntype StyledTruncationClampWrapperProps = WithTheme<{ $position: ClampPosition }>;\n\nexport const StyledTruncationClampWrapper = styled.div<StyledTruncationClampWrapperProps>`\n    display: flex;\n\n    ${({ $position }) => {\n        switch ($position) {\n            case ClampPosition.Left:\n                return css`\n                    justify-content: left;\n                `;\n            case ClampPosition.Middle:\n                return css`\n                    justify-content: center;\n                `;\n            default:\n                return css`\n                    justify-content: right;\n                `;\n        }\n    }}\n`;\n\nexport const StyledTruncationClamp = styled.a`\n    cursor: pointer;\n    z-index: 2;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,WAAA,GAAAH,OAAA;AAAuD,SAAAE,wBAAAE,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAJ,uBAAA,YAAAA,CAAAE,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAGhD,MAAMkB,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,GAAGE,yBAAM,CAACC,GAAG;AAC1C;AACA;AACA,CAAC;;AAED;AACO,MAAMC,6BAA6B,GAAAH,OAAA,CAAAG,6BAAA,GAAG,IAAAF,yBAAM,EAACG,aAAM,CAACF,GAAG,CAAC;AAC/D;AACA;AACA,CAAC;AAEM,MAAMG,6BAA6B,GAAAL,OAAA,CAAAK,6BAAA,GAAGJ,yBAAM,CAACC,GAAG;AACvD;AACA;AACA;AACA,CAAC;AAIM,MAAMI,4BAA4B,GAAAN,OAAA,CAAAM,4BAAA,GAAGL,yBAAM,CAACC,GAAsC;AACzF;AACA;AACA,MAAM,CAAC;EAAEK;AAAU,CAAC,KAAK;EACjB,QAAQA,SAAS;IACb,KAAKC,yBAAa,CAACC,IAAI;MACnB,OAAO,IAAAC,qBAAG;AAC1B;AACA,iBAAiB;IACL,KAAKF,yBAAa,CAACG,MAAM;MACrB,OAAO,IAAAD,qBAAG;AAC1B;AACA,iBAAiB;IACL;MACI,OAAO,IAAAA,qBAAG;AAC1B;AACA,iBAAiB;EACT;AACJ,CAAC;AACL,CAAC;AAEM,MAAME,qBAAqB,GAAAZ,OAAA,CAAAY,qBAAA,GAAGX,yBAAM,CAACY,CAAC;AAC7C;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"Truncation.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","_truncation","_keyboardFocusHighlighting","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledTruncation","exports","styled","div","StyledMotionTruncationContent","motion","StyledTruncationPseudoContent","StyledTruncationClampWrapper","$position","ClampPosition","Left","css","Middle","StyledTruncationClampFocusWrapper","$shouldShowKeyboardHighlighting","keyboardFocusHighlightingRingCss","StyledTruncationClamp","a"],"sources":["../../../../src/components/truncation/Truncation.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport { ClampPosition } from '../../types/truncation';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';\n\nexport const StyledTruncation = styled.div`\n    position: relative;\n    overflow: hidden;\n`;\n\n// Fix framer-motion bug\nexport const StyledMotionTruncationContent = styled(motion.div)`\n    overflow: hidden;\n    position: relative;\n`;\n\nexport const StyledTruncationPseudoContent = styled.div`\n    visibility: hidden;\n    position: absolute;\n    width: 100%;\n`;\n\ntype StyledTruncationClampWrapperProps = WithTheme<{ $position: ClampPosition }>;\n\nexport const StyledTruncationClampWrapper = styled.div<StyledTruncationClampWrapperProps>`\n    display: flex;\n\n    ${({ $position }) => {\n        switch ($position) {\n            case ClampPosition.Left:\n                return css`\n                    justify-content: left;\n                `;\n            case ClampPosition.Middle:\n                return css`\n                    justify-content: center;\n                `;\n            default:\n                return css`\n                    justify-content: right;\n                `;\n        }\n    }}\n`;\n\ntype StyledTruncationClampProps = {\n    $shouldShowKeyboardHighlighting: boolean;\n};\n\nexport const StyledTruncationClampFocusWrapper = styled.div<StyledTruncationClampProps>`\n    display: inline-block;\n    border-radius: 3px;\n\n    ${({ $shouldShowKeyboardHighlighting }) =>\n        $shouldShowKeyboardHighlighting &&\n        css`\n            &:focus-within {\n                transition: none;\n                ${keyboardFocusHighlightingRingCss};\n                color: inherit;\n            }\n        `}\n`;\n\nexport const StyledTruncationClamp = styled.a`\n    cursor: pointer;\n    z-index: 2;\n    display: inline-block;\n    line-height: 1.2;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,WAAA,GAAAH,OAAA;AAEA,IAAAI,0BAAA,GAAAJ,OAAA;AAAgG,SAAAE,wBAAAG,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAL,uBAAA,YAAAA,CAAAG,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAEzF,MAAMkB,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,GAAGE,yBAAM,CAACC,GAAG;AAC1C;AACA;AACA,CAAC;;AAED;AACO,MAAMC,6BAA6B,GAAAH,OAAA,CAAAG,6BAAA,GAAG,IAAAF,yBAAM,EAACG,aAAM,CAACF,GAAG,CAAC;AAC/D;AACA;AACA,CAAC;AAEM,MAAMG,6BAA6B,GAAAL,OAAA,CAAAK,6BAAA,GAAGJ,yBAAM,CAACC,GAAG;AACvD;AACA;AACA;AACA,CAAC;AAIM,MAAMI,4BAA4B,GAAAN,OAAA,CAAAM,4BAAA,GAAGL,yBAAM,CAACC,GAAsC;AACzF;AACA;AACA,MAAM,CAAC;EAAEK;AAAU,CAAC,KAAK;EACjB,QAAQA,SAAS;IACb,KAAKC,yBAAa,CAACC,IAAI;MACnB,OAAO,IAAAC,qBAAG;AAC1B;AACA,iBAAiB;IACL,KAAKF,yBAAa,CAACG,MAAM;MACrB,OAAO,IAAAD,qBAAG;AAC1B;AACA,iBAAiB;IACL;MACI,OAAO,IAAAA,qBAAG;AAC1B;AACA,iBAAiB;EACT;AACJ,CAAC;AACL,CAAC;AAMM,MAAME,iCAAiC,GAAAZ,OAAA,CAAAY,iCAAA,GAAGX,yBAAM,CAACC,GAA+B;AACvF;AACA;AACA;AACA,MAAM,CAAC;EAAEW;AAAgC,CAAC,KAClCA,+BAA+B,IAC/B,IAAAH,qBAAG;AACX;AACA;AACA,kBAAkBI,2DAAgC;AAClD;AACA;AACA,SAAS;AACT,CAAC;AAEM,MAAMC,qBAAqB,GAAAf,OAAA,CAAAe,qBAAA,GAAGd,yBAAM,CAACe,CAAC;AAC7C;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/cjs/hooks/useKeyboardFocusHighlighting.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useKeyboardFocusHighlighting = void 0;
+var _react = require("react");
+var _ColorSchemeProvider = require("../components/color-scheme-provider/ColorSchemeProvider");
+/* eslint-disable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-return */
+
+/**
+ * Tracks whether focus highlighting should be visible for keyboard navigation.
+ * Keyboard mode is enabled via Tab and reset by mouse interaction.
+ */
+const useKeyboardFocusHighlighting = isEnabledProp => {
+  const colorScheme = (0, _react.useContext)(_ColorSchemeProvider.ColorSchemeContext);
+  const contextIsEnabled = (colorScheme === null || colorScheme === void 0 ? void 0 : colorScheme.shouldEnableKeyboardHighlighting) === true;
+  const isEnabled = isEnabledProp ?? contextIsEnabled;
+  const [isKeyboardNavigation, setIsKeyboardNavigation] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    const canListen = isEnabled && typeof window !== 'undefined';
+    const enableKeyboardNavigation = () => {
+      setIsKeyboardNavigation(true);
+    };
+    const handleKeyDown = event => {
+      // Ignore pure modifier presses, but treat any real keyboard interaction as keyboard navigation.
+      if (event.ctrlKey || event.altKey || event.metaKey) {
+        return;
+      }
+      if (['Shift', 'Control', 'Alt', 'Meta'].includes(event.key)) {
+        return;
+      }
+      enableKeyboardNavigation();
+    };
+    const handleFocusIn = event => {
+      const {
+        target
+      } = event;
+
+      // Fallback for first tab-focus when the keydown was not observed.
+      if (target instanceof HTMLElement && typeof target.matches === 'function' && target.matches(':focus-visible')) {
+        enableKeyboardNavigation();
+      }
+    };
+    const disableKeyboardNavigation = () => {
+      setIsKeyboardNavigation(current => current ? false : current);
+    };
+    if (canListen) {
+      window.addEventListener('keydown', handleKeyDown);
+      window.addEventListener('focusin', handleFocusIn);
+      window.addEventListener('mousedown', disableKeyboardNavigation);
+      window.addEventListener('mousemove', disableKeyboardNavigation);
+    } else {
+      setIsKeyboardNavigation(false);
+    }
+    return () => {
+      if (canListen) {
+        window.removeEventListener('keydown', handleKeyDown);
+        window.removeEventListener('focusin', handleFocusIn);
+        window.removeEventListener('mousedown', disableKeyboardNavigation);
+        window.removeEventListener('mousemove', disableKeyboardNavigation);
+      }
+    };
+  }, [isEnabled]);
+  return Boolean(isEnabled && isKeyboardNavigation);
+};
+exports.useKeyboardFocusHighlighting = useKeyboardFocusHighlighting;
+//# sourceMappingURL=useKeyboardFocusHighlighting.js.map

package/lib/cjs/hooks/useKeyboardFocusHighlighting.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKeyboardFocusHighlighting.js","names":["_react","require","_ColorSchemeProvider","useKeyboardFocusHighlighting","isEnabledProp","colorScheme","useContext","ColorSchemeContext","contextIsEnabled","shouldEnableKeyboardHighlighting","isEnabled","isKeyboardNavigation","setIsKeyboardNavigation","useState","useEffect","canListen","window","enableKeyboardNavigation","handleKeyDown","event","ctrlKey","altKey","metaKey","includes","key","handleFocusIn","target","HTMLElement","matches","disableKeyboardNavigation","current","addEventListener","removeEventListener","Boolean","exports"],"sources":["../../../src/hooks/useKeyboardFocusHighlighting.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-return */\nimport { useContext, useEffect, useState } from 'react';\nimport {\n    ColorSchemeContext,\n    type ColorSchemeContextProps,\n} from '../components/color-scheme-provider/ColorSchemeProvider';\n\n/**\n * Tracks whether focus highlighting should be visible for keyboard navigation.\n * Keyboard mode is enabled via Tab and reset by mouse interaction.\n */\nexport const useKeyboardFocusHighlighting = (isEnabledProp?: boolean): boolean => {\n    const colorScheme = useContext<ColorSchemeContextProps | undefined>(ColorSchemeContext);\n    const contextIsEnabled: boolean = colorScheme?.shouldEnableKeyboardHighlighting === true;\n    const isEnabled: boolean = isEnabledProp ?? contextIsEnabled;\n\n    const [isKeyboardNavigation, setIsKeyboardNavigation] = useState(false);\n\n    useEffect(() => {\n        const canListen = isEnabled && typeof window !== 'undefined';\n\n        const enableKeyboardNavigation = () => {\n            setIsKeyboardNavigation(true);\n        };\n\n        const handleKeyDown = (event: KeyboardEvent) => {\n            // Ignore pure modifier presses, but treat any real keyboard interaction as keyboard navigation.\n            if (event.ctrlKey || event.altKey || event.metaKey) {\n                return;\n            }\n\n            if (['Shift', 'Control', 'Alt', 'Meta'].includes(event.key)) {\n                return;\n            }\n\n            enableKeyboardNavigation();\n        };\n\n        const handleFocusIn = (event: FocusEvent) => {\n            const { target } = event;\n\n            // Fallback for first tab-focus when the keydown was not observed.\n            if (\n                target instanceof HTMLElement &&\n                typeof target.matches === 'function' &&\n                target.matches(':focus-visible')\n            ) {\n                enableKeyboardNavigation();\n            }\n        };\n\n        const disableKeyboardNavigation = () => {\n            setIsKeyboardNavigation((current) => (current ? false : current));\n        };\n\n        if (canListen) {\n            window.addEventListener('keydown', handleKeyDown);\n            window.addEventListener('focusin', handleFocusIn);\n            window.addEventListener('mousedown', disableKeyboardNavigation);\n            window.addEventListener('mousemove', disableKeyboardNavigation);\n        } else {\n            setIsKeyboardNavigation(false);\n        }\n\n        return () => {\n            if (canListen) {\n                window.removeEventListener('keydown', handleKeyDown);\n                window.removeEventListener('focusin', handleFocusIn);\n                window.removeEventListener('mousedown', disableKeyboardNavigation);\n                window.removeEventListener('mousemove', disableKeyboardNavigation);\n            }\n        };\n    }, [isEnabled]);\n\n    return Boolean(isEnabled && isKeyboardNavigation);\n};\n"],"mappings":";;;;;;AACA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,oBAAA,GAAAD,OAAA;AAFA;;AAOA;AACA;AACA;AACA;AACO,MAAME,4BAA4B,GAAIC,aAAuB,IAAc;EAC9E,MAAMC,WAAW,GAAG,IAAAC,iBAAU,EAAsCC,uCAAkB,CAAC;EACvF,MAAMC,gBAAyB,GAAG,CAAAH,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAEI,gCAAgC,MAAK,IAAI;EACxF,MAAMC,SAAkB,GAAGN,aAAa,IAAII,gBAAgB;EAE5D,MAAM,CAACG,oBAAoB,EAAEC,uBAAuB,CAAC,GAAG,IAAAC,eAAQ,EAAC,KAAK,CAAC;EAEvE,IAAAC,gBAAS,EAAC,MAAM;IACZ,MAAMC,SAAS,GAAGL,SAAS,IAAI,OAAOM,MAAM,KAAK,WAAW;IAE5D,MAAMC,wBAAwB,GAAGA,CAAA,KAAM;MACnCL,uBAAuB,CAAC,IAAI,CAAC;IACjC,CAAC;IAED,MAAMM,aAAa,GAAIC,KAAoB,IAAK;MAC5C;MACA,IAAIA,KAAK,CAACC,OAAO,IAAID,KAAK,CAACE,MAAM,IAAIF,KAAK,CAACG,OAAO,EAAE;QAChD;MACJ;MAEA,IAAI,CAAC,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,CAAC,CAACC,QAAQ,CAACJ,KAAK,CAACK,GAAG,CAAC,EAAE;QACzD;MACJ;MAEAP,wBAAwB,CAAC,CAAC;IAC9B,CAAC;IAED,MAAMQ,aAAa,GAAIN,KAAiB,IAAK;MACzC,MAAM;QAAEO;MAAO,CAAC,GAAGP,KAAK;;MAExB;MACA,IACIO,MAAM,YAAYC,WAAW,IAC7B,OAAOD,MAAM,CAACE,OAAO,KAAK,UAAU,IACpCF,MAAM,CAACE,OAAO,CAAC,gBAAgB,CAAC,EAClC;QACEX,wBAAwB,CAAC,CAAC;MAC9B;IACJ,CAAC;IAED,MAAMY,yBAAyB,GAAGA,CAAA,KAAM;MACpCjB,uBAAuB,CAAEkB,OAAO,IAAMA,OAAO,GAAG,KAAK,GAAGA,OAAQ,CAAC;IACrE,CAAC;IAED,IAAIf,SAAS,EAAE;MACXC,MAAM,CAACe,gBAAgB,CAAC,SAAS,EAAEb,aAAa,CAAC;MACjDF,MAAM,CAACe,gBAAgB,CAAC,SAAS,EAAEN,aAAa,CAAC;MACjDT,MAAM,CAACe,gBAAgB,CAAC,WAAW,EAAEF,yBAAyB,CAAC;MAC/Db,MAAM,CAACe,gBAAgB,CAAC,WAAW,EAAEF,yBAAyB,CAAC;IACnE,CAAC,MAAM;MACHjB,uBAAuB,CAAC,KAAK,CAAC;IAClC;IAEA,OAAO,MAAM;MACT,IAAIG,SAAS,EAAE;QACXC,MAAM,CAACgB,mBAAmB,CAAC,SAAS,EAAEd,aAAa,CAAC;QACpDF,MAAM,CAACgB,mBAAmB,CAAC,SAAS,EAAEP,aAAa,CAAC;QACpDT,MAAM,CAACgB,mBAAmB,CAAC,WAAW,EAAEH,yBAAyB,CAAC;QAClEb,MAAM,CAACgB,mBAAmB,CAAC,WAAW,EAAEH,yBAAyB,CAAC;MACtE;IACJ,CAAC;EACL,CAAC,EAAE,CAACnB,SAAS,CAAC,CAAC;EAEf,OAAOuB,OAAO,CAACvB,SAAS,IAAIC,oBAAoB,CAAC;AACrD,CAAC;AAACuB,OAAA,CAAA/B,4BAAA,GAAAA,4BAAA","ignoreList":[]}

package/lib/cjs/utils/file.js.map

@@ -1 +1 @@
-{"version":3,"file":"file.js","names":["hasDuplicate","items","newItem","comparator","some","item","exports","filterDuplicateFile","files","newFile","a","b","name","size","filterDuplicateFileUrls","getHumanSize","bytes","FILE_SIZE_UNITS","unitIndex","Math","round","toString","replace","isValidFileType","types","file","allowedTypesArray","split","map","type","trim","fileType","endsWith","baseType","slice","startsWith","MIME_TYPE_MAPPING","getIconByMimeType","mimeType","matchedType","Object","keys","find"],"sources":["../../../src/utils/file.ts"],"sourcesContent":["import { UploadedFile } from '../components/file-select/FileSelect';\n\nexport const hasDuplicate = <T>(\n    items: T[],\n    newItem: T,\n    comparator: (a: T, b: T) => boolean,\n): boolean => items.some((item) => comparator(item, newItem));\n\ninterface FilerDuplicateFileOptions {\n    files: File[];\n    newFile: File;\n}\n\nexport const filterDuplicateFile = ({ files, newFile }: FilerDuplicateFileOptions) =>\n    hasDuplicate(files, newFile, (a, b) => a.name === b.name && a.size === b.size);\n\ninterface FilterDuplicateFileUrlsOptions {\n    files: UploadedFile[];\n    newFile: UploadedFile;\n}\n\nexport const filterDuplicateFileUrls = ({ files, newFile }: FilterDuplicateFileUrlsOptions) =>\n    hasDuplicate(files, newFile, (a, b) => a === b);\n\nexport const getHumanSize = (bytes: number): string => {\n    const FILE_SIZE_UNITS = ['B', 'KB', 'MB', 'GB', 'TB', 'PB'];\n    let size = bytes || 0;\n    let unitIndex = 0;\n\n    while (size >= 1024) {\n        size /= 1024;\n        unitIndex += 1;\n    }\n\n    size = Math.round(size * 10) / 10;\n\n    return `${size.toString().replace('.', ',')} ${FILE_SIZE_UNITS[unitIndex] ?? ''}`;\n};\n\ninterface IsValidFileTypeOptions {\n    file: File;\n    types: string;\n}\n\nexport const isValidFileType = ({ types, file }: IsValidFileTypeOptions) => {\n    const allowedTypesArray = types.split(',').map((type) => type.trim());\n    const fileType = file.type;\n\n    return allowedTypesArray.some((type) => {\n        if (type.endsWith('/*')) {\n            const baseType = type.slice(0, -2); // remove '/*'\n            return fileType.startsWith(baseType);\n        }\n        return fileType === type;\n    });\n};\n\nexport const MIME_TYPE_MAPPING: Record<string, string> = {\n    // Haupttypen\n    'application/pdf': 'fa fa-file-pdf',\n    'application/zip': 'fa fa-file-archive',\n    'application/msword': 'fa fa-file-word',\n    'application/vnd.ms-excel': 'fa fa-file-excel',\n    // Typen mit Wildcards\n    'application/vnd.openxmlformats-officedocument.': 'fa fa-file-word',\n    'application/x-': 'fa fa-file-archive',\n    // Addiere nur spezifische Fälle\n    'text/pdf': 'fa fa-file-pdf',\n};\n\nexport const getIconByMimeType = (mimeType?: string): string => {\n    const matchedType = Object.keys(MIME_TYPE_MAPPING).find((type) => mimeType?.startsWith(type));\n    return MIME_TYPE_MAPPING[matchedType!] || 'fa fa-file';\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"file.js","names":["hasDuplicate","items","newItem","comparator","some","item","exports","filterDuplicateFile","files","newFile","a","b","name","size","filterDuplicateFileUrls","getHumanSize","bytes","FILE_SIZE_UNITS","unitIndex","Math","round","toString","replace","isValidFileType","types","file","allowedTypesArray","split","map","type","trim","fileType","endsWith","baseType","slice","startsWith","MIME_TYPE_MAPPING","getIconByMimeType","mimeType","matchedType","Object","keys","find"],"sources":["../../../src/utils/file.ts"],"sourcesContent":["import type { UploadedFile } from '../components/file-select/FileSelect';\n\nexport const hasDuplicate = <T>(\n    items: T[],\n    newItem: T,\n    comparator: (a: T, b: T) => boolean,\n): boolean => items.some((item) => comparator(item, newItem));\n\ninterface FilerDuplicateFileOptions {\n    files: File[];\n    newFile: File;\n}\n\nexport const filterDuplicateFile = ({ files, newFile }: FilerDuplicateFileOptions) =>\n    hasDuplicate(files, newFile, (a, b) => a.name === b.name && a.size === b.size);\n\ninterface FilterDuplicateFileUrlsOptions {\n    files: UploadedFile[];\n    newFile: UploadedFile;\n}\n\nexport const filterDuplicateFileUrls = ({ files, newFile }: FilterDuplicateFileUrlsOptions) =>\n    hasDuplicate(files, newFile, (a, b) => a === b);\n\nexport const getHumanSize = (bytes: number): string => {\n    const FILE_SIZE_UNITS = ['B', 'KB', 'MB', 'GB', 'TB', 'PB'];\n    let size = bytes || 0;\n    let unitIndex = 0;\n\n    while (size >= 1024) {\n        size /= 1024;\n        unitIndex += 1;\n    }\n\n    size = Math.round(size * 10) / 10;\n\n    return `${size.toString().replace('.', ',')} ${FILE_SIZE_UNITS[unitIndex] ?? ''}`;\n};\n\ninterface IsValidFileTypeOptions {\n    file: File;\n    types: string;\n}\n\nexport const isValidFileType = ({ types, file }: IsValidFileTypeOptions) => {\n    const allowedTypesArray = types.split(',').map((type) => type.trim());\n    const fileType = file.type;\n\n    return allowedTypesArray.some((type) => {\n        if (type.endsWith('/*')) {\n            const baseType = type.slice(0, -2); // remove '/*'\n            return fileType.startsWith(baseType);\n        }\n        return fileType === type;\n    });\n};\n\nexport const MIME_TYPE_MAPPING: Record<string, string> = {\n    // Haupttypen\n    'application/pdf': 'fa fa-file-pdf',\n    'application/zip': 'fa fa-file-archive',\n    'application/msword': 'fa fa-file-word',\n    'application/vnd.ms-excel': 'fa fa-file-excel',\n    // Typen mit Wildcards\n    'application/vnd.openxmlformats-officedocument.': 'fa fa-file-word',\n    'application/x-': 'fa fa-file-archive',\n    // Addiere nur spezifische Fälle\n    'text/pdf': 'fa fa-file-pdf',\n};\n\nexport const getIconByMimeType = (mimeType?: string): string => {\n    const matchedType = Object.keys(MIME_TYPE_MAPPING).find((type) => mimeType?.startsWith(type));\n    return MIME_TYPE_MAPPING[matchedType!] || 'fa fa-file';\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/utils/keyboardFocusHighlighting.styles.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.keyboardFocusHighlightingRingCss = exports.keyboardFocusHighlightingCircleRingCss = void 0;
+var _styledComponents = require("styled-components");
+/**
+ * Shared focus ring for components with keyboard-only highlighting.
+ * Apply this only when keyboard highlighting is enabled/active.
+ */
+const keyboardFocusHighlightingRingCss = exports.keyboardFocusHighlightingRingCss = (0, _styledComponents.css)`
+    outline: solid 2px color-mix(in srgb, white 70%, transparent);
+    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.3);
+    border-radius: 3px;
+    outline-offset: 1px;
+`;
+
+/**
+ * Circular focus ring variant for round controls (e.g. RadioButton).
+ */
+const keyboardFocusHighlightingCircleRingCss = exports.keyboardFocusHighlightingCircleRingCss = (0, _styledComponents.css)`
+    outline: solid 2px color-mix(in srgb, white 70%, transparent);
+    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.3);
+    border-radius: 50%;
+    outline-offset: 1px;
+    color: white;
+`;
+//# sourceMappingURL=keyboardFocusHighlighting.styles.js.map

package/lib/cjs/utils/keyboardFocusHighlighting.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboardFocusHighlighting.styles.js","names":["_styledComponents","require","keyboardFocusHighlightingRingCss","exports","css","keyboardFocusHighlightingCircleRingCss"],"sources":["../../../src/utils/keyboardFocusHighlighting.styles.ts"],"sourcesContent":["import { css } from 'styled-components';\n\n/**\n * Shared focus ring for components with keyboard-only highlighting.\n * Apply this only when keyboard highlighting is enabled/active.\n */\nexport const keyboardFocusHighlightingRingCss = css`\n    outline: solid 2px color-mix(in srgb, white 70%, transparent);\n    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.3);\n    border-radius: 3px;\n    outline-offset: 1px;\n`;\n\n/**\n * Circular focus ring variant for round controls (e.g. RadioButton).\n */\nexport const keyboardFocusHighlightingCircleRingCss = css`\n    outline: solid 2px color-mix(in srgb, white 70%, transparent);\n    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.3);\n    border-radius: 50%;\n    outline-offset: 1px;\n    color: white;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,OAAA;AAEA;AACA;AACA;AACA;AACO,MAAMC,gCAAgC,GAAAC,OAAA,CAAAD,gCAAA,GAAG,IAAAE,qBAAG;AACnD;AACA;AACA;AACA;AACA,CAAC;;AAED;AACA;AACA;AACO,MAAMC,sCAAsC,GAAAF,OAAA,CAAAE,sCAAA,GAAG,IAAAD,qBAAG;AACzD;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/cjs/utils/searchBox.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.searchList = exports.getCurrentGroupName = void 0;
+exports.sortSearchBoxItems = exports.searchList = exports.getCurrentGroupName = void 0;
 const surroundWithBTag = (text, startIndex, length) => {
   const before = text.substring(0, startIndex);
   const highlighted = text.substring(startIndex, startIndex + length);
@@ -44,6 +44,24 @@ const getCurrentGroupName = element => {
   return currentGroupName;
 };
 exports.getCurrentGroupName = getCurrentGroupName;
+const sortSearchBoxItems = ({
+  searchString,
+  items
+}) => {
+  const lowercaseSearchString = searchString.toLowerCase();
+  return [...items].sort((a, b) => {
+    const aStartsWithSearchString = a.text.toLowerCase().startsWith(lowercaseSearchString);
+    const bStartsWithSearchString = b.text.toLowerCase().startsWith(lowercaseSearchString);
+    if (aStartsWithSearchString && !bStartsWithSearchString) {
+      return -1;
+    }
+    if (!aStartsWithSearchString && bStartsWithSearchString) {
+      return 1;
+    }
+    return a.text.localeCompare(b.text);
+  });
+};
+exports.sortSearchBoxItems = sortSearchBoxItems;
 const searchList = ({
   searchString,
   items
@@ -65,18 +83,10 @@ const searchList = ({
       }
     }
   });
-  matchingItems.sort((a, b) => {
-    const aStartsWithSearchString = a.text.toLowerCase().startsWith(lowercaseSearchString);
-    const bStartsWithSearchString = b.text.toLowerCase().startsWith(lowercaseSearchString);
-    if (aStartsWithSearchString && !bStartsWithSearchString) {
-      return -1;
-    }
-    if (!aStartsWithSearchString && bStartsWithSearchString) {
-      return 1;
-    }
-    return a.text.localeCompare(b.text);
+  return sortSearchBoxItems({
+    items: matchingItems,
+    searchString
   });
-  return matchingItems;
 };
 exports.searchList = searchList;
 //# sourceMappingURL=searchBox.js.map

package/lib/cjs/utils/searchBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"searchBox.js","names":["surroundWithBTag","text","startIndex","length","before","substring","highlighted","after","getCurrentGroupName","element","hasChildrenFound","currentGroupName","top","parentTop","getBoundingClientRect","children","Array","from","forEach","child","y","childrenY","height","childrenHeight","id","sum","currentGroup","startsWith","nummer","split","pop","exports","searchList","searchString","items","matchingItems","lowercaseSearchString","toLowerCase","item","lowercaseText","includes","push","indexOf","highlightedText","sort","a","b","aStartsWithSearchString","bStartsWithSearchString","localeCompare"],"sources":["../../../src/utils/searchBox.ts"],"sourcesContent":["import type { ISearchBoxItem } from '../types/searchBox';\n\nconst surroundWithBTag = (text: string, startIndex: number, length: number) => {\n    const before = text.substring(0, startIndex);\n    const highlighted = text.substring(startIndex, startIndex + length);\n    const after = text.substring(startIndex + length);\n\n    return `${before}<b>${highlighted}</b>${after}`;\n};\n\nexport const getCurrentGroupName = (element: HTMLElement) => {\n    let hasChildrenFound = false;\n    let currentGroupName = '';\n\n    const { top: parentTop } = element.getBoundingClientRect();\n    const { children } = element;\n\n    Array.from(children).forEach((child) => {\n        if (hasChildrenFound) {\n            return;\n        }\n\n        const { y: childrenY, height: childrenHeight } = child.getBoundingClientRect();\n        const { id } = child;\n\n        const sum = childrenY + childrenHeight - parentTop;\n\n        if (sum >= 0) {\n            hasChildrenFound = true;\n            let currentGroup = id;\n\n            if (id.startsWith('search-box-item__')) {\n                const nummer = id.split('__')[1];\n                currentGroup = nummer?.split('_').pop() ?? '';\n            }\n\n            currentGroupName = currentGroup;\n        }\n    });\n\n    return currentGroupName;\n};\n\ninterface SearchListOptions {\n    items: ISearchBoxItem[];\n    searchString: string;\n}\n\nexport const searchList = ({ searchString, items }: SearchListOptions) => {\n    const matchingItems: ISearchBoxItem[] = [];\n\n    const lowercaseSearchString = searchString.toLowerCase();\n\n    items.forEach((item) => {\n        const lowercaseText = item.text.toLowerCase();\n\n        if (lowercaseText.includes(lowercaseSearchString)) {\n            if (searchString === '') {\n                matchingItems.push(item);\n            } else {\n                const startIndex = lowercaseText.indexOf(lowercaseSearchString);\n                const highlightedText = surroundWithBTag(\n                    item.text,\n                    startIndex,\n                    searchString.length,\n                );\n                matchingItems.push({ ...item, text: highlightedText });\n            }\n        }\n    });\n\n    matchingItems.sort((a, b) => {\n        const aStartsWithSearchString = a.text.toLowerCase().startsWith(lowercaseSearchString);\n        const bStartsWithSearchString = b.text.toLowerCase().startsWith(lowercaseSearchString);\n\n        if (aStartsWithSearchString && !bStartsWithSearchString) {\n            return -1;\n        }\n        if (!aStartsWithSearchString && bStartsWithSearchString) {\n            return 1;\n        }\n        return a.text.localeCompare(b.text);\n    });\n\n    return matchingItems;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"searchBox.js","names":["surroundWithBTag","text","startIndex","length","before","substring","highlighted","after","getCurrentGroupName","element","hasChildrenFound","currentGroupName","top","parentTop","getBoundingClientRect","children","Array","from","forEach","child","y","childrenY","height","childrenHeight","id","sum","currentGroup","startsWith","nummer","split","pop","exports","sortSearchBoxItems","searchString","items","lowercaseSearchString","toLowerCase","sort","a","b","aStartsWithSearchString","bStartsWithSearchString","localeCompare","searchList","matchingItems","item","lowercaseText","includes","push","indexOf","highlightedText"],"sources":["../../../src/utils/searchBox.ts"],"sourcesContent":["import type { ISearchBoxItem } from '../types/searchBox';\n\nconst surroundWithBTag = (text: string, startIndex: number, length: number) => {\n    const before = text.substring(0, startIndex);\n    const highlighted = text.substring(startIndex, startIndex + length);\n    const after = text.substring(startIndex + length);\n\n    return `${before}<b>${highlighted}</b>${after}`;\n};\n\nexport const getCurrentGroupName = (element: HTMLElement) => {\n    let hasChildrenFound = false;\n    let currentGroupName = '';\n\n    const { top: parentTop } = element.getBoundingClientRect();\n    const { children } = element;\n\n    Array.from(children).forEach((child) => {\n        if (hasChildrenFound) {\n            return;\n        }\n\n        const { y: childrenY, height: childrenHeight } = child.getBoundingClientRect();\n        const { id } = child;\n\n        const sum = childrenY + childrenHeight - parentTop;\n\n        if (sum >= 0) {\n            hasChildrenFound = true;\n            let currentGroup = id;\n\n            if (id.startsWith('search-box-item__')) {\n                const nummer = id.split('__')[1];\n                currentGroup = nummer?.split('_').pop() ?? '';\n            }\n\n            currentGroupName = currentGroup;\n        }\n    });\n\n    return currentGroupName;\n};\n\ninterface SearchListOptions {\n    items: ISearchBoxItem[];\n    searchString: string;\n}\n\nexport const sortSearchBoxItems = ({ searchString, items }: SearchListOptions) => {\n    const lowercaseSearchString = searchString.toLowerCase();\n\n    return [...items].sort((a, b) => {\n        const aStartsWithSearchString = a.text.toLowerCase().startsWith(lowercaseSearchString);\n        const bStartsWithSearchString = b.text.toLowerCase().startsWith(lowercaseSearchString);\n\n        if (aStartsWithSearchString && !bStartsWithSearchString) {\n            return -1;\n        }\n        if (!aStartsWithSearchString && bStartsWithSearchString) {\n            return 1;\n        }\n        return a.text.localeCompare(b.text);\n    });\n};\n\nexport const searchList = ({ searchString, items }: SearchListOptions) => {\n    const matchingItems: ISearchBoxItem[] = [];\n\n    const lowercaseSearchString = searchString.toLowerCase();\n\n    items.forEach((item) => {\n        const lowercaseText = item.text.toLowerCase();\n\n        if (lowercaseText.includes(lowercaseSearchString)) {\n            if (searchString === '') {\n                matchingItems.push(item);\n            } else {\n                const startIndex = lowercaseText.indexOf(lowercaseSearchString);\n                const highlightedText = surroundWithBTag(\n                    item.text,\n                    startIndex,\n                    searchString.length,\n                );\n                matchingItems.push({ ...item, text: highlightedText });\n            }\n        }\n    });\n\n    return sortSearchBoxItems({ items: matchingItems, searchString });\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/accordion/Accordion.js

@@ -1,7 +1,9 @@
 import { AnimatePresence, MotionConfig } from 'motion/react';
 import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useUuid } from '../../hooks/uuid';
+import { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';
 import { AreaContext } from '../area-provider/AreaContextProvider';
+import { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';
 import AccordionBody from './accordion-body/AccordionBody';
 import { AccordionGroupContext } from './accordion-group/AccordionGroup';
 import AccordionHead from './accordion-head/AccordionHead';
@@ -41,14 +43,19 @@ const Accordion = ({
   shouldSkipAnimation: shouldSkipAnimationProp = false,
   colors,
   shouldIndex = false,
-  onBodyAnimationComplete
+  onBodyAnimationComplete,
+  shouldEnableKeyboardHighlighting
 }) => {
   const {
     isWrapped: groupIsWrapped,
     openAccordionUuid,
     accordionGroupUuid,
     accordionUuids,
-    updateOpenAccordionUuid
+    updateOpenAccordionUuid,
+    activeAccordionUuid,
+    updateActiveAccordionUuid,
+    registerAccordionUuid,
+    unregisterAccordionUuid
   } = useContext(AccordionGroupContext);
   const {
     isWrapped: isParentWrapped
@@ -56,8 +63,11 @@ const Accordion = ({
   const {
     isWrapped: contextIsWrapped
   } = useContext(AccordionWrappedContext);
+  const colorScheme = useColorScheme();
+  const shouldEnableKeyboardHighlightingEffective = shouldEnableKeyboardHighlighting ?? colorScheme?.shouldEnableKeyboardHighlighting ?? false;
   const isWrapped = useMemo(() => groupIsWrapped ?? contextIsWrapped, [contextIsWrapped, groupIsWrapped]);
   const [isAccordionOpen, setIsAccordionOpen] = useState(isDefaultOpen ?? isOpened);
+  const [isGroupFocusWithin, setIsGroupFocusWithin] = useState(false);
   const uuid = useUuid();
   const isInitialRenderRef = useRef(true);
   const initialRenderSkipRef = useInitialRenderRef(true);
@@ -67,6 +77,18 @@ const Accordion = ({
   const isOpenRef = useRef(isOpen);
   const onCloseRef = useRef(onClose);
   const onOpenRef = useRef(onOpen);
+  const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlightingEffective);
+  const isKeyboardFocusable = !isDisabled && (shouldIndex || shouldEnableKeyboardHighlightingEffective);
+  const isInKeyboardNavigationGroup = isKeyboardFocusable && typeof updateActiveAccordionUuid === 'function' && typeof accordionGroupUuid === 'string';
+  useEffect(() => {
+    if (typeof accordionGroupUuid === 'string' && typeof registerAccordionUuid === 'function' && typeof unregisterAccordionUuid === 'function') {
+      registerAccordionUuid(uuid);
+      return () => {
+        unregisterAccordionUuid(uuid);
+      };
+    }
+    return undefined;
+  }, [accordionGroupUuid, registerAccordionUuid, unregisterAccordionUuid, uuid]);
   const isLastAccordion = useMemo(() => accordionUuids ? accordionUuids[accordionUuids.length - 1] === uuid : false, [accordionUuids, uuid]);
   useEffect(() => {
     isOpenRef.current = isOpen;
@@ -77,11 +99,14 @@ const Accordion = ({
     if (isDisabled) {
       return;
     }
+    if (isKeyboardFocusable && typeof updateActiveAccordionUuid === 'function') {
+      updateActiveAccordionUuid(uuid);
+    }
     if (typeof updateOpenAccordionUuid === 'function') {
       updateOpenAccordionUuid(uuid);
     }
     setIsAccordionOpen(currentIsAccordionOpen => !currentIsAccordionOpen);
-  }, [isDisabled, updateOpenAccordionUuid, uuid]);
+  }, [isDisabled, isKeyboardFocusable, updateActiveAccordionUuid, updateOpenAccordionUuid, uuid]);
   useEffect(() => {
     if (isDisabled && isOpen) {
       if (typeof updateOpenAccordionUuid === 'function') {
@@ -145,6 +170,75 @@ const Accordion = ({
       opacity: 0
     };
   }, [isOpen, shouldSkipAnimation]);
+  const tabIndex = useMemo(() => isKeyboardFocusable ? 0 : -1, [isKeyboardFocusable]);
+  const handleKeyDown = useCallback(e => {
+    const isCurrentAccordionTarget = e.currentTarget === e.target;
+    if (isCurrentAccordionTarget && isInKeyboardNavigationGroup && accordionUuids?.length && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
+      const currentIndex = accordionUuids.indexOf(uuid);
+      if (currentIndex !== -1) {
+        const nextIndex = e.key === 'ArrowDown' ? (currentIndex + 1) % accordionUuids.length : (currentIndex - 1 + accordionUuids.length) % accordionUuids.length;
+        const nextAccordionUuid = accordionUuids[nextIndex];
+        if (nextAccordionUuid && nextAccordionUuid !== uuid) {
+          const nextAccordionElement = document.querySelector(`[data-uuid="${accordionGroupUuid}---${nextAccordionUuid}"]`);
+          if (nextAccordionElement) {
+            updateActiveAccordionUuid(nextAccordionUuid);
+            nextAccordionElement.focus();
+            return;
+          }
+        }
+      }
+    }
+    if (isCurrentAccordionTarget && (e.key === 'Enter' || e.key === ' ') && isKeyboardFocusable) {
+      handleHeadClick();
+    }
+    if (isCurrentAccordionTarget && e.key === 'ArrowRight' && isKeyboardFocusable && !isOpen) {
+      e.preventDefault();
+      handleHeadClick();
+    }
+    if (isCurrentAccordionTarget && (e.key === 'Escape' || e.key === 'ArrowLeft')) {
+      if (isOpen && isKeyboardFocusable) {
+        e.preventDefault();
+        handleHeadClick();
+        return;
+      }
+      if (isInKeyboardNavigationGroup && typeof updateActiveAccordionUuid === 'function') {
+        e.preventDefault();
+        updateActiveAccordionUuid(undefined);
+        let parentAccordion = e.currentTarget.parentElement?.closest('.beta-chayns-accordion');
+        while (parentAccordion) {
+          const parentGroupId = parentAccordion.getAttribute('data-uuid')?.split('---')[0];
+          if (parentGroupId !== accordionGroupUuid) {
+            parentAccordion.focus();
+            break;
+          }
+          parentAccordion = parentAccordion.parentElement?.closest('.beta-chayns-accordion');
+        }
+      }
+    }
+  }, [accordionGroupUuid, accordionUuids, handleHeadClick, isInKeyboardNavigationGroup, isKeyboardFocusable, isOpen, updateActiveAccordionUuid, uuid]);
+  const handleFocus = useCallback(e => {
+    if (e.currentTarget === e.target && isInKeyboardNavigationGroup && typeof updateActiveAccordionUuid === 'function') {
+      setIsGroupFocusWithin(true);
+      updateActiveAccordionUuid(uuid);
+    }
+  }, [isInKeyboardNavigationGroup, updateActiveAccordionUuid, uuid]);
+  const handleBlur = useCallback(e => {
+    if (isInKeyboardNavigationGroup && typeof updateActiveAccordionUuid === 'function' && typeof accordionGroupUuid === 'string') {
+      const nextFocusedElement = e.relatedTarget;
+      const currentGroupElement = e.currentTarget;
+      if (!nextFocusedElement || !currentGroupElement.contains(nextFocusedElement)) {
+        setIsGroupFocusWithin(false);
+        updateActiveAccordionUuid(undefined);
+      }
+    }
+  }, [accordionGroupUuid, isInKeyboardNavigationGroup, updateActiveAccordionUuid]);
+  useEffect(() => {
+    if (!isInKeyboardNavigationGroup) {
+      setIsGroupFocusWithin(false);
+    } else if (activeAccordionUuid == null && typeof updateActiveAccordionUuid === 'function' && accordionUuids?.[0] === uuid) {
+      updateActiveAccordionUuid(uuid);
+    }
+  }, [accordionUuids, activeAccordionUuid, isInKeyboardNavigationGroup, updateActiveAccordionUuid, uuid]);
   return /*#__PURE__*/React.createElement(StyledMotionAccordion, {
     animate: {
       height: 'auto',
@@ -158,7 +252,7 @@ const Accordion = ({
     },
     initial: initialAnimation,
     $isOpen: isOpen,
-    tabIndex: shouldIndex ? 0 : -1,
+    tabIndex: tabIndex,
     $shouldShowLines: !isLastAccordion || !isWrapped,
     $isParentWrapped: isParentWrapped,
     $isWrapped: isWrapped,
@@ -166,13 +260,11 @@ const Accordion = ({
     $shouldHideBackground: shouldHideBackground,
     $shouldHideBottomLine: shouldHideBottomLine,
     $bottomBorderColor: colors?.borderBottomColor,
-    onKeyDown: e => {
-      if ((e.key === 'Enter' || e.key === ' ') && e.target.className.includes('beta-chayns-accordion') && shouldIndex) {
-        e.preventDefault();
-        e.stopPropagation();
-        handleHeadClick();
-      }
-    },
+    $shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlightingEffective,
+    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
+    onKeyDown: handleKeyDown,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
     onMouseEnter: onHoverStart,
     onMouseLeave: onHoverEnd,
     transition: {
@@ -202,7 +294,8 @@ const Accordion = ({
     titleElement: titleElement,
     onTitleInputChange: onTitleInputChange,
     titleInputProps: titleInputProps,
-    titleColor: colors?.titleColor
+    titleColor: colors?.titleColor,
+    shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlightingEffective
   }), /*#__PURE__*/React.createElement(AnimatePresence, {
     initial: false
   }, (isOpen || shouldRenderClosed) && /*#__PURE__*/React.createElement(AccordionBody, {