@chayns-components/core 5.3.10 → 5.3.12-alpha.0

package/lib/esm/components/grouped-image/GroupedImage.js

@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { StyledCornerElement, StyledCornerImage, StyledGroupedImage, StyledGroupImageElement } from './GroupedImage.styles';
 import CareOfClipPath from './clip-paths/CareOfClipPath';
 import { useUuid } from '../../hooks/uuid';
 import SecondImageClipPath from './clip-paths/SecondImageClipPath';
+import { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';
 const GroupedImage = ({
   cornerImage,
   height = 40,
@@ -12,12 +13,25 @@ const GroupedImage = ({
   shouldPreventBackground = false,
   shouldShowRoundImage = false,
   cornerElement,
-  onImageError
+  onImageError,
+  shouldEnableKeyboardHighlighting
 }) => {
   const hasCornerImage = Boolean(cornerImage);
   const hasCornerElement = Boolean(cornerElement);
   const hasMultipleImages = images.length > 1;
   const uuid = useUuid();
+  const isClickable = typeof onClick === 'function';
+  const isKeyboardFocusable = isClickable && shouldEnableKeyboardHighlighting;
+  const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlighting);
+  const handleKeyDown = useCallback(event => {
+    if (!isClickable) {
+      return;
+    }
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      onClick?.(event);
+    }
+  }, [isClickable, onClick]);
   const imageElements = images.slice(0, 2).map((src, index) => /*#__PURE__*/React.createElement(StyledGroupImageElement, {
     $background: imageBackground,
     $isSecondImage: index === 1,
@@ -44,8 +58,12 @@ const GroupedImage = ({
     onError: event => typeof onImageError === 'function' && onImageError(event, index)
   })))));
   return /*#__PURE__*/React.createElement(StyledGroupedImage, {
-    onClick: onClick,
-    $height: height
+    onClick: isClickable ? onClick : undefined,
+    onKeyDown: isKeyboardFocusable ? handleKeyDown : undefined,
+    tabIndex: isKeyboardFocusable ? 0 : -1,
+    role: isClickable ? 'button' : undefined,
+    $height: height,
+    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting
   }, hasCornerImage && /*#__PURE__*/React.createElement(CareOfClipPath, {
     height: height,
     uuid: uuid,

package/lib/esm/components/grouped-image/GroupedImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"GroupedImage.js","names":["React","StyledCornerElement","StyledCornerImage","StyledGroupedImage","StyledGroupImageElement","CareOfClipPath","useUuid","SecondImageClipPath","GroupedImage","cornerImage","height","imageBackground","images","onClick","shouldPreventBackground","shouldShowRoundImage","cornerElement","onImageError","hasCornerImage","Boolean","hasCornerElement","hasMultipleImages","length","uuid","imageElements","slice","map","src","index","createElement","$background","$isSecondImage","$hasCornerImage","$hasMultipleImages","$shouldPreventBackground","$shouldShowRoundImage","$uuid","key","width","viewBox","xmlns","preserveAspectRatio","alt","onError","event","$height","imageFactors","displayName"],"sources":["../../../../src/components/grouped-image/GroupedImage.tsx"],"sourcesContent":["import React, { CSSProperties, FC, MouseEventHandler, ReactNode, SyntheticEvent } from 'react';\nimport {\n    StyledCornerElement,\n    StyledCornerImage,\n    StyledGroupedImage,\n    StyledGroupImageElement,\n} from './GroupedImage.styles';\nimport CareOfClipPath from './clip-paths/CareOfClipPath';\nimport { useUuid } from '../../hooks/uuid';\nimport SecondImageClipPath from './clip-paths/SecondImageClipPath';\n\ninterface GroupedImageProps {\n    /**\n     * Optional image to display in the bottom right corner of the grouped image.\n     */\n    cornerImage?: string;\n    /**\n     * Height of the grouped image container.\n     */\n    height?: number;\n    /**\n     * Background for the single images.\n     */\n    imageBackground?: CSSProperties['background'];\n    /**\n     * Array of image URLs to display in the grouped image. If only one image is provided, it will be displayed as a full image.\n     */\n    images: string[];\n    /**\n     * Optional click handler for the grouped image.\n     */\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    /**\n     * Whether to prevent the background of the images from being set.\n     */\n    shouldPreventBackground?: boolean;\n    /**\n     * Whether to show the images in a round shape.\n     */\n    shouldShowRoundImage?: boolean;\n    /**\n     * Optional Element to display in the right corner of the image\n     */\n    cornerElement?: ReactNode;\n    /**\n     * Optional handler for image load errors.\n     */\n    onImageError?: (event: SyntheticEvent<HTMLImageElement, Event>, index: number) => void;\n}\n\nconst GroupedImage: FC<GroupedImageProps> = ({\n    cornerImage,\n    height = 40,\n    imageBackground,\n    images,\n    onClick,\n    shouldPreventBackground = false,\n    shouldShowRoundImage = false,\n    cornerElement,\n    onImageError,\n}) => {\n    const hasCornerImage = Boolean(cornerImage);\n    const hasCornerElement = Boolean(cornerElement);\n    const hasMultipleImages = images.length > 1;\n    const uuid = useUuid();\n\n    const imageElements = images.slice(0, 2).map((src, index) => (\n        <StyledGroupImageElement\n            $background={imageBackground}\n            $isSecondImage={index === 1}\n            $hasCornerImage={hasCornerImage}\n            $hasMultipleImages={hasMultipleImages}\n            $shouldPreventBackground={shouldPreventBackground}\n            $shouldShowRoundImage={shouldShowRoundImage}\n            $uuid={uuid}\n            // eslint-disable-next-line react/no-array-index-key\n            key={index}\n        >\n            <svg\n                width=\"100%\"\n                height=\"100%\"\n                viewBox=\"0 0 40 40\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                preserveAspectRatio=\"xMidYMid slice\"\n            >\n                <foreignObject width=\"40\" height=\"40\">\n                    <img\n                        alt={`image--${index}`}\n                        src={src}\n                        onError={(event) =>\n                            typeof onImageError === 'function' && onImageError(event, index)\n                        }\n                    />\n                </foreignObject>\n            </svg>\n        </StyledGroupImageElement>\n    ));\n\n    return (\n        <StyledGroupedImage onClick={onClick} $height={height}>\n            {hasCornerImage && (\n                <CareOfClipPath\n                    height={height}\n                    uuid={uuid}\n                    imageFactors={hasMultipleImages ? [0.76, 0.8] : [1]}\n                />\n            )}\n            {hasMultipleImages && (\n                <SecondImageClipPath\n                    height={height}\n                    uuid={uuid}\n                    shouldShowRoundImage={shouldShowRoundImage}\n                />\n            )}\n\n            {imageElements}\n\n            {hasCornerImage && (\n                <StyledCornerImage\n                    $background={imageBackground}\n                    $shouldPreventBackground={shouldPreventBackground}\n                    $hasMultipleImages={hasMultipleImages}\n                    src={cornerImage}\n                    key=\"corner-image\"\n                />\n            )}\n            {hasCornerElement && <StyledCornerElement>{cornerElement}</StyledCornerElement>}\n        </StyledGroupedImage>\n    );\n};\n\nGroupedImage.displayName = 'GroupedImage';\n\nexport default GroupedImage;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"GroupedImage.js","names":["React","useCallback","StyledCornerElement","StyledCornerImage","StyledGroupedImage","StyledGroupImageElement","CareOfClipPath","useUuid","SecondImageClipPath","useKeyboardFocusHighlighting","GroupedImage","cornerImage","height","imageBackground","images","onClick","shouldPreventBackground","shouldShowRoundImage","cornerElement","onImageError","shouldEnableKeyboardHighlighting","hasCornerImage","Boolean","hasCornerElement","hasMultipleImages","length","uuid","isClickable","isKeyboardFocusable","shouldShowKeyboardHighlighting","handleKeyDown","event","key","preventDefault","imageElements","slice","map","src","index","createElement","$background","$isSecondImage","$hasCornerImage","$hasMultipleImages","$shouldPreventBackground","$shouldShowRoundImage","$uuid","width","viewBox","xmlns","preserveAspectRatio","alt","onError","undefined","onKeyDown","tabIndex","role","$height","$shouldShowKeyboardHighlighting","imageFactors","displayName"],"sources":["../../../../src/components/grouped-image/GroupedImage.tsx"],"sourcesContent":["import React, {\n    CSSProperties,\n    FC,\n    KeyboardEventHandler,\n    MouseEvent,\n    MouseEventHandler,\n    ReactNode,\n    SyntheticEvent,\n    useCallback,\n} from 'react';\nimport {\n    StyledCornerElement,\n    StyledCornerImage,\n    StyledGroupedImage,\n    StyledGroupImageElement,\n} from './GroupedImage.styles';\nimport CareOfClipPath from './clip-paths/CareOfClipPath';\nimport { useUuid } from '../../hooks/uuid';\nimport SecondImageClipPath from './clip-paths/SecondImageClipPath';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\n\ninterface GroupedImageProps {\n    /**\n     * Optional image to display in the bottom right corner of the grouped image.\n     */\n    cornerImage?: string;\n    /**\n     * Height of the grouped image container.\n     */\n    height?: number;\n    /**\n     * Background for the single images.\n     */\n    imageBackground?: CSSProperties['background'];\n    /**\n     * Array of image URLs to display in the grouped image. If only one image is provided, it will be displayed as a full image.\n     */\n    images: string[];\n    /**\n     * Optional click handler for the grouped image.\n     */\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    /**\n     * Whether to prevent the background of the images from being set.\n     */\n    shouldPreventBackground?: boolean;\n    /**\n     * Whether to show the images in a round shape.\n     */\n    shouldShowRoundImage?: boolean;\n    /**\n     * Optional Element to display in the right corner of the image\n     */\n    cornerElement?: ReactNode;\n    /**\n     * Optional handler for image load errors.\n     */\n    onImageError?: (event: SyntheticEvent<HTMLImageElement, Event>, index: number) => void;\n    /**\n     * Enables keyboard-only focus highlighting for clickable grouped images.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n}\n\nconst GroupedImage: FC<GroupedImageProps> = ({\n    cornerImage,\n    height = 40,\n    imageBackground,\n    images,\n    onClick,\n    shouldPreventBackground = false,\n    shouldShowRoundImage = false,\n    cornerElement,\n    onImageError,\n    shouldEnableKeyboardHighlighting,\n}) => {\n    const hasCornerImage = Boolean(cornerImage);\n    const hasCornerElement = Boolean(cornerElement);\n    const hasMultipleImages = images.length > 1;\n    const uuid = useUuid();\n    const isClickable = typeof onClick === 'function';\n    const isKeyboardFocusable = isClickable && shouldEnableKeyboardHighlighting;\n    const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n        shouldEnableKeyboardHighlighting,\n    );\n\n    const handleKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n        (event) => {\n            if (!isClickable) {\n                return;\n            }\n\n            if (event.key === 'Enter' || event.key === ' ') {\n                event.preventDefault();\n                onClick?.(event as unknown as MouseEvent<HTMLDivElement>);\n            }\n        },\n        [isClickable, onClick],\n    );\n\n    const imageElements = images.slice(0, 2).map((src, index) => (\n        <StyledGroupImageElement\n            $background={imageBackground}\n            $isSecondImage={index === 1}\n            $hasCornerImage={hasCornerImage}\n            $hasMultipleImages={hasMultipleImages}\n            $shouldPreventBackground={shouldPreventBackground}\n            $shouldShowRoundImage={shouldShowRoundImage}\n            $uuid={uuid}\n            // eslint-disable-next-line react/no-array-index-key\n            key={index}\n        >\n            <svg\n                width=\"100%\"\n                height=\"100%\"\n                viewBox=\"0 0 40 40\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                preserveAspectRatio=\"xMidYMid slice\"\n            >\n                <foreignObject width=\"40\" height=\"40\">\n                    <img\n                        alt={`image--${index}`}\n                        src={src}\n                        onError={(event) =>\n                            typeof onImageError === 'function' && onImageError(event, index)\n                        }\n                    />\n                </foreignObject>\n            </svg>\n        </StyledGroupImageElement>\n    ));\n\n    return (\n        <StyledGroupedImage\n            onClick={isClickable ? onClick : undefined}\n            onKeyDown={isKeyboardFocusable ? handleKeyDown : undefined}\n            tabIndex={isKeyboardFocusable ? 0 : -1}\n            role={isClickable ? 'button' : undefined}\n            $height={height}\n            $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n        >\n            {hasCornerImage && (\n                <CareOfClipPath\n                    height={height}\n                    uuid={uuid}\n                    imageFactors={hasMultipleImages ? [0.76, 0.8] : [1]}\n                />\n            )}\n            {hasMultipleImages && (\n                <SecondImageClipPath\n                    height={height}\n                    uuid={uuid}\n                    shouldShowRoundImage={shouldShowRoundImage}\n                />\n            )}\n\n            {imageElements}\n\n            {hasCornerImage && (\n                <StyledCornerImage\n                    $background={imageBackground}\n                    $shouldPreventBackground={shouldPreventBackground}\n                    $hasMultipleImages={hasMultipleImages}\n                    src={cornerImage}\n                    key=\"corner-image\"\n                />\n            )}\n            {hasCornerElement && <StyledCornerElement>{cornerElement}</StyledCornerElement>}\n        </StyledGroupedImage>\n    );\n};\n\nGroupedImage.displayName = 'GroupedImage';\n\nexport default GroupedImage;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/grouped-image/GroupedImage.styles.js

@@ -1,4 +1,5 @@
 import styled, { css } from 'styled-components';
+import { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';
 export const StyledGroupedImage = styled.div`
     flex: 0 0 auto;
     height: ${({
@@ -8,6 +9,14 @@ export const StyledGroupedImage = styled.div`
     width: ${({
   $height
 }) => $height}px;
+
+    ${({
+  $shouldShowKeyboardHighlighting
+}) => $shouldShowKeyboardHighlighting && css`
+            &:focus-visible {
+                ${keyboardFocusHighlightingRingCss}
+            }
+        `}
 `;
 export const StyledGroupImageElement = styled.div.attrs(({
   $isSecondImage,

package/lib/esm/components/grouped-image/GroupedImage.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"GroupedImage.styles.js","names":["styled","css","StyledGroupedImage","div","$height","StyledGroupImageElement","attrs","$isSecondImage","$hasMultipleImages","$hasCornerImage","$uuid","clipPath","style","$shouldShowRoundImage","$background","$shouldPreventBackground","theme","StyledCornerImage","img","StyledCornerElement","span"],"sources":["../../../../src/components/grouped-image/GroupedImage.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { CSSProperties } from 'react';\nimport { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledGroupedImageProps = WithTheme<{\n    $height: CSSProperties['height'];\n}>;\n\nexport const StyledGroupedImage = styled.div<StyledGroupedImageProps>`\n    flex: 0 0 auto;\n    height: ${({ $height }) => $height}px;\n    position: relative;\n    width: ${({ $height }) => $height}px;\n`;\n\ntype StyledImageProps = WithTheme<{\n    $background?: CSSProperties['background'];\n    $isSecondImage?: boolean;\n    $shouldPreventBackground?: boolean;\n    $shouldShowRoundImage?: boolean;\n    $hasCornerImage: boolean;\n    $hasMultipleImages: boolean;\n    $uuid: string;\n}>;\n\nexport const StyledGroupImageElement = styled.div.attrs<StyledImageProps>(\n    ({ $isSecondImage, $hasMultipleImages, $hasCornerImage, $uuid }) => {\n        let clipPath: string | undefined;\n        if (\n            ($isSecondImage && $hasCornerImage) ||\n            (!$isSecondImage && !$hasMultipleImages && $hasCornerImage)\n        ) {\n            clipPath = `url(#care-of-mask--${$uuid})`;\n        } else if (!$isSecondImage && $hasMultipleImages) {\n            clipPath = `url(#second-image-mask--${$uuid})`;\n        }\n\n        return {\n            style: {\n                clipPath,\n            },\n        };\n    },\n)`\n    aspect-ratio: 1;\n    border-radius: ${({ $shouldShowRoundImage }) => ($shouldShowRoundImage ? '50%' : '0')};\n    position: absolute;\n    overflow: hidden;\n\n    ${({ $hasMultipleImages, $isSecondImage }) => {\n        if (!$hasMultipleImages) {\n            return css`\n                height: 100%;\n            `;\n        }\n\n        if ($isSecondImage) {\n            return css`\n                height: 80%;\n            `;\n        }\n\n        return css`\n            height: 76%;\n        `;\n    }}\n\n    ${({ $isSecondImage }) =>\n        $isSecondImage\n            ? css`\n                  bottom: 0;\n                  right: 0;\n              `\n            : css`\n                  top: 0;\n                  left: 0;\n              `}\n\n    ${({ $background, $shouldPreventBackground, theme }) =>\n        !$shouldPreventBackground &&\n        css`\n            background: ${$background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n            box-shadow: 0 0 0 1px rgba(${theme['009-rgb']}, 0.08) inset;\n        `}\n    \n    img {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n    }\n`;\n\ntype StyledCornerImageProps = WithTheme<{\n    $background?: CSSProperties['background'];\n    $shouldPreventBackground?: boolean;\n    $hasMultipleImages: boolean;\n}>;\n\nexport const StyledCornerImage = styled.img<StyledCornerImageProps>`\n    aspect-ratio: 1;\n    bottom: 0;\n    height: ${({ $hasMultipleImages }) => ($hasMultipleImages ? '28%' : '38%')};\n    position: absolute;\n    right: 0;\n\n    ${({ $background, $shouldPreventBackground, theme }) =>\n        !$shouldPreventBackground &&\n        css`\n            background: ${$background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n            box-shadow: 0 0 0 1px rgba(${theme['009-rgb']}, 0.08) inset;\n        `}\n`;\n\nexport const StyledCornerElement = styled.span`\n    height: 18px;\n    width: 18px;\n    position: absolute;\n    bottom: 0;\n    right: -5px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    & > * {\n        max-height: 100%;\n        max-width: 100%;\n        display: block;\n    }\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAQ/C,OAAO,MAAMC,kBAAkB,GAAGF,MAAM,CAACG,GAA4B;AACrE;AACA,cAAc,CAAC;EAAEC;AAAQ,CAAC,KAAKA,OAAO;AACtC;AACA,aAAa,CAAC;EAAEA;AAAQ,CAAC,KAAKA,OAAO;AACrC,CAAC;AAYD,OAAO,MAAMC,uBAAuB,GAAGL,MAAM,CAACG,GAAG,CAACG,KAAK,CACnD,CAAC;EAAEC,cAAc;EAAEC,kBAAkB;EAAEC,eAAe;EAAEC;AAAM,CAAC,KAAK;EAChE,IAAIC,QAA4B;EAChC,IACKJ,cAAc,IAAIE,eAAe,IACjC,CAACF,cAAc,IAAI,CAACC,kBAAkB,IAAIC,eAAgB,EAC7D;IACEE,QAAQ,GAAG,sBAAsBD,KAAK,GAAG;EAC7C,CAAC,MAAM,IAAI,CAACH,cAAc,IAAIC,kBAAkB,EAAE;IAC9CG,QAAQ,GAAG,2BAA2BD,KAAK,GAAG;EAClD;EAEA,OAAO;IACHE,KAAK,EAAE;MACHD;IACJ;EACJ,CAAC;AACL,CACJ,CAAC;AACD;AACA,qBAAqB,CAAC;EAAEE;AAAsB,CAAC,KAAMA,qBAAqB,GAAG,KAAK,GAAG,GAAI;AACzF;AACA;AACA;AACA,MAAM,CAAC;EAAEL,kBAAkB;EAAED;AAAe,CAAC,KAAK;EAC1C,IAAI,CAACC,kBAAkB,EAAE;IACrB,OAAOP,GAAG;AACtB;AACA,aAAa;EACL;EAEA,IAAIM,cAAc,EAAE;IAChB,OAAON,GAAG;AACtB;AACA,aAAa;EACL;EAEA,OAAOA,GAAG;AAClB;AACA,SAAS;AACL,CAAC;AACL;AACA,MAAM,CAAC;EAAEM;AAAe,CAAC,KACjBA,cAAc,GACRN,GAAG;AACjB;AACA;AACA,eAAe,GACDA,GAAG;AACjB;AACA;AACA,eAAe;AACf;AACA,MAAM,CAAC;EAAEa,WAAW;EAAEC,wBAAwB;EAAEC;AAAM,CAAC,KAC/C,CAACD,wBAAwB,IACzBd,GAAG;AACX,0BAA0Ba,WAAW,IAAI,QAAQE,KAAK,CAAC,UAAU,CAAC,IAAI,OAAO,QAAQ;AACrF,yCAAyCA,KAAK,CAAC,SAAS,CAAC;AACzD,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAQD,OAAO,MAAMC,iBAAiB,GAAGjB,MAAM,CAACkB,GAA2B;AACnE;AACA;AACA,cAAc,CAAC;EAAEV;AAAmB,CAAC,KAAMA,kBAAkB,GAAG,KAAK,GAAG,KAAM;AAC9E;AACA;AACA;AACA,MAAM,CAAC;EAAEM,WAAW;EAAEC,wBAAwB;EAAEC;AAAM,CAAC,KAC/C,CAACD,wBAAwB,IACzBd,GAAG;AACX,0BAA0Ba,WAAW,IAAI,QAAQE,KAAK,CAAC,UAAU,CAAC,IAAI,OAAO,QAAQ;AACrF,yCAAyCA,KAAK,CAAC,SAAS,CAAC;AACzD,SAAS;AACT,CAAC;AAED,OAAO,MAAMG,mBAAmB,GAAGnB,MAAM,CAACoB,IAAI;AAC9C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"GroupedImage.styles.js","names":["styled","css","keyboardFocusHighlightingRingCss","StyledGroupedImage","div","$height","$shouldShowKeyboardHighlighting","StyledGroupImageElement","attrs","$isSecondImage","$hasMultipleImages","$hasCornerImage","$uuid","clipPath","style","$shouldShowRoundImage","$background","$shouldPreventBackground","theme","StyledCornerImage","img","StyledCornerElement","span"],"sources":["../../../../src/components/grouped-image/GroupedImage.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { CSSProperties } from 'react';\nimport { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';\n\ntype StyledGroupedImageProps = WithTheme<{\n    $height: CSSProperties['height'];\n    $shouldShowKeyboardHighlighting?: boolean;\n}>;\n\nexport const StyledGroupedImage = styled.div<StyledGroupedImageProps>`\n    flex: 0 0 auto;\n    height: ${({ $height }) => $height}px;\n    position: relative;\n    width: ${({ $height }) => $height}px;\n\n    ${({ $shouldShowKeyboardHighlighting }) =>\n        $shouldShowKeyboardHighlighting &&\n        css`\n            &:focus-visible {\n                ${keyboardFocusHighlightingRingCss}\n            }\n        `}\n`;\n\ntype StyledImageProps = WithTheme<{\n    $background?: CSSProperties['background'];\n    $isSecondImage?: boolean;\n    $shouldPreventBackground?: boolean;\n    $shouldShowRoundImage?: boolean;\n    $hasCornerImage: boolean;\n    $hasMultipleImages: boolean;\n    $uuid: string;\n}>;\n\nexport const StyledGroupImageElement = styled.div.attrs<StyledImageProps>(\n    ({ $isSecondImage, $hasMultipleImages, $hasCornerImage, $uuid }) => {\n        let clipPath: string | undefined;\n        if (\n            ($isSecondImage && $hasCornerImage) ||\n            (!$isSecondImage && !$hasMultipleImages && $hasCornerImage)\n        ) {\n            clipPath = `url(#care-of-mask--${$uuid})`;\n        } else if (!$isSecondImage && $hasMultipleImages) {\n            clipPath = `url(#second-image-mask--${$uuid})`;\n        }\n\n        return {\n            style: {\n                clipPath,\n            },\n        };\n    },\n)`\n    aspect-ratio: 1;\n    border-radius: ${({ $shouldShowRoundImage }) => ($shouldShowRoundImage ? '50%' : '0')};\n    position: absolute;\n    overflow: hidden;\n\n    ${({ $hasMultipleImages, $isSecondImage }) => {\n        if (!$hasMultipleImages) {\n            return css`\n                height: 100%;\n            `;\n        }\n\n        if ($isSecondImage) {\n            return css`\n                height: 80%;\n            `;\n        }\n\n        return css`\n            height: 76%;\n        `;\n    }}\n\n    ${({ $isSecondImage }) =>\n        $isSecondImage\n            ? css`\n                  bottom: 0;\n                  right: 0;\n              `\n            : css`\n                  top: 0;\n                  left: 0;\n              `}\n\n    ${({ $background, $shouldPreventBackground, theme }) =>\n        !$shouldPreventBackground &&\n        css`\n            background: ${$background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n            box-shadow: 0 0 0 1px rgba(${theme['009-rgb']}, 0.08) inset;\n        `}\n    \n    img {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n    }\n`;\n\ntype StyledCornerImageProps = WithTheme<{\n    $background?: CSSProperties['background'];\n    $shouldPreventBackground?: boolean;\n    $hasMultipleImages: boolean;\n}>;\n\nexport const StyledCornerImage = styled.img<StyledCornerImageProps>`\n    aspect-ratio: 1;\n    bottom: 0;\n    height: ${({ $hasMultipleImages }) => ($hasMultipleImages ? '28%' : '38%')};\n    position: absolute;\n    right: 0;\n\n    ${({ $background, $shouldPreventBackground, theme }) =>\n        !$shouldPreventBackground &&\n        css`\n            background: ${$background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n            box-shadow: 0 0 0 1px rgba(${theme['009-rgb']}, 0.08) inset;\n        `}\n`;\n\nexport const StyledCornerElement = styled.span`\n    height: 18px;\n    width: 18px;\n    position: absolute;\n    bottom: 0;\n    right: -5px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    & > * {\n        max-height: 100%;\n        max-width: 100%;\n        display: block;\n    }\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,SAASC,gCAAgC,QAAQ,8CAA8C;AAO/F,OAAO,MAAMC,kBAAkB,GAAGH,MAAM,CAACI,GAA4B;AACrE;AACA,cAAc,CAAC;EAAEC;AAAQ,CAAC,KAAKA,OAAO;AACtC;AACA,aAAa,CAAC;EAAEA;AAAQ,CAAC,KAAKA,OAAO;AACrC;AACA,MAAM,CAAC;EAAEC;AAAgC,CAAC,KAClCA,+BAA+B,IAC/BL,GAAG;AACX;AACA,kBAAkBC,gCAAgC;AAClD;AACA,SAAS;AACT,CAAC;AAYD,OAAO,MAAMK,uBAAuB,GAAGP,MAAM,CAACI,GAAG,CAACI,KAAK,CACnD,CAAC;EAAEC,cAAc;EAAEC,kBAAkB;EAAEC,eAAe;EAAEC;AAAM,CAAC,KAAK;EAChE,IAAIC,QAA4B;EAChC,IACKJ,cAAc,IAAIE,eAAe,IACjC,CAACF,cAAc,IAAI,CAACC,kBAAkB,IAAIC,eAAgB,EAC7D;IACEE,QAAQ,GAAG,sBAAsBD,KAAK,GAAG;EAC7C,CAAC,MAAM,IAAI,CAACH,cAAc,IAAIC,kBAAkB,EAAE;IAC9CG,QAAQ,GAAG,2BAA2BD,KAAK,GAAG;EAClD;EAEA,OAAO;IACHE,KAAK,EAAE;MACHD;IACJ;EACJ,CAAC;AACL,CACJ,CAAC;AACD;AACA,qBAAqB,CAAC;EAAEE;AAAsB,CAAC,KAAMA,qBAAqB,GAAG,KAAK,GAAG,GAAI;AACzF;AACA;AACA;AACA,MAAM,CAAC;EAAEL,kBAAkB;EAAED;AAAe,CAAC,KAAK;EAC1C,IAAI,CAACC,kBAAkB,EAAE;IACrB,OAAOT,GAAG;AACtB;AACA,aAAa;EACL;EAEA,IAAIQ,cAAc,EAAE;IAChB,OAAOR,GAAG;AACtB;AACA,aAAa;EACL;EAEA,OAAOA,GAAG;AAClB;AACA,SAAS;AACL,CAAC;AACL;AACA,MAAM,CAAC;EAAEQ;AAAe,CAAC,KACjBA,cAAc,GACRR,GAAG;AACjB;AACA;AACA,eAAe,GACDA,GAAG;AACjB;AACA;AACA,eAAe;AACf;AACA,MAAM,CAAC;EAAEe,WAAW;EAAEC,wBAAwB;EAAEC;AAAM,CAAC,KAC/C,CAACD,wBAAwB,IACzBhB,GAAG;AACX,0BAA0Be,WAAW,IAAI,QAAQE,KAAK,CAAC,UAAU,CAAC,IAAI,OAAO,QAAQ;AACrF,yCAAyCA,KAAK,CAAC,SAAS,CAAC;AACzD,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAQD,OAAO,MAAMC,iBAAiB,GAAGnB,MAAM,CAACoB,GAA2B;AACnE;AACA;AACA,cAAc,CAAC;EAAEV;AAAmB,CAAC,KAAMA,kBAAkB,GAAG,KAAK,GAAG,KAAM;AAC9E;AACA;AACA;AACA,MAAM,CAAC;EAAEM,WAAW;EAAEC,wBAAwB;EAAEC;AAAM,CAAC,KAC/C,CAACD,wBAAwB,IACzBhB,GAAG;AACX,0BAA0Be,WAAW,IAAI,QAAQE,KAAK,CAAC,UAAU,CAAC,IAAI,OAAO,QAAQ;AACrF,yCAAyCA,KAAK,CAAC,SAAS,CAAC;AACzD,SAAS;AACT,CAAC;AAED,OAAO,MAAMG,mBAAmB,GAAGrB,MAAM,CAACsB,IAAI;AAC9C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/highlight-slider/HighlightSlider.js

@@ -1,6 +1,7 @@
 import React, { useCallback, useMemo } from 'react';
 import { StyledHighlightSlider } from './HighlightSlider.styles';
 import HighlightSliderItem from './highlight-slider-item/HighlightSliderItem';
+import { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';
 const DEFAULT_HIGHLIGHT_SLIDER_COLORS = {
   backgroundColor: '#E0E0E0',
   fillColor: '#808080'
@@ -10,8 +11,11 @@ const HighlightSlider = ({
   colors = DEFAULT_HIGHLIGHT_SLIDER_COLORS,
   onIndexChange,
   currentIndex,
-  duration = 10
+  duration = 10,
+  shouldEnableKeyboardHighlighting
 }) => {
+  const isInteractive = typeof onIndexChange === 'function';
+  const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlighting && isInteractive);
   const handleFinish = useCallback(index => {
     if (typeof onIndexChange === 'function') {
       onIndexChange(index >= count - 1 ? 0 : index + 1);
@@ -32,8 +36,11 @@ const HighlightSlider = ({
     isActive: currentIndex === index,
     isFinished: currentIndex > index,
     onClick: handleClick,
-    onFinish: handleFinish
-  })), [colors, count, currentIndex, duration, handleClick, handleFinish]);
+    onFinish: handleFinish,
+    shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting,
+    shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
+    isInteractive: isInteractive
+  })), [colors, count, currentIndex, duration, handleClick, handleFinish, shouldEnableKeyboardHighlighting, shouldShowKeyboardHighlighting, isInteractive]);
   return /*#__PURE__*/React.createElement(StyledHighlightSlider, null, content);
 };
 HighlightSlider.displayName = 'HighlightSlider';

package/lib/esm/components/highlight-slider/HighlightSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"HighlightSlider.js","names":["React","useCallback","useMemo","StyledHighlightSlider","HighlightSliderItem","DEFAULT_HIGHLIGHT_SLIDER_COLORS","backgroundColor","fillColor","HighlightSlider","count","colors","onIndexChange","currentIndex","duration","handleFinish","index","handleClick","content","Array","from","length","map","value","createElement","key","isActive","isFinished","onClick","onFinish","displayName"],"sources":["../../../../src/components/highlight-slider/HighlightSlider.tsx"],"sourcesContent":["import React, { FC, useCallback, useMemo } from 'react';\nimport { StyledHighlightSlider } from './HighlightSlider.styles';\nimport HighlightSliderItem, {\n    HighlightSliderItemColors,\n} from './highlight-slider-item/HighlightSliderItem';\n\nconst DEFAULT_HIGHLIGHT_SLIDER_COLORS: HighlightSliderItemColors = {\n    backgroundColor: '#E0E0E0',\n    fillColor: '#808080',\n};\n\nexport type HighlightSliderProps = {\n    /**\n     * The Colors of the slider.\n     */\n    colors?: HighlightSliderItemColors;\n    /**\n     * The total number of sections, that should be displayed.\n     */\n    count: number;\n    /**\n     * The current index.\n     */\n    currentIndex: number;\n    /**\n     * The duration of the animation of a single item in seconds.\n     */\n    duration?: number;\n    /**\n     * Function to be executed if the index has changed.\n     */\n    onIndexChange?: (index: number) => void;\n};\n\nconst HighlightSlider: FC<HighlightSliderProps> = ({\n    count,\n    colors = DEFAULT_HIGHLIGHT_SLIDER_COLORS,\n    onIndexChange,\n    currentIndex,\n    duration = 10,\n}) => {\n    const handleFinish = useCallback(\n        (index: number) => {\n            if (typeof onIndexChange === 'function') {\n                onIndexChange(index >= count - 1 ? 0 : index + 1);\n            }\n        },\n        [count, onIndexChange],\n    );\n\n    const handleClick = useCallback(\n        (index: number) => {\n            if (typeof onIndexChange === 'function') {\n                onIndexChange(index);\n            }\n        },\n        [onIndexChange],\n    );\n\n    const content = useMemo(\n        () =>\n            Array.from({ length: count }).map((value, index) => (\n                <HighlightSliderItem\n                    key={`highlight-slider-item--${value as number}`}\n                    index={index}\n                    duration={duration}\n                    colors={colors}\n                    isActive={currentIndex === index}\n                    isFinished={currentIndex > index}\n                    onClick={handleClick}\n                    onFinish={handleFinish}\n                />\n            )),\n        [colors, count, currentIndex, duration, handleClick, handleFinish],\n    );\n\n    return <StyledHighlightSlider>{content}</StyledHighlightSlider>;\n};\n\nHighlightSlider.displayName = 'HighlightSlider';\n\nexport default HighlightSlider;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AACvD,SAASC,qBAAqB,QAAQ,0BAA0B;AAChE,OAAOC,mBAAmB,MAEnB,6CAA6C;AAEpD,MAAMC,+BAA0D,GAAG;EAC/DC,eAAe,EAAE,SAAS;EAC1BC,SAAS,EAAE;AACf,CAAC;AAyBD,MAAMC,eAAyC,GAAGA,CAAC;EAC/CC,KAAK;EACLC,MAAM,GAAGL,+BAA+B;EACxCM,aAAa;EACbC,YAAY;EACZC,QAAQ,GAAG;AACf,CAAC,KAAK;EACF,MAAMC,YAAY,GAAGb,WAAW,CAC3Bc,KAAa,IAAK;IACf,IAAI,OAAOJ,aAAa,KAAK,UAAU,EAAE;MACrCA,aAAa,CAACI,KAAK,IAAIN,KAAK,GAAG,CAAC,GAAG,CAAC,GAAGM,KAAK,GAAG,CAAC,CAAC;IACrD;EACJ,CAAC,EACD,CAACN,KAAK,EAAEE,aAAa,CACzB,CAAC;EAED,MAAMK,WAAW,GAAGf,WAAW,CAC1Bc,KAAa,IAAK;IACf,IAAI,OAAOJ,aAAa,KAAK,UAAU,EAAE;MACrCA,aAAa,CAACI,KAAK,CAAC;IACxB;EACJ,CAAC,EACD,CAACJ,aAAa,CAClB,CAAC;EAED,MAAMM,OAAO,GAAGf,OAAO,CACnB,MACIgB,KAAK,CAACC,IAAI,CAAC;IAAEC,MAAM,EAAEX;EAAM,CAAC,CAAC,CAACY,GAAG,CAAC,CAACC,KAAK,EAAEP,KAAK,kBAC3Cf,KAAA,CAAAuB,aAAA,CAACnB,mBAAmB;IAChBoB,GAAG,EAAE,0BAA0BF,KAAK,EAAa;IACjDP,KAAK,EAAEA,KAAM;IACbF,QAAQ,EAAEA,QAAS;IACnBH,MAAM,EAAEA,MAAO;IACfe,QAAQ,EAAEb,YAAY,KAAKG,KAAM;IACjCW,UAAU,EAAEd,YAAY,GAAGG,KAAM;IACjCY,OAAO,EAAEX,WAAY;IACrBY,QAAQ,EAAEd;EAAa,CAC1B,CACJ,CAAC,EACN,CAACJ,MAAM,EAAED,KAAK,EAAEG,YAAY,EAAEC,QAAQ,EAAEG,WAAW,EAAEF,YAAY,CACrE,CAAC;EAED,oBAAOd,KAAA,CAAAuB,aAAA,CAACpB,qBAAqB,QAAEc,OAA+B,CAAC;AACnE,CAAC;AAEDT,eAAe,CAACqB,WAAW,GAAG,iBAAiB;AAE/C,eAAerB,eAAe","ignoreList":[]}
+{"version":3,"file":"HighlightSlider.js","names":["React","useCallback","useMemo","StyledHighlightSlider","HighlightSliderItem","useKeyboardFocusHighlighting","DEFAULT_HIGHLIGHT_SLIDER_COLORS","backgroundColor","fillColor","HighlightSlider","count","colors","onIndexChange","currentIndex","duration","shouldEnableKeyboardHighlighting","isInteractive","shouldShowKeyboardHighlighting","handleFinish","index","handleClick","content","Array","from","length","map","value","createElement","key","isActive","isFinished","onClick","onFinish","displayName"],"sources":["../../../../src/components/highlight-slider/HighlightSlider.tsx"],"sourcesContent":["import React, { FC, useCallback, useMemo } from 'react';\nimport { StyledHighlightSlider } from './HighlightSlider.styles';\nimport HighlightSliderItem, {\n    HighlightSliderItemColors,\n} from './highlight-slider-item/HighlightSliderItem';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\n\nconst DEFAULT_HIGHLIGHT_SLIDER_COLORS: HighlightSliderItemColors = {\n    backgroundColor: '#E0E0E0',\n    fillColor: '#808080',\n};\n\nexport type HighlightSliderProps = {\n    /**\n     * The Colors of the slider.\n     */\n    colors?: HighlightSliderItemColors;\n    /**\n     * The total number of sections, that should be displayed.\n     */\n    count: number;\n    /**\n     * The current index.\n     */\n    currentIndex: number;\n    /**\n     * The duration of the animation of a single item in seconds.\n     */\n    duration?: number;\n    /**\n     * Function to be executed if the index has changed.\n     */\n    onIndexChange?: (index: number) => void;\n    /**\n     * Enables keyboard-only focus highlighting for interactive slider items.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst HighlightSlider: FC<HighlightSliderProps> = ({\n    count,\n    colors = DEFAULT_HIGHLIGHT_SLIDER_COLORS,\n    onIndexChange,\n    currentIndex,\n    duration = 10,\n    shouldEnableKeyboardHighlighting,\n}) => {\n    const isInteractive = typeof onIndexChange === 'function';\n    const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n        shouldEnableKeyboardHighlighting && isInteractive,\n    );\n\n    const handleFinish = useCallback(\n        (index: number) => {\n            if (typeof onIndexChange === 'function') {\n                onIndexChange(index >= count - 1 ? 0 : index + 1);\n            }\n        },\n        [count, onIndexChange],\n    );\n\n    const handleClick = useCallback(\n        (index: number) => {\n            if (typeof onIndexChange === 'function') {\n                onIndexChange(index);\n            }\n        },\n        [onIndexChange],\n    );\n\n    const content = useMemo(\n        () =>\n            Array.from({ length: count }).map((value, index) => (\n                <HighlightSliderItem\n                    key={`highlight-slider-item--${value as number}`}\n                    index={index}\n                    duration={duration}\n                    colors={colors}\n                    isActive={currentIndex === index}\n                    isFinished={currentIndex > index}\n                    onClick={handleClick}\n                    onFinish={handleFinish}\n                    shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlighting}\n                    shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n                    isInteractive={isInteractive}\n                />\n            )),\n        [\n            colors,\n            count,\n            currentIndex,\n            duration,\n            handleClick,\n            handleFinish,\n            shouldEnableKeyboardHighlighting,\n            shouldShowKeyboardHighlighting,\n            isInteractive,\n        ],\n    );\n\n    return <StyledHighlightSlider>{content}</StyledHighlightSlider>;\n};\n\nHighlightSlider.displayName = 'HighlightSlider';\n\nexport default HighlightSlider;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AACvD,SAASC,qBAAqB,QAAQ,0BAA0B;AAChE,OAAOC,mBAAmB,MAEnB,6CAA6C;AACpD,SAASC,4BAA4B,QAAQ,0CAA0C;AAEvF,MAAMC,+BAA0D,GAAG;EAC/DC,eAAe,EAAE,SAAS;EAC1BC,SAAS,EAAE;AACf,CAAC;AA6BD,MAAMC,eAAyC,GAAGA,CAAC;EAC/CC,KAAK;EACLC,MAAM,GAAGL,+BAA+B;EACxCM,aAAa;EACbC,YAAY;EACZC,QAAQ,GAAG,EAAE;EACbC;AACJ,CAAC,KAAK;EACF,MAAMC,aAAa,GAAG,OAAOJ,aAAa,KAAK,UAAU;EACzD,MAAMK,8BAA8B,GAAGZ,4BAA4B,CAC/DU,gCAAgC,IAAIC,aACxC,CAAC;EAED,MAAME,YAAY,GAAGjB,WAAW,CAC3BkB,KAAa,IAAK;IACf,IAAI,OAAOP,aAAa,KAAK,UAAU,EAAE;MACrCA,aAAa,CAACO,KAAK,IAAIT,KAAK,GAAG,CAAC,GAAG,CAAC,GAAGS,KAAK,GAAG,CAAC,CAAC;IACrD;EACJ,CAAC,EACD,CAACT,KAAK,EAAEE,aAAa,CACzB,CAAC;EAED,MAAMQ,WAAW,GAAGnB,WAAW,CAC1BkB,KAAa,IAAK;IACf,IAAI,OAAOP,aAAa,KAAK,UAAU,EAAE;MACrCA,aAAa,CAACO,KAAK,CAAC;IACxB;EACJ,CAAC,EACD,CAACP,aAAa,CAClB,CAAC;EAED,MAAMS,OAAO,GAAGnB,OAAO,CACnB,MACIoB,KAAK,CAACC,IAAI,CAAC;IAAEC,MAAM,EAAEd;EAAM,CAAC,CAAC,CAACe,GAAG,CAAC,CAACC,KAAK,EAAEP,KAAK,kBAC3CnB,KAAA,CAAA2B,aAAA,CAACvB,mBAAmB;IAChBwB,GAAG,EAAE,0BAA0BF,KAAK,EAAa;IACjDP,KAAK,EAAEA,KAAM;IACbL,QAAQ,EAAEA,QAAS;IACnBH,MAAM,EAAEA,MAAO;IACfkB,QAAQ,EAAEhB,YAAY,KAAKM,KAAM;IACjCW,UAAU,EAAEjB,YAAY,GAAGM,KAAM;IACjCY,OAAO,EAAEX,WAAY;IACrBY,QAAQ,EAAEd,YAAa;IACvBH,gCAAgC,EAAEA,gCAAiC;IACnEE,8BAA8B,EAAEA,8BAA+B;IAC/DD,aAAa,EAAEA;EAAc,CAChC,CACJ,CAAC,EACN,CACIL,MAAM,EACND,KAAK,EACLG,YAAY,EACZC,QAAQ,EACRM,WAAW,EACXF,YAAY,EACZH,gCAAgC,EAChCE,8BAA8B,EAC9BD,aAAa,CAErB,CAAC;EAED,oBAAOhB,KAAA,CAAA2B,aAAA,CAACxB,qBAAqB,QAAEkB,OAA+B,CAAC;AACnE,CAAC;AAEDZ,eAAe,CAACwB,WAAW,GAAG,iBAAiB;AAE/C,eAAexB,eAAe","ignoreList":[]}

package/lib/esm/components/highlight-slider/highlight-slider-item/HighlightSliderItem.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { StyledHighlightSliderItem, StyledHighlightSliderItemBackground, StyledHighlightSliderItemProgress } from './HighlightSliderItem.styles';
 import { StyledProgressBarProgressWrapper } from '../../progress-bar/ProgressBar.styles';
 import { useUuid } from '../../../hooks/uuid';
@@ -9,11 +9,28 @@ const HighlightSliderItem = ({
   onFinish,
   index,
   onClick,
-  duration
+  duration,
+  isInteractive,
+  shouldEnableKeyboardHighlighting,
+  shouldShowKeyboardHighlighting = false
 }) => {
   const uuid = useUuid();
+  const isKeyboardFocusable = isInteractive && shouldEnableKeyboardHighlighting;
+  const handleKeyDown = useCallback(event => {
+    if (!isInteractive) {
+      return;
+    }
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      onClick(index);
+    }
+  }, [index, isInteractive, onClick]);
   return /*#__PURE__*/React.createElement(StyledHighlightSliderItem, {
-    onClick: () => onClick(index)
+    onClick: isInteractive ? () => onClick(index) : undefined,
+    onKeyDown: isKeyboardFocusable ? handleKeyDown : undefined,
+    tabIndex: isKeyboardFocusable ? 0 : -1,
+    role: isInteractive ? 'button' : undefined,
+    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting
   }, /*#__PURE__*/React.createElement(StyledProgressBarProgressWrapper, null, isActive && /*#__PURE__*/React.createElement(StyledHighlightSliderItemProgress, {
     key: `highlight-slider-item-active--${uuid}`,
     initial: {

package/lib/esm/components/highlight-slider/highlight-slider-item/HighlightSliderItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"HighlightSliderItem.js","names":["React","StyledHighlightSliderItem","StyledHighlightSliderItemBackground","StyledHighlightSliderItemProgress","StyledProgressBarProgressWrapper","useUuid","HighlightSliderItem","colors","isActive","isFinished","onFinish","index","onClick","duration","uuid","createElement","key","initial","width","left","animate","exit","onAnimationComplete","$backgroundColor","fillColor","transition","ease","style","backgroundColor","displayName"],"sources":["../../../../../src/components/highlight-slider/highlight-slider-item/HighlightSliderItem.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport {\n    StyledHighlightSliderItem,\n    StyledHighlightSliderItemBackground,\n    StyledHighlightSliderItemProgress,\n} from './HighlightSliderItem.styles';\nimport { StyledProgressBarProgressWrapper } from '../../progress-bar/ProgressBar.styles';\nimport { useUuid } from '../../../hooks/uuid';\n\nexport interface HighlightSliderItemColors {\n    backgroundColor: string;\n    fillColor: string;\n}\n\nexport type HighlightSliderItemProps = {\n    index: number;\n    isActive: boolean;\n    isFinished: boolean;\n    onClick: (index: number) => void;\n    onFinish: (index: number) => void;\n    duration: number;\n    colors: HighlightSliderItemColors;\n};\n\nconst HighlightSliderItem: FC<HighlightSliderItemProps> = ({\n    colors,\n    isActive,\n    isFinished,\n    onFinish,\n    index,\n    onClick,\n    duration,\n}) => {\n    const uuid = useUuid();\n\n    return (\n        <StyledHighlightSliderItem onClick={() => onClick(index)}>\n            <StyledProgressBarProgressWrapper>\n                {isActive && (\n                    <StyledHighlightSliderItemProgress\n                        key={`highlight-slider-item-active--${uuid}`}\n                        initial={{ width: '100%', left: '-100%' }}\n                        animate={{ width: '100%', left: '0%' }}\n                        exit={{ width: '100%', left: '0%' }}\n                        onAnimationComplete={() => onFinish(index)}\n                        $backgroundColor={colors.fillColor}\n                        transition={{\n                            ease: 'linear',\n                            duration,\n                        }}\n                    />\n                )}\n                {isFinished && (\n                    <StyledHighlightSliderItemProgress\n                        key={`highlight-slider-item-finished--${uuid}`}\n                        style={{ width: '100%', left: '0%' }}\n                        $backgroundColor={colors.fillColor}\n                    />\n                )}\n                <StyledHighlightSliderItemBackground $backgroundColor={colors.backgroundColor} />\n            </StyledProgressBarProgressWrapper>\n        </StyledHighlightSliderItem>\n    );\n};\n\nHighlightSliderItem.displayName = 'HighlightSliderItem';\n\nexport default HighlightSliderItem;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAc,OAAO;AACjC,SACIC,yBAAyB,EACzBC,mCAAmC,EACnCC,iCAAiC,QAC9B,8BAA8B;AACrC,SAASC,gCAAgC,QAAQ,uCAAuC;AACxF,SAASC,OAAO,QAAQ,qBAAqB;AAiB7C,MAAMC,mBAAiD,GAAGA,CAAC;EACvDC,MAAM;EACNC,QAAQ;EACRC,UAAU;EACVC,QAAQ;EACRC,KAAK;EACLC,OAAO;EACPC;AACJ,CAAC,KAAK;EACF,MAAMC,IAAI,GAAGT,OAAO,CAAC,CAAC;EAEtB,oBACIL,KAAA,CAAAe,aAAA,CAACd,yBAAyB;IAACW,OAAO,EAAEA,CAAA,KAAMA,OAAO,CAACD,KAAK;EAAE,gBACrDX,KAAA,CAAAe,aAAA,CAACX,gCAAgC,QAC5BI,QAAQ,iBACLR,KAAA,CAAAe,aAAA,CAACZ,iCAAiC;IAC9Ba,GAAG,EAAE,iCAAiCF,IAAI,EAAG;IAC7CG,OAAO,EAAE;MAAEC,KAAK,EAAE,MAAM;MAAEC,IAAI,EAAE;IAAQ,CAAE;IAC1CC,OAAO,EAAE;MAAEF,KAAK,EAAE,MAAM;MAAEC,IAAI,EAAE;IAAK,CAAE;IACvCE,IAAI,EAAE;MAAEH,KAAK,EAAE,MAAM;MAAEC,IAAI,EAAE;IAAK,CAAE;IACpCG,mBAAmB,EAAEA,CAAA,KAAMZ,QAAQ,CAACC,KAAK,CAAE;IAC3CY,gBAAgB,EAAEhB,MAAM,CAACiB,SAAU;IACnCC,UAAU,EAAE;MACRC,IAAI,EAAE,QAAQ;MACdb;IACJ;EAAE,CACL,CACJ,EACAJ,UAAU,iBACPT,KAAA,CAAAe,aAAA,CAACZ,iCAAiC;IAC9Ba,GAAG,EAAE,mCAAmCF,IAAI,EAAG;IAC/Ca,KAAK,EAAE;MAAET,KAAK,EAAE,MAAM;MAAEC,IAAI,EAAE;IAAK,CAAE;IACrCI,gBAAgB,EAAEhB,MAAM,CAACiB;EAAU,CACtC,CACJ,eACDxB,KAAA,CAAAe,aAAA,CAACb,mCAAmC;IAACqB,gBAAgB,EAAEhB,MAAM,CAACqB;EAAgB,CAAE,CAClD,CACX,CAAC;AAEpC,CAAC;AAEDtB,mBAAmB,CAACuB,WAAW,GAAG,qBAAqB;AAEvD,eAAevB,mBAAmB","ignoreList":[]}
+{"version":3,"file":"HighlightSliderItem.js","names":["React","useCallback","StyledHighlightSliderItem","StyledHighlightSliderItemBackground","StyledHighlightSliderItemProgress","StyledProgressBarProgressWrapper","useUuid","HighlightSliderItem","colors","isActive","isFinished","onFinish","index","onClick","duration","isInteractive","shouldEnableKeyboardHighlighting","shouldShowKeyboardHighlighting","uuid","isKeyboardFocusable","handleKeyDown","event","key","preventDefault","createElement","undefined","onKeyDown","tabIndex","role","$shouldShowKeyboardHighlighting","initial","width","left","animate","exit","onAnimationComplete","$backgroundColor","fillColor","transition","ease","style","backgroundColor","displayName"],"sources":["../../../../../src/components/highlight-slider/highlight-slider-item/HighlightSliderItem.tsx"],"sourcesContent":["import React, { FC, KeyboardEventHandler, useCallback } from 'react';\nimport {\n    StyledHighlightSliderItem,\n    StyledHighlightSliderItemBackground,\n    StyledHighlightSliderItemProgress,\n} from './HighlightSliderItem.styles';\nimport { StyledProgressBarProgressWrapper } from '../../progress-bar/ProgressBar.styles';\nimport { useUuid } from '../../../hooks/uuid';\n\nexport interface HighlightSliderItemColors {\n    backgroundColor: string;\n    fillColor: string;\n}\n\nexport type HighlightSliderItemProps = {\n    index: number;\n    isActive: boolean;\n    isFinished: boolean;\n    onClick: (index: number) => void;\n    onFinish: (index: number) => void;\n    duration: number;\n    colors: HighlightSliderItemColors;\n    isInteractive: boolean;\n    shouldEnableKeyboardHighlighting?: boolean;\n    shouldShowKeyboardHighlighting?: boolean;\n};\n\nconst HighlightSliderItem: FC<HighlightSliderItemProps> = ({\n    colors,\n    isActive,\n    isFinished,\n    onFinish,\n    index,\n    onClick,\n    duration,\n    isInteractive,\n    shouldEnableKeyboardHighlighting,\n    shouldShowKeyboardHighlighting = false,\n}) => {\n    const uuid = useUuid();\n    const isKeyboardFocusable = isInteractive && shouldEnableKeyboardHighlighting;\n\n    const handleKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n        (event) => {\n            if (!isInteractive) {\n                return;\n            }\n\n            if (event.key === 'Enter' || event.key === ' ') {\n                event.preventDefault();\n                onClick(index);\n            }\n        },\n        [index, isInteractive, onClick],\n    );\n\n    return (\n        <StyledHighlightSliderItem\n            onClick={isInteractive ? () => onClick(index) : undefined}\n            onKeyDown={isKeyboardFocusable ? handleKeyDown : undefined}\n            tabIndex={isKeyboardFocusable ? 0 : -1}\n            role={isInteractive ? 'button' : undefined}\n            $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n        >\n            <StyledProgressBarProgressWrapper>\n                {isActive && (\n                    <StyledHighlightSliderItemProgress\n                        key={`highlight-slider-item-active--${uuid}`}\n                        initial={{ width: '100%', left: '-100%' }}\n                        animate={{ width: '100%', left: '0%' }}\n                        exit={{ width: '100%', left: '0%' }}\n                        onAnimationComplete={() => onFinish(index)}\n                        $backgroundColor={colors.fillColor}\n                        transition={{\n                            ease: 'linear',\n                            duration,\n                        }}\n                    />\n                )}\n                {isFinished && (\n                    <StyledHighlightSliderItemProgress\n                        key={`highlight-slider-item-finished--${uuid}`}\n                        style={{ width: '100%', left: '0%' }}\n                        $backgroundColor={colors.fillColor}\n                    />\n                )}\n                <StyledHighlightSliderItemBackground $backgroundColor={colors.backgroundColor} />\n            </StyledProgressBarProgressWrapper>\n        </StyledHighlightSliderItem>\n    );\n};\n\nHighlightSliderItem.displayName = 'HighlightSliderItem';\n\nexport default HighlightSliderItem;\n"],"mappings":"AAAA,OAAOA,KAAK,IAA8BC,WAAW,QAAQ,OAAO;AACpE,SACIC,yBAAyB,EACzBC,mCAAmC,EACnCC,iCAAiC,QAC9B,8BAA8B;AACrC,SAASC,gCAAgC,QAAQ,uCAAuC;AACxF,SAASC,OAAO,QAAQ,qBAAqB;AAoB7C,MAAMC,mBAAiD,GAAGA,CAAC;EACvDC,MAAM;EACNC,QAAQ;EACRC,UAAU;EACVC,QAAQ;EACRC,KAAK;EACLC,OAAO;EACPC,QAAQ;EACRC,aAAa;EACbC,gCAAgC;EAChCC,8BAA8B,GAAG;AACrC,CAAC,KAAK;EACF,MAAMC,IAAI,GAAGZ,OAAO,CAAC,CAAC;EACtB,MAAMa,mBAAmB,GAAGJ,aAAa,IAAIC,gCAAgC;EAE7E,MAAMI,aAAa,GAAGnB,WAAW,CAC5BoB,KAAK,IAAK;IACP,IAAI,CAACN,aAAa,EAAE;MAChB;IACJ;IAEA,IAAIM,KAAK,CAACC,GAAG,KAAK,OAAO,IAAID,KAAK,CAACC,GAAG,KAAK,GAAG,EAAE;MAC5CD,KAAK,CAACE,cAAc,CAAC,CAAC;MACtBV,OAAO,CAACD,KAAK,CAAC;IAClB;EACJ,CAAC,EACD,CAACA,KAAK,EAAEG,aAAa,EAAEF,OAAO,CAClC,CAAC;EAED,oBACIb,KAAA,CAAAwB,aAAA,CAACtB,yBAAyB;IACtBW,OAAO,EAAEE,aAAa,GAAG,MAAMF,OAAO,CAACD,KAAK,CAAC,GAAGa,SAAU;IAC1DC,SAAS,EAAEP,mBAAmB,GAAGC,aAAa,GAAGK,SAAU;IAC3DE,QAAQ,EAAER,mBAAmB,GAAG,CAAC,GAAG,CAAC,CAAE;IACvCS,IAAI,EAAEb,aAAa,GAAG,QAAQ,GAAGU,SAAU;IAC3CI,+BAA+B,EAAEZ;EAA+B,gBAEhEjB,KAAA,CAAAwB,aAAA,CAACnB,gCAAgC,QAC5BI,QAAQ,iBACLT,KAAA,CAAAwB,aAAA,CAACpB,iCAAiC;IAC9BkB,GAAG,EAAE,iCAAiCJ,IAAI,EAAG;IAC7CY,OAAO,EAAE;MAAEC,KAAK,EAAE,MAAM;MAAEC,IAAI,EAAE;IAAQ,CAAE;IAC1CC,OAAO,EAAE;MAAEF,KAAK,EAAE,MAAM;MAAEC,IAAI,EAAE;IAAK,CAAE;IACvCE,IAAI,EAAE;MAAEH,KAAK,EAAE,MAAM;MAAEC,IAAI,EAAE;IAAK,CAAE;IACpCG,mBAAmB,EAAEA,CAAA,KAAMxB,QAAQ,CAACC,KAAK,CAAE;IAC3CwB,gBAAgB,EAAE5B,MAAM,CAAC6B,SAAU;IACnCC,UAAU,EAAE;MACRC,IAAI,EAAE,QAAQ;MACdzB;IACJ;EAAE,CACL,CACJ,EACAJ,UAAU,iBACPV,KAAA,CAAAwB,aAAA,CAACpB,iCAAiC;IAC9BkB,GAAG,EAAE,mCAAmCJ,IAAI,EAAG;IAC/CsB,KAAK,EAAE;MAAET,KAAK,EAAE,MAAM;MAAEC,IAAI,EAAE;IAAK,CAAE;IACrCI,gBAAgB,EAAE5B,MAAM,CAAC6B;EAAU,CACtC,CACJ,eACDrC,KAAA,CAAAwB,aAAA,CAACrB,mCAAmC;IAACiC,gBAAgB,EAAE5B,MAAM,CAACiC;EAAgB,CAAE,CAClD,CACX,CAAC;AAEpC,CAAC;AAEDlC,mBAAmB,CAACmC,WAAW,GAAG,qBAAqB;AAEvD,eAAenC,mBAAmB","ignoreList":[]}

package/lib/esm/components/highlight-slider/highlight-slider-item/HighlightSliderItem.styles.js

@@ -1,5 +1,6 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { motion } from 'motion/react';
+import { keyboardFocusHighlightingRingCss } from '../../../utils/keyboardFocusHighlighting.styles';
 export const StyledHighlightSliderItem = styled.div`
     overflow: hidden;
     position: relative;
@@ -7,6 +8,14 @@ export const StyledHighlightSliderItem = styled.div`
     height: 4px;
     border-radius: 4px;
     cursor: pointer;
+
+    ${({
+  $shouldShowKeyboardHighlighting
+}) => $shouldShowKeyboardHighlighting && css`
+            &:focus-visible {
+                ${keyboardFocusHighlightingRingCss}
+            }
+        `}
 `;
 export const StyledHighlightSliderItemProgress = styled(motion.div)`
     height: 4px;

package/lib/esm/components/highlight-slider/highlight-slider-item/HighlightSliderItem.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"HighlightSliderItem.styles.js","names":["styled","motion","StyledHighlightSliderItem","div","StyledHighlightSliderItemProgress","$backgroundColor","StyledHighlightSliderItemBackground"],"sources":["../../../../../src/components/highlight-slider/highlight-slider-item/HighlightSliderItem.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { motion } from 'motion/react';\nimport { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledHighlightSliderItem = styled.div`\n    overflow: hidden;\n    position: relative;\n    width: 100%;\n    height: 4px;\n    border-radius: 4px;\n    cursor: pointer;\n`;\ntype StyledHighlightSliderItemProgressProps = WithTheme<{ $backgroundColor: string }>;\n\nexport const StyledHighlightSliderItemProgress = styled(\n    motion.div,\n)<StyledHighlightSliderItemProgressProps>`\n    height: 4px;\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 2;\n    background-color: ${({ $backgroundColor }: StyledHighlightSliderItemProgressProps) =>\n        $backgroundColor};\n`;\n\ntype StyledHighlightSliderItemBackgroundProps = WithTheme<{ $backgroundColor: string }>;\n\nexport const StyledHighlightSliderItemBackground = styled(\n    motion.div,\n)<StyledHighlightSliderItemBackgroundProps>`\n    height: 4px;\n    width: 100%;\n    border-radius: 2px;\n    background-color: ${({ $backgroundColor }: StyledHighlightSliderItemBackgroundProps) =>\n        $backgroundColor};\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,MAAM,QAAQ,cAAc;AAGrC,OAAO,MAAMC,yBAAyB,GAAGF,MAAM,CAACG,GAAG;AACnD;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAGD,OAAO,MAAMC,iCAAiC,GAAGJ,MAAM,CACnDC,MAAM,CAACE,GACX,CAAyC;AACzC;AACA;AACA;AACA;AACA;AACA,wBAAwB,CAAC;EAAEE;AAAyD,CAAC,KAC7EA,gBAAgB;AACxB,CAAC;AAID,OAAO,MAAMC,mCAAmC,GAAGN,MAAM,CACrDC,MAAM,CAACE,GACX,CAA2C;AAC3C;AACA;AACA;AACA,wBAAwB,CAAC;EAAEE;AAA2D,CAAC,KAC/EA,gBAAgB;AACxB,CAAC","ignoreList":[]}
+{"version":3,"file":"HighlightSliderItem.styles.js","names":["styled","css","motion","keyboardFocusHighlightingRingCss","StyledHighlightSliderItem","div","$shouldShowKeyboardHighlighting","StyledHighlightSliderItemProgress","$backgroundColor","StyledHighlightSliderItemBackground"],"sources":["../../../../../src/components/highlight-slider/highlight-slider-item/HighlightSliderItem.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { motion } from 'motion/react';\nimport { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { keyboardFocusHighlightingRingCss } from '../../../utils/keyboardFocusHighlighting.styles';\n\ntype StyledHighlightSliderItemProps = {\n    $shouldShowKeyboardHighlighting?: boolean;\n};\n\nexport const StyledHighlightSliderItem = styled.div<StyledHighlightSliderItemProps>`\n    overflow: hidden;\n    position: relative;\n    width: 100%;\n    height: 4px;\n    border-radius: 4px;\n    cursor: pointer;\n\n    ${({ $shouldShowKeyboardHighlighting }) =>\n        $shouldShowKeyboardHighlighting &&\n        css`\n            &:focus-visible {\n                ${keyboardFocusHighlightingRingCss}\n            }\n        `}\n`;\ntype StyledHighlightSliderItemProgressProps = WithTheme<{ $backgroundColor: string }>;\n\nexport const StyledHighlightSliderItemProgress = styled(\n    motion.div,\n)<StyledHighlightSliderItemProgressProps>`\n    height: 4px;\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 2;\n    background-color: ${({ $backgroundColor }: StyledHighlightSliderItemProgressProps) =>\n        $backgroundColor};\n`;\n\ntype StyledHighlightSliderItemBackgroundProps = WithTheme<{ $backgroundColor: string }>;\n\nexport const StyledHighlightSliderItemBackground = styled(\n    motion.div,\n)<StyledHighlightSliderItemBackgroundProps>`\n    height: 4px;\n    width: 100%;\n    border-radius: 2px;\n    background-color: ${({ $backgroundColor }: StyledHighlightSliderItemBackgroundProps) =>\n        $backgroundColor};\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,MAAM,QAAQ,cAAc;AAErC,SAASC,gCAAgC,QAAQ,iDAAiD;AAMlG,OAAO,MAAMC,yBAAyB,GAAGJ,MAAM,CAACK,GAAmC;AACnF;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAgC,CAAC,KAClCA,+BAA+B,IAC/BL,GAAG;AACX;AACA,kBAAkBE,gCAAgC;AAClD;AACA,SAAS;AACT,CAAC;AAGD,OAAO,MAAMI,iCAAiC,GAAGP,MAAM,CACnDE,MAAM,CAACG,GACX,CAAyC;AACzC;AACA;AACA;AACA;AACA;AACA,wBAAwB,CAAC;EAAEG;AAAyD,CAAC,KAC7EA,gBAAgB;AACxB,CAAC;AAID,OAAO,MAAMC,mCAAmC,GAAGT,MAAM,CACrDE,MAAM,CAACG,GACX,CAA2C;AAC3C;AACA;AACA;AACA,wBAAwB,CAAC;EAAEG;AAA2D,CAAC,KAC/EA,gBAAgB;AACxB,CAAC","ignoreList":[]}

package/lib/esm/components/icon/Icon.js

@@ -1,7 +1,9 @@
 import clsx from 'clsx';
 import React from 'react';
 import { getStackSizeFactor } from '../../utils/icon';
-import { StyledIcon, StyledIconWrapper } from './Icon.styles';
+import { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';
+import { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';
+import { StyledIcon as StyledIconElement, StyledIconWrapper } from './Icon.styles';
 import { useTheme } from 'styled-components';
 const Icon = ({
   className,
@@ -13,9 +15,14 @@ const Icon = ({
   onMouseDown,
   tabIndex,
   size = 15,
-  shouldStopPropagation
+  shouldStopPropagation,
+  shouldEnableKeyboardHighlighting
 }) => {
   const theme = useTheme();
+  const colorScheme = useColorScheme();
+  const shouldEnableKeyboardHighlightingEffective = shouldEnableKeyboardHighlighting ?? colorScheme?.shouldEnableKeyboardHighlighting ?? false;
+  const isClickable = typeof onClick === 'function' && !isDisabled;
+  const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlightingEffective && isClickable);
   const handleClick = event => {
     if (shouldStopPropagation) {
       event.stopPropagation();
@@ -32,6 +39,15 @@ const Icon = ({
       onDoubleClick(event);
     }
   };
+  const handleKeyDown = event => {
+    if (!isClickable) {
+      return;
+    }
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      handleClick(event);
+    }
+  };
   let maxStackSizeFactor = 1;
   icons.forEach(icon => {
     const stackSizeFactor = getStackSizeFactor(icon);
@@ -42,14 +58,17 @@ const Icon = ({
   const shouldUseStackedIcon = icons.length > 1;
   const wrapperClasses = clsx('beta-chayns-icon', shouldUseStackedIcon ? 'fa-stack' : '', className);
   return /*#__PURE__*/React.createElement(StyledIconWrapper, {
-    tabIndex: tabIndex,
+    tabIndex: shouldEnableKeyboardHighlightingEffective && isClickable ? tabIndex ?? 0 : tabIndex,
     className: wrapperClasses,
     $isDisabled: isDisabled,
-    onClick: typeof onClick === 'function' && !isDisabled ? handleClick : undefined,
-    $isOnClick: typeof onClick === 'function' && !isDisabled,
+    onClick: isClickable ? handleClick : undefined,
+    $isOnClick: isClickable,
     onDoubleClick: typeof onDoubleClick === 'function' && !isDisabled ? handleDoubleClick : undefined,
     onMouseDown: typeof onMouseDown === 'function' && !isDisabled ? onMouseDown : undefined,
-    $size: size
+    onKeyDown: shouldEnableKeyboardHighlightingEffective ? handleKeyDown : undefined,
+    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
+    $size: size,
+    role: isClickable ? 'button' : undefined
   }, icons.map(icon => {
     const stackSizeFactor = getStackSizeFactor(icon);
     const iconStyle = `${theme?.iconStyle ?? 'fa-regular'} `;
@@ -57,7 +76,7 @@ const Icon = ({
     const iconClasses = clsx(themedIcon, {
       'fa-stack-1x': shouldUseStackedIcon && stackSizeFactor === undefined
     });
-    return /*#__PURE__*/React.createElement(StyledIcon, {
+    return /*#__PURE__*/React.createElement(StyledIconElement, {
       className: iconClasses,
       $color: icon.includes('fa-inverse') ? 'white' : color,
       $fontSize: (stackSizeFactor || 1) / maxStackSizeFactor * size,

package/lib/esm/components/icon/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","names":["clsx","React","getStackSizeFactor","StyledIcon","StyledIconWrapper","useTheme","Icon","className","color","icons","isDisabled","onClick","onDoubleClick","onMouseDown","tabIndex","size","shouldStopPropagation","theme","handleClick","event","stopPropagation","handleDoubleClick","maxStackSizeFactor","forEach","icon","stackSizeFactor","shouldUseStackedIcon","length","wrapperClasses","createElement","$isDisabled","undefined","$isOnClick","$size","map","iconStyle","themedIcon","replace","iconClasses","$color","includes","$fontSize","$isStacked","key","displayName"],"sources":["../../../../src/components/icon/Icon.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { FC, MouseEventHandler } from 'react';\nimport { getStackSizeFactor } from '../../utils/icon';\nimport { StyledIcon, StyledIconWrapper } from './Icon.styles';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport type IconProps = {\n    /**\n     * Additional class name for the icon wrapper element.\n     * @description\n     * This class name is applied to the wrapper element that contains the icon. It can be used to\n     * style the icon wrapper element.\n     * @example\n     * <Icon className=\"my-custom-class\" icons={['fa-user']} />\n     * @optional\n     */\n    className?: string;\n    /**\n     * The color of the icon.\n     * @description\n     * This property can be used to set the color of the icon. The color is only used for icons that\n     * don't have a predefined color (e.g., 'fa-inverse' icons will always be white). If no color is\n     * specified, the icon color of the theme or the text color will be used.\n     * @example\n     * <Icon color=\"red\" icons={['fa-user']} />\n     * @optional\n     */\n    color?: string;\n    /**\n     * The icon(s) to be displayed.\n     * @description\n     * This property can be used to set the icon(s) to be displayed. The icon(s) must be specified as\n     * an array of strings. Each string must be a valid icon name.\n     * @example\n     * <Icon icons={['fa-user']} />\n     * <Icon icons={['fa fa-circle fa-stack-2x', 'fa fa-french-fries fa-inverse']} />\n     */\n    icons: string[];\n    /**\n     * Whether the icon should be disabled.\n     * @description\n     * This property can be used to disable the icon. When the icon is disabled, it will not be\n     * clickable, and it will not emit any events.\n     * @example\n     * <Icon icons={['fa-user']} isDisabled />\n     * @optional\n     */\n    isDisabled?: boolean;\n    /**\n     * Function to be executed when the icon is clicked.\n     * @description\n     * This function is executed when the icon is clicked. It can be used to handle the click event.\n     * @example\n     * <Icon icons={['fa-user']} onClick={() => console.log('Icon clicked')} />\n     * @optional\n     */\n    onClick?: MouseEventHandler<HTMLSpanElement>;\n    /**\n     * Function to be executed when the icon is double-clicked.\n     * @description\n     * This function is executed when the icon is double-clicked. It can be used to handle the\n     * double-click event.\n     * @example\n     * <Icon icons={['fa-user']} onDoubleClick={() => console.log('Icon double-clicked')} />\n     * @optional\n     */\n    onDoubleClick?: MouseEventHandler<HTMLSpanElement>;\n    /**\n     * Function to be executed when the icon is pressed.\n     * @description\n     * This function is executed when the icon is pressed. It can be used to handle the mouse down event.\n     * @example\n     * <Icon icons={['fa-user']} onMouseDown={() => console.log('Icon pressed')} />\n     * @optional\n     */\n    onMouseDown?: MouseEventHandler<HTMLSpanElement>;\n    /**\n     * The size of the icon.\n     * @description\n     * This property can be used to set the size of the icon. The size must be specified as a number\n     * in pixels.\n     * @default 15\n     * @example\n     * <Icon icons={['fa-user']} size={20} />\n     * @optional\n     */\n    size?: number;\n    /**\n     * Stops event propagation on click.\n     * @description\n     * This property can be used to prevent the icon from propagating the click event to its parent\n     * elements.\n     * @example\n     * <Icon icons={['fa-user']} shouldStopPropagation />\n     * @optional\n     */\n    shouldStopPropagation?: boolean;\n    /**\n     * Optional tab index for the icon.\n     */\n    tabIndex?: number;\n};\n\nconst Icon: FC<IconProps> = ({\n    className,\n    color,\n    icons,\n    isDisabled,\n    onClick,\n    onDoubleClick,\n    onMouseDown,\n    tabIndex,\n    size = 15,\n    shouldStopPropagation,\n}) => {\n    const theme = useTheme() as Theme;\n\n    const handleClick: MouseEventHandler<HTMLSpanElement> = (event) => {\n        if (shouldStopPropagation) {\n            event.stopPropagation();\n        }\n\n        if (typeof onClick === 'function') {\n            onClick(event);\n        }\n    };\n\n    const handleDoubleClick: MouseEventHandler<HTMLSpanElement> = (event) => {\n        if (shouldStopPropagation) {\n            event.stopPropagation();\n        }\n\n        if (typeof onDoubleClick === 'function') {\n            onDoubleClick(event);\n        }\n    };\n\n    let maxStackSizeFactor = 1;\n\n    icons.forEach((icon) => {\n        const stackSizeFactor = getStackSizeFactor(icon);\n\n        if (stackSizeFactor && stackSizeFactor > maxStackSizeFactor) {\n            maxStackSizeFactor = stackSizeFactor;\n        }\n    });\n\n    const shouldUseStackedIcon = icons.length > 1;\n\n    const wrapperClasses = clsx(\n        'beta-chayns-icon',\n        shouldUseStackedIcon ? 'fa-stack' : '',\n        className,\n    );\n\n    return (\n        <StyledIconWrapper\n            tabIndex={tabIndex}\n            className={wrapperClasses}\n            $isDisabled={isDisabled}\n            onClick={typeof onClick === 'function' && !isDisabled ? handleClick : undefined}\n            $isOnClick={typeof onClick === 'function' && !isDisabled}\n            onDoubleClick={\n                typeof onDoubleClick === 'function' && !isDisabled ? handleDoubleClick : undefined\n            }\n            onMouseDown={typeof onMouseDown === 'function' && !isDisabled ? onMouseDown : undefined}\n            $size={size}\n        >\n            {icons.map((icon) => {\n                const stackSizeFactor = getStackSizeFactor(icon);\n\n                const iconStyle = `${(theme?.iconStyle as string) ?? 'fa-regular'} `;\n                const themedIcon = icon?.replace(/^fa\\s/, iconStyle);\n\n                const iconClasses = clsx(themedIcon, {\n                    'fa-stack-1x': shouldUseStackedIcon && stackSizeFactor === undefined,\n                });\n\n                return (\n                    <StyledIcon\n                        className={iconClasses}\n                        $color={icon.includes('fa-inverse') ? 'white' : color}\n                        $fontSize={((stackSizeFactor || 1) / maxStackSizeFactor) * size}\n                        $isStacked={shouldUseStackedIcon}\n                        key={icon}\n                        $size={size}\n                    />\n                );\n            })}\n        </StyledIconWrapper>\n    );\n};\n\nIcon.displayName = 'Icon';\n\nexport default Icon;\n"],"mappings":"AAAA,OAAOA,IAAI,MAAM,MAAM;AACvB,OAAOC,KAAK,MAAiC,OAAO;AACpD,SAASC,kBAAkB,QAAQ,kBAAkB;AACrD,SAASC,UAAU,EAAEC,iBAAiB,QAAQ,eAAe;AAC7D,SAASC,QAAQ,QAAQ,mBAAmB;AAoG5C,MAAMC,IAAmB,GAAGA,CAAC;EACzBC,SAAS;EACTC,KAAK;EACLC,KAAK;EACLC,UAAU;EACVC,OAAO;EACPC,aAAa;EACbC,WAAW;EACXC,QAAQ;EACRC,IAAI,GAAG,EAAE;EACTC;AACJ,CAAC,KAAK;EACF,MAAMC,KAAK,GAAGZ,QAAQ,CAAC,CAAU;EAEjC,MAAMa,WAA+C,GAAIC,KAAK,IAAK;IAC/D,IAAIH,qBAAqB,EAAE;MACvBG,KAAK,CAACC,eAAe,CAAC,CAAC;IAC3B;IAEA,IAAI,OAAOT,OAAO,KAAK,UAAU,EAAE;MAC/BA,OAAO,CAACQ,KAAK,CAAC;IAClB;EACJ,CAAC;EAED,MAAME,iBAAqD,GAAIF,KAAK,IAAK;IACrE,IAAIH,qBAAqB,EAAE;MACvBG,KAAK,CAACC,eAAe,CAAC,CAAC;IAC3B;IAEA,IAAI,OAAOR,aAAa,KAAK,UAAU,EAAE;MACrCA,aAAa,CAACO,KAAK,CAAC;IACxB;EACJ,CAAC;EAED,IAAIG,kBAAkB,GAAG,CAAC;EAE1Bb,KAAK,CAACc,OAAO,CAAEC,IAAI,IAAK;IACpB,MAAMC,eAAe,GAAGvB,kBAAkB,CAACsB,IAAI,CAAC;IAEhD,IAAIC,eAAe,IAAIA,eAAe,GAAGH,kBAAkB,EAAE;MACzDA,kBAAkB,GAAGG,eAAe;IACxC;EACJ,CAAC,CAAC;EAEF,MAAMC,oBAAoB,GAAGjB,KAAK,CAACkB,MAAM,GAAG,CAAC;EAE7C,MAAMC,cAAc,GAAG5B,IAAI,CACvB,kBAAkB,EAClB0B,oBAAoB,GAAG,UAAU,GAAG,EAAE,EACtCnB,SACJ,CAAC;EAED,oBACIN,KAAA,CAAA4B,aAAA,CAACzB,iBAAiB;IACdU,QAAQ,EAAEA,QAAS;IACnBP,SAAS,EAAEqB,cAAe;IAC1BE,WAAW,EAAEpB,UAAW;IACxBC,OAAO,EAAE,OAAOA,OAAO,KAAK,UAAU,IAAI,CAACD,UAAU,GAAGQ,WAAW,GAAGa,SAAU;IAChFC,UAAU,EAAE,OAAOrB,OAAO,KAAK,UAAU,IAAI,CAACD,UAAW;IACzDE,aAAa,EACT,OAAOA,aAAa,KAAK,UAAU,IAAI,CAACF,UAAU,GAAGW,iBAAiB,GAAGU,SAC5E;IACDlB,WAAW,EAAE,OAAOA,WAAW,KAAK,UAAU,IAAI,CAACH,UAAU,GAAGG,WAAW,GAAGkB,SAAU;IACxFE,KAAK,EAAElB;EAAK,GAEXN,KAAK,CAACyB,GAAG,CAAEV,IAAI,IAAK;IACjB,MAAMC,eAAe,GAAGvB,kBAAkB,CAACsB,IAAI,CAAC;IAEhD,MAAMW,SAAS,GAAG,GAAIlB,KAAK,EAAEkB,SAAS,IAAe,YAAY,GAAG;IACpE,MAAMC,UAAU,GAAGZ,IAAI,EAAEa,OAAO,CAAC,OAAO,EAAEF,SAAS,CAAC;IAEpD,MAAMG,WAAW,GAAGtC,IAAI,CAACoC,UAAU,EAAE;MACjC,aAAa,EAAEV,oBAAoB,IAAID,eAAe,KAAKM;IAC/D,CAAC,CAAC;IAEF,oBACI9B,KAAA,CAAA4B,aAAA,CAAC1B,UAAU;MACPI,SAAS,EAAE+B,WAAY;MACvBC,MAAM,EAAEf,IAAI,CAACgB,QAAQ,CAAC,YAAY,CAAC,GAAG,OAAO,GAAGhC,KAAM;MACtDiC,SAAS,EAAG,CAAChB,eAAe,IAAI,CAAC,IAAIH,kBAAkB,GAAIP,IAAK;MAChE2B,UAAU,EAAEhB,oBAAqB;MACjCiB,GAAG,EAAEnB,IAAK;MACVS,KAAK,EAAElB;IAAK,CACf,CAAC;EAEV,CAAC,CACc,CAAC;AAE5B,CAAC;AAEDT,IAAI,CAACsC,WAAW,GAAG,MAAM;AAEzB,eAAetC,IAAI","ignoreList":[]}
+{"version":3,"file":"Icon.js","names":["clsx","React","getStackSizeFactor","useKeyboardFocusHighlighting","useColorScheme","StyledIcon","StyledIconElement","StyledIconWrapper","useTheme","Icon","className","color","icons","isDisabled","onClick","onDoubleClick","onMouseDown","tabIndex","size","shouldStopPropagation","shouldEnableKeyboardHighlighting","theme","colorScheme","shouldEnableKeyboardHighlightingEffective","isClickable","shouldShowKeyboardHighlighting","handleClick","event","stopPropagation","handleDoubleClick","handleKeyDown","key","preventDefault","maxStackSizeFactor","forEach","icon","stackSizeFactor","shouldUseStackedIcon","length","wrapperClasses","createElement","$isDisabled","undefined","$isOnClick","onKeyDown","$shouldShowKeyboardHighlighting","$size","role","map","iconStyle","themedIcon","replace","iconClasses","$color","includes","$fontSize","$isStacked","displayName"],"sources":["../../../../src/components/icon/Icon.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { FC, KeyboardEventHandler, MouseEventHandler } from 'react';\nimport { getStackSizeFactor } from '../../utils/icon';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { StyledIcon as StyledIconElement, StyledIconWrapper } from './Icon.styles';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport type IconProps = {\n    /**\n     * Additional class name for the icon wrapper element.\n     * @description\n     * This class name is applied to the wrapper element that contains the icon. It can be used to\n     * style the icon wrapper element.\n     * @example\n     * <Icon className=\"my-custom-class\" icons={['fa-user']} />\n     * @optional\n     */\n    className?: string;\n    /**\n     * The color of the icon.\n     * @description\n     * This property can be used to set the color of the icon. The color is only used for icons that\n     * don't have a predefined color (e.g., 'fa-inverse' icons will always be white). If no color is\n     * specified, the icon color of the theme or the text color will be used.\n     * @example\n     * <Icon color=\"red\" icons={['fa-user']} />\n     * @optional\n     */\n    color?: string;\n    /**\n     * The icon(s) to be displayed.\n     * @description\n     * This property can be used to set the icon(s) to be displayed. The icon(s) must be specified as\n     * an array of strings. Each string must be a valid icon name.\n     * @example\n     * <Icon icons={['fa-user']} />\n     * <Icon icons={['fa fa-circle fa-stack-2x', 'fa fa-french-fries fa-inverse']} />\n     */\n    icons: string[];\n    /**\n     * Whether the icon should be disabled.\n     * @description\n     * This property can be used to disable the icon. When the icon is disabled, it will not be\n     * clickable, and it will not emit any events.\n     * @example\n     * <Icon icons={['fa-user']} isDisabled />\n     * @optional\n     */\n    isDisabled?: boolean;\n    /**\n     * Function to be executed when the icon is clicked.\n     * @description\n     * This function is executed when the icon is clicked. It can be used to handle the click event.\n     * @example\n     * <Icon icons={['fa-user']} onClick={() => console.log('Icon clicked')} />\n     * @optional\n     */\n    onClick?: MouseEventHandler<HTMLSpanElement>;\n    /**\n     * Function to be executed when the icon is double-clicked.\n     * @description\n     * This function is executed when the icon is double-clicked. It can be used to handle the\n     * double-click event.\n     * @example\n     * <Icon icons={['fa-user']} onDoubleClick={() => console.log('Icon double-clicked')} />\n     * @optional\n     */\n    onDoubleClick?: MouseEventHandler<HTMLSpanElement>;\n    /**\n     * Function to be executed when the icon is pressed.\n     * @description\n     * This function is executed when the icon is pressed. It can be used to handle the mouse down event.\n     * @example\n     * <Icon icons={['fa-user']} onMouseDown={() => console.log('Icon pressed')} />\n     * @optional\n     */\n    onMouseDown?: MouseEventHandler<HTMLSpanElement>;\n    /**\n     * The size of the icon.\n     * @description\n     * This property can be used to set the size of the icon. The size must be specified as a number\n     * in pixels.\n     * @default 15\n     * @example\n     * <Icon icons={['fa-user']} size={20} />\n     * @optional\n     */\n    size?: number;\n    /**\n     * Stops event propagation on click.\n     * @description\n     * This property can be used to prevent the icon from propagating the click event to its parent\n     * elements.\n     * @example\n     * <Icon icons={['fa-user']} shouldStopPropagation />\n     * @optional\n     */\n    shouldStopPropagation?: boolean;\n    /**\n     * Optional tab index for the icon.\n     */\n    tabIndex?: number;\n    /**\n     * Enables keyboard-only focus highlighting for clickable icons.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst Icon: FC<IconProps> = ({\n    className,\n    color,\n    icons,\n    isDisabled,\n    onClick,\n    onDoubleClick,\n    onMouseDown,\n    tabIndex,\n    size = 15,\n    shouldStopPropagation,\n    shouldEnableKeyboardHighlighting,\n}) => {\n    const theme = useTheme() as Theme;\n    const colorScheme = useColorScheme();\n    const shouldEnableKeyboardHighlightingEffective =\n        shouldEnableKeyboardHighlighting ?? colorScheme?.shouldEnableKeyboardHighlighting ?? false;\n\n    const isClickable = typeof onClick === 'function' && !isDisabled;\n    const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n        shouldEnableKeyboardHighlightingEffective && isClickable,\n    );\n\n    const handleClick: MouseEventHandler<HTMLSpanElement> = (event) => {\n        if (shouldStopPropagation) {\n            event.stopPropagation();\n        }\n\n        if (typeof onClick === 'function') {\n            onClick(event);\n        }\n    };\n\n    const handleDoubleClick: MouseEventHandler<HTMLSpanElement> = (event) => {\n        if (shouldStopPropagation) {\n            event.stopPropagation();\n        }\n\n        if (typeof onDoubleClick === 'function') {\n            onDoubleClick(event);\n        }\n    };\n\n    const handleKeyDown: KeyboardEventHandler<HTMLSpanElement> = (event) => {\n        if (!isClickable) {\n            return;\n        }\n\n        if (event.key === 'Enter' || event.key === ' ') {\n            event.preventDefault();\n            handleClick(event as unknown as React.MouseEvent<HTMLSpanElement>);\n        }\n    };\n\n    let maxStackSizeFactor = 1;\n\n    icons.forEach((icon) => {\n        const stackSizeFactor = getStackSizeFactor(icon);\n\n        if (stackSizeFactor && stackSizeFactor > maxStackSizeFactor) {\n            maxStackSizeFactor = stackSizeFactor;\n        }\n    });\n\n    const shouldUseStackedIcon = icons.length > 1;\n\n    const wrapperClasses = clsx(\n        'beta-chayns-icon',\n        shouldUseStackedIcon ? 'fa-stack' : '',\n        className,\n    );\n\n    return (\n        <StyledIconWrapper\n            tabIndex={\n                shouldEnableKeyboardHighlightingEffective && isClickable\n                    ? (tabIndex ?? 0)\n                    : tabIndex\n            }\n            className={wrapperClasses}\n            $isDisabled={isDisabled}\n            onClick={isClickable ? handleClick : undefined}\n            $isOnClick={isClickable}\n            onDoubleClick={\n                typeof onDoubleClick === 'function' && !isDisabled ? handleDoubleClick : undefined\n            }\n            onMouseDown={typeof onMouseDown === 'function' && !isDisabled ? onMouseDown : undefined}\n            onKeyDown={shouldEnableKeyboardHighlightingEffective ? handleKeyDown : undefined}\n            $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n            $size={size}\n            role={isClickable ? 'button' : undefined}\n        >\n            {icons.map((icon) => {\n                const stackSizeFactor = getStackSizeFactor(icon);\n\n                const iconStyle = `${(theme?.iconStyle as string) ?? 'fa-regular'} `;\n                const themedIcon = icon?.replace(/^fa\\s/, iconStyle);\n\n                const iconClasses = clsx(themedIcon, {\n                    'fa-stack-1x': shouldUseStackedIcon && stackSizeFactor === undefined,\n                });\n\n                return (\n                    <StyledIconElement\n                        className={iconClasses}\n                        $color={icon.includes('fa-inverse') ? 'white' : color}\n                        $fontSize={((stackSizeFactor || 1) / maxStackSizeFactor) * size}\n                        $isStacked={shouldUseStackedIcon}\n                        key={icon}\n                        $size={size}\n                    />\n                );\n            })}\n        </StyledIconWrapper>\n    );\n};\n\nIcon.displayName = 'Icon';\n\nexport default Icon;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/icon/Icon.styles.js

@@ -1,4 +1,5 @@
 import styled, { css } from 'styled-components';
+import { keyboardFocusHighlightingCircleRingCss } from '../../utils/keyboardFocusHighlighting.styles';
 export const StyledIconWrapper = styled.span`
     align-items: center;
     cursor: ${({
@@ -19,6 +20,28 @@ export const StyledIconWrapper = styled.span`
   $size
 }) => `${$size}px`};
 
+    ${({
+  $shouldShowKeyboardHighlighting,
+  $size
+}) => $shouldShowKeyboardHighlighting && css`
+            &:focus-visible {
+                outline: none;
+                color: inherit;
+            }
+
+            &:focus-visible::after {
+                ${keyboardFocusHighlightingCircleRingCss};
+                content: '';
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                width: ${$size + 14}px;
+                height: ${$size + 14}px;
+                transform: translate(-50%, -50%);
+                pointer-events: none;
+            }
+        `}
+
     // To insure that stacked icons have the same size as normal icons.
     &&.fa-stack {
         height: fit-content;

package/lib/esm/components/icon/Icon.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.styles.js","names":["styled","css","StyledIconWrapper","span","$isDisabled","$isOnClick","$size","StyledIcon","i","$color","theme","iconColor","text","$isStacked","undefined","$fontSize","StyledUnicodeIcon","headline","$icon","iconStyle"],"sources":["../../../../src/components/icon/Icon.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledIconWrapperProps = {\n    $isDisabled?: boolean;\n    $isOnClick: boolean;\n    $size: number;\n};\n\nexport const StyledIconWrapper = styled.span<StyledIconWrapperProps>`\n    align-items: center;\n    cursor: ${({ $isDisabled, $isOnClick }) =>\n        $isOnClick && !$isDisabled ? 'pointer' : 'inherit'};\n    display: inline-flex;\n    min-height: ${({ $size }) => `${$size}px`};\n    justify-content: center;\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    position: relative;\n    transition: opacity 0.3s ease;\n    min-width: ${({ $size }) => `${$size}px`};\n\n    // To insure that stacked icons have the same size as normal icons.\n    &&.fa-stack {\n        height: fit-content;\n        width: fit-content;\n        line-height: ${({ $size }) => $size}px;\n    }\n`;\n\ntype StyledIconProps = WithTheme<{\n    $fontSize: number;\n    $isStacked?: boolean;\n    $color?: string;\n    $size: number;\n}>;\n\nexport const StyledIcon = styled.i<StyledIconProps>`\n    color: ${({ $color, theme }: StyledIconProps) => $color || theme.iconColor || theme.text};\n    display: ${({ $isStacked }) => ($isStacked ? undefined : 'inline-flex')};\n    font-size: ${({ $fontSize }) => `${$fontSize}px`};\n\n    ${({ $fontSize, $size }) =>\n        $fontSize !== $size &&\n        css`\n            top: 50%;\n            transform: translateY(-50%);\n        `}\n`;\n\ntype StyledUnicodeIconProps = WithTheme<{ $icon: string }>;\n\nexport const StyledUnicodeIcon = styled.i<StyledUnicodeIconProps>`\n    align-items: center;\n    justify-content: center;\n    display: flex;\n    color: ${({ theme }: StyledUnicodeIconProps) => theme.iconColor || theme.headline};\n\n    &:before {\n        content: ${({ $icon }) => `\"\\\\${$icon}\" !important`};\n    }\n    &:after {\n        content: ${({ theme, $icon }) => {\n            if (theme.iconStyle === 'fa-duotone') {\n                return `\"\\\\${$icon}\" !important`;\n            }\n            return '';\n        }};\n    }\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAS/C,OAAO,MAAMC,iBAAiB,GAAGF,MAAM,CAACG,IAA4B;AACpE;AACA,cAAc,CAAC;EAAEC,WAAW;EAAEC;AAAW,CAAC,KAClCA,UAAU,IAAI,CAACD,WAAW,GAAG,SAAS,GAAG,SAAS;AAC1D;AACA,kBAAkB,CAAC;EAAEE;AAAM,CAAC,KAAK,GAAGA,KAAK,IAAI;AAC7C;AACA,eAAe,CAAC;EAAEF;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA;AACA,iBAAiB,CAAC;EAAEE;AAAM,CAAC,KAAK,GAAGA,KAAK,IAAI;AAC5C;AACA;AACA;AACA;AACA;AACA,uBAAuB,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK;AAC3C;AACA,CAAC;AASD,OAAO,MAAMC,UAAU,GAAGP,MAAM,CAACQ,CAAkB;AACnD,aAAa,CAAC;EAAEC,MAAM;EAAEC;AAAuB,CAAC,KAAKD,MAAM,IAAIC,KAAK,CAACC,SAAS,IAAID,KAAK,CAACE,IAAI;AAC5F,eAAe,CAAC;EAAEC;AAAW,CAAC,KAAMA,UAAU,GAAGC,SAAS,GAAG,aAAc;AAC3E,iBAAiB,CAAC;EAAEC;AAAU,CAAC,KAAK,GAAGA,SAAS,IAAI;AACpD;AACA,MAAM,CAAC;EAAEA,SAAS;EAAET;AAAM,CAAC,KACnBS,SAAS,KAAKT,KAAK,IACnBL,GAAG;AACX;AACA;AACA,SAAS;AACT,CAAC;AAID,OAAO,MAAMe,iBAAiB,GAAGhB,MAAM,CAACQ,CAAyB;AACjE;AACA;AACA;AACA,aAAa,CAAC;EAAEE;AAA8B,CAAC,KAAKA,KAAK,CAACC,SAAS,IAAID,KAAK,CAACO,QAAQ;AACrF;AACA;AACA,mBAAmB,CAAC;EAAEC;AAAM,CAAC,KAAK,MAAMA,KAAK,cAAc;AAC3D;AACA;AACA,mBAAmB,CAAC;EAAER,KAAK;EAAEQ;AAAM,CAAC,KAAK;EAC7B,IAAIR,KAAK,CAACS,SAAS,KAAK,YAAY,EAAE;IAClC,OAAO,MAAMD,KAAK,cAAc;EACpC;EACA,OAAO,EAAE;AACb,CAAC;AACT;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"Icon.styles.js","names":["styled","css","keyboardFocusHighlightingCircleRingCss","StyledIconWrapper","span","$isDisabled","$isOnClick","$size","$shouldShowKeyboardHighlighting","StyledIcon","i","$color","theme","iconColor","text","$isStacked","undefined","$fontSize","StyledUnicodeIcon","headline","$icon","iconStyle"],"sources":["../../../../src/components/icon/Icon.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { keyboardFocusHighlightingCircleRingCss } from '../../utils/keyboardFocusHighlighting.styles';\n\ntype StyledIconWrapperProps = {\n    $isDisabled?: boolean;\n    $isOnClick: boolean;\n    $size: number;\n    $shouldShowKeyboardHighlighting?: boolean;\n};\n\nexport const StyledIconWrapper = styled.span<StyledIconWrapperProps>`\n    align-items: center;\n    cursor: ${({ $isDisabled, $isOnClick }) =>\n        $isOnClick && !$isDisabled ? 'pointer' : 'inherit'};\n    display: inline-flex;\n    min-height: ${({ $size }) => `${$size}px`};\n    justify-content: center;\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    position: relative;\n    transition: opacity 0.3s ease;\n    min-width: ${({ $size }) => `${$size}px`};\n\n    ${({ $shouldShowKeyboardHighlighting, $size }) =>\n        $shouldShowKeyboardHighlighting &&\n        css`\n            &:focus-visible {\n                outline: none;\n                color: inherit;\n            }\n\n            &:focus-visible::after {\n                ${keyboardFocusHighlightingCircleRingCss};\n                content: '';\n                position: absolute;\n                top: 50%;\n                left: 50%;\n                width: ${$size + 14}px;\n                height: ${$size + 14}px;\n                transform: translate(-50%, -50%);\n                pointer-events: none;\n            }\n        `}\n\n    // To insure that stacked icons have the same size as normal icons.\n    &&.fa-stack {\n        height: fit-content;\n        width: fit-content;\n        line-height: ${({ $size }) => $size}px;\n    }\n`;\n\ntype StyledIconProps = WithTheme<{\n    $fontSize: number;\n    $isStacked?: boolean;\n    $color?: string;\n    $size: number;\n}>;\n\nexport const StyledIcon = styled.i<StyledIconProps>`\n    color: ${({ $color, theme }: StyledIconProps) => $color || theme.iconColor || theme.text};\n    display: ${({ $isStacked }) => ($isStacked ? undefined : 'inline-flex')};\n    font-size: ${({ $fontSize }) => `${$fontSize}px`};\n\n    ${({ $fontSize, $size }) =>\n        $fontSize !== $size &&\n        css`\n            top: 50%;\n            transform: translateY(-50%);\n        `}\n`;\n\ntype StyledUnicodeIconProps = WithTheme<{ $icon: string }>;\n\nexport const StyledUnicodeIcon = styled.i<StyledUnicodeIconProps>`\n    align-items: center;\n    justify-content: center;\n    display: flex;\n    color: ${({ theme }: StyledUnicodeIconProps) => theme.iconColor || theme.headline};\n\n    &:before {\n        content: ${({ $icon }) => `\"\\\\${$icon}\" !important`};\n    }\n    &:after {\n        content: ${({ theme, $icon }) => {\n            if (theme.iconStyle === 'fa-duotone') {\n                return `\"\\\\${$icon}\" !important`;\n            }\n            return '';\n        }};\n    }\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,sCAAsC,QAAQ,8CAA8C;AASrG,OAAO,MAAMC,iBAAiB,GAAGH,MAAM,CAACI,IAA4B;AACpE;AACA,cAAc,CAAC;EAAEC,WAAW;EAAEC;AAAW,CAAC,KAClCA,UAAU,IAAI,CAACD,WAAW,GAAG,SAAS,GAAG,SAAS;AAC1D;AACA,kBAAkB,CAAC;EAAEE;AAAM,CAAC,KAAK,GAAGA,KAAK,IAAI;AAC7C;AACA,eAAe,CAAC;EAAEF;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA;AACA,iBAAiB,CAAC;EAAEE;AAAM,CAAC,KAAK,GAAGA,KAAK,IAAI;AAC5C;AACA,MAAM,CAAC;EAAEC,+BAA+B;EAAED;AAAM,CAAC,KACzCC,+BAA+B,IAC/BP,GAAG;AACX;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBC,sCAAsC;AACxD;AACA;AACA;AACA;AACA,yBAAyBK,KAAK,GAAG,EAAE;AACnC,0BAA0BA,KAAK,GAAG,EAAE;AACpC;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA,uBAAuB,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK;AAC3C;AACA,CAAC;AASD,OAAO,MAAME,UAAU,GAAGT,MAAM,CAACU,CAAkB;AACnD,aAAa,CAAC;EAAEC,MAAM;EAAEC;AAAuB,CAAC,KAAKD,MAAM,IAAIC,KAAK,CAACC,SAAS,IAAID,KAAK,CAACE,IAAI;AAC5F,eAAe,CAAC;EAAEC;AAAW,CAAC,KAAMA,UAAU,GAAGC,SAAS,GAAG,aAAc;AAC3E,iBAAiB,CAAC;EAAEC;AAAU,CAAC,KAAK,GAAGA,SAAS,IAAI;AACpD;AACA,MAAM,CAAC;EAAEA,SAAS;EAAEV;AAAM,CAAC,KACnBU,SAAS,KAAKV,KAAK,IACnBN,GAAG;AACX;AACA;AACA,SAAS;AACT,CAAC;AAID,OAAO,MAAMiB,iBAAiB,GAAGlB,MAAM,CAACU,CAAyB;AACjE;AACA;AACA;AACA,aAAa,CAAC;EAAEE;AAA8B,CAAC,KAAKA,KAAK,CAACC,SAAS,IAAID,KAAK,CAACO,QAAQ;AACrF;AACA;AACA,mBAAmB,CAAC;EAAEC;AAAM,CAAC,KAAK,MAAMA,KAAK,cAAc;AAC3D;AACA;AACA,mBAAmB,CAAC;EAAER,KAAK;EAAEQ;AAAM,CAAC,KAAK;EAC7B,IAAIR,KAAK,CAACS,SAAS,KAAK,YAAY,EAAE;IAClC,OAAO,MAAMD,KAAK,cAAc;EACpC;EACA,OAAO,EAAE;AACb,CAAC;AACT;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/input/Input.js

@@ -7,6 +7,7 @@ import { StyledInput, StyledInputContent, StyledInputContentWrapper, StyledInput
 import { ContentCardType } from '../../types/contentCard';
 import { useCursorRepaint } from '../../hooks/resize';
 import Tooltip from '../tooltip/Tooltip';
+import { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';
 export let InputSize = /*#__PURE__*/function (InputSize) {
   InputSize["Small"] = "small";
   InputSize["Medium"] = "medium";
@@ -37,7 +38,8 @@ const Input = /*#__PURE__*/forwardRef(({
   shouldPreventPlaceholderAnimation = false,
   id,
   shouldShowTransparentBackground = false,
-  autoComplete
+  autoComplete,
+  shouldEnableKeyboardHighlighting
 }, ref) => {
   const [hasValue, setHasValue] = useState(typeof value === 'string' && value !== '');
   const [placeholderWidth, setPlaceholderWidth] = useState(0);
@@ -63,6 +65,13 @@ const Input = /*#__PURE__*/forwardRef(({
       }
     }
   }, [onChange]);
+  const handleClearIconKeyDown = useCallback(event => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      handleClearIconClick();
+      inputRef.current?.focus();
+    }
+  }, [handleClearIconClick]);
 
   // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
   const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;
@@ -91,6 +100,9 @@ const Input = /*#__PURE__*/forwardRef(({
   } else if (areaProvider.shouldChangeColor) {
     backgroundColor = theme['000'];
   }
+  const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlighting && !isDisabled);
+  const borderColor = color?.border;
+  const placeholderColor = color?.placeholder;
   const labelPosition = useMemo(() => {
     if (hasValue && !shouldRemainPlaceholder && !shouldPreventPlaceholderAnimation) {
       return shouldShowOnlyBottomBorder ? {
@@ -116,7 +128,8 @@ const Input = /*#__PURE__*/forwardRef(({
     $shouldRoundRightCorners: shouldShowBorder,
     $shouldShowOnlyBottomBorder: shouldShowOnlyBottomBorder,
     $size: size,
-    $borderColor: color?.border
+    $borderColor: borderColor,
+    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting
   }, leftElement && /*#__PURE__*/React.createElement(StyledInputIconWrapper, null, leftElement), /*#__PURE__*/React.createElement(StyledInputContent, {
     $shouldShowOnlyBottomBorder: shouldShowOnlyBottomBorder
   }, /*#__PURE__*/React.createElement(StyledInputField, {
@@ -158,23 +171,30 @@ const Input = /*#__PURE__*/forwardRef(({
       duration: shouldPreventPlaceholderAnimation ? 0 : 0.1
     }
   }, /*#__PURE__*/React.createElement(StyledInputLabel, {
-    $color: color?.placeholder,
+    $color: placeholderColor,
     $isInvalid: isInvalid
   }, placeholder))), shouldShowClearIcon && /*#__PURE__*/React.createElement(StyledMotionInputClearIcon, {
     $shouldShowOnlyBottomBorder: shouldShowOnlyBottomBorder,
     $size: size,
+    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
     animate: {
       opacity: hasValue ? 1 : 0
     },
     initial: false,
     onClick: handleClearIconClick,
+    onKeyDown: handleClearIconKeyDown,
+    tabIndex: shouldEnableKeyboardHighlighting && hasValue && !isDisabled ? 0 : -1,
+    role: shouldEnableKeyboardHighlighting ? 'button' : undefined,
+    "aria-hidden": !hasValue,
     transition: {
       type: 'tween'
     }
   }, /*#__PURE__*/React.createElement(Icon, {
     icons: ['fa fa-times'],
     color: isInvalid ? theme.wrong : undefined
-  })), rightElement && shouldShowBorder && rightElement), rightElement && !shouldShowBorder && /*#__PURE__*/React.createElement(StyledInputRightElement, null, rightElement)), [isDisabled, shouldShowTransparentBackground, backgroundColor, isInvalid, shouldShowBorder, shouldShowOnlyBottomBorder, size, leftElement, internalColor, placeholderWidth, id, onBlur, handleInputFieldChange, onFocus, onKeyDown, onPaste, type, value, shouldUseAutoFocus, inputMode, autoComplete, shouldShowCenteredContent, shouldPreventPlaceholderAnimation, hasValue, shouldRemainPlaceholder, theme.fontSize, theme.wrong, labelPosition, color?.placeholder, placeholder, shouldShowClearIcon, handleClearIconClick, rightElement]);
+  })), rightElement && shouldShowBorder && /*#__PURE__*/React.createElement(StyledInputRightElement, {
+    $isInline: true
+  }, rightElement)), rightElement && !shouldShowBorder && /*#__PURE__*/React.createElement(StyledInputRightElement, null, rightElement)), [isDisabled, shouldShowTransparentBackground, backgroundColor, isInvalid, shouldShowBorder, shouldShowOnlyBottomBorder, size, leftElement, internalColor, placeholderWidth, id, onBlur, handleInputFieldChange, onFocus, onKeyDown, onPaste, type, value, shouldUseAutoFocus, inputMode, autoComplete, shouldShowCenteredContent, shouldPreventPlaceholderAnimation, hasValue, shouldRemainPlaceholder, theme.fontSize, theme.wrong, labelPosition, borderColor, placeholderColor, placeholder, shouldShowClearIcon, handleClearIconClick, handleClearIconKeyDown, rightElement, shouldEnableKeyboardHighlighting, shouldShowKeyboardHighlighting]);
   if (isDisabled && typeof disabledHint === 'string') {
     return /*#__PURE__*/React.createElement(Tooltip, {
       item: {