@pega/cosmos-react-core 9.0.0-build.21.3 → 9.0.0-build.21.4

package/lib/components/Card/Card.d.ts

@@ -1,6 +1,6 @@
 import type { Ref, ReactNode, MouseEventHandler } from 'react';
-import type { ForwardRefForwardPropsComponent, BaseProps, AsProp } from '../../types';
-export interface CardProps extends BaseProps, AsProp {
+import type { ForwardRefForwardPropsComponent, BaseProps, AsProp, TestIdProp } from '../../types';
+export interface CardProps extends BaseProps, AsProp, TestIdProp {
     /** Components and content for the Card. */
     children?: ReactNode;
     /**

package/lib/components/Card/Card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAmB,SAAS,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAKhF,OAAO,KAAK,EAAE,+BAA+B,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAMtF,MAAM,WAAW,SAAU,SAAQ,SAAS,EAAE,MAAM;IAClD,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kCAAkC;IAClC,OAAO,CAAC,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAC;IACzC,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,eAAO,MAAM,UAAU,iPAoDrB,CAAC;AAIH,QAAA,MAAM,IAAI,EAAE,+BAA+B,CAAC,SAAS,CA6BnD,CAAC;AAEH,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAmB,SAAS,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAKhF,OAAO,KAAK,EAAE,+BAA+B,EAAE,SAAS,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAOlG,MAAM,WAAW,SAAU,SAAQ,SAAS,EAAE,MAAM,EAAE,UAAU;IAC9D,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kCAAkC;IAClC,OAAO,CAAC,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAC;IACzC,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,eAAO,MAAM,UAAU,iPAkDrB,CAAC;AAIH,QAAA,MAAM,IAAI,EAAE,+BAA+B,CAAC,SAAS,CA+BnD,CAAC;AAEH,eAAe,IAAI,CAAC"}

package/lib/components/Card/Card.js

@@ -3,9 +3,10 @@ import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { defaultThemeProp } from '../../theme';
 import Flex from '../Flex';
-import { StyledPopover } from '../Popover';
 import { useFullscreenContext } from '../Fullscreen';
+import useTestIds from '../../hooks/useTestIds';
 import { StyledCardMedia } from './CardMedia';
+import { getCardTestIds } from './Card.test-ids';
 export const StyledCard = styled.article(props => {
     const fullscreen = useFullscreenContext();
     const { 'border-radius': borderRadius, 'border-color': borderColor, background } = props.theme.components.card;
@@ -22,39 +23,38 @@ export const StyledCard = styled.article(props => {
       `
         : undefined;
     return css `
-    ${StyledPopover} &, &:not(& &) {
-      background: ${background};
+    background: ${background};
 
-      &:focus {
-        outline: none;
-      }
+    &:focus {
+      outline: none;
+    }
 
-      ${interactive}
+    ${interactive}
 
-      ${StyledCardMedia} {
-        &:first-child img {
-          border-radius: var(--container-border-radius, ${borderRadius})
-            var(--container-border-radius, ${borderRadius}) 0 0;
-        }
+    ${StyledCardMedia} {
+      &:first-child img {
+        border-radius: var(--container-border-radius, ${borderRadius})
+          var(--container-border-radius, ${borderRadius}) 0 0;
       }
+    }
 
-      ${fullscreen?.[0]
+    ${fullscreen?.[0]
         ? css `
-            block-size: 100%;
-            border-radius: 0;
-          `
+          block-size: 100%;
+          border-radius: 0;
+        `
         : css `
-            border-radius: var(--border-radius, ${borderRadius});
-            --container-border-radius: var(--border-radius, ${borderRadius});
-            * {
-              --border-radius: calc(var(--container-border-radius) * 0.5);
-            }
-          `}
-    }
+          border-radius: var(--border-radius, var(--container-border-radius));
+          --container-border-radius: ${borderRadius};
+          * {
+            --border-radius: calc(var(--container-border-radius) * 0.5);
+          }
+        `}
   `;
 });
 StyledCard.defaultProps = defaultThemeProp;
-const Card = forwardRef(function Card({ children, as, onClick, interactive = false, ...restProps }, ref) {
+const Card = forwardRef(function Card({ children, as, onClick, interactive = false, testId, ...restProps }, ref) {
+    const testIds = useTestIds(testId, getCardTestIds);
     const interactiveProps = {
         ...(onClick && {
             onClick,
@@ -66,7 +66,7 @@ const Card = forwardRef(function Card({ children, as, onClick, interactive = fal
         }),
         interactive
     };
-    return (_jsx(Flex, { role: 'none', container: { direction: 'column' }, as: StyledCard, forwardedAs: as, ref: ref, ...interactiveProps, ...restProps, children: children }));
+    return (_jsx(Flex, { "data-testid": testIds.root, role: 'none', container: { direction: 'column' }, as: StyledCard, forwardedAs: as, ref: ref, ...interactiveProps, ...restProps, children: children }));
 });
 export default Card;
 //# sourceMappingURL=Card.js.map

package/lib/components/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAErD,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAiB9C,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAqB,KAAK,CAAC,EAAE;IACnE,MAAM,UAAU,GAAG,oBAAoB,EAAE,CAAC;IAE1C,MAAM,EACJ,eAAe,EAAE,YAAY,EAC7B,cAAc,EAAE,WAAW,EAC3B,UAAU,EACX,GAAG,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC;IAChC,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW;QACnC,CAAC,CAAC,GAAG,CAAA;;;wCAG+B,WAAW;;;;uCAIZ,WAAW;;OAE3C;QACH,CAAC,CAAC,SAAS,CAAC;IAEd,OAAO,GAAG,CAAA;MACN,aAAa;oBACC,UAAU;;;;;;QAMtB,WAAW;;QAEX,eAAe;;0DAEmC,YAAY;6CACzB,YAAY;;;;QAIjD,UAAU,EAAE,CAAC,CAAC,CAAC;QACf,CAAC,CAAC,GAAG,CAAA;;;WAGF;QACH,CAAC,CAAC,GAAG,CAAA;kDACqC,YAAY;8DACA,YAAY;;;;WAI/D;;GAER,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,IAAI,GAA+C,UAAU,CAAC,SAAS,IAAI,CAC/E,EAAE,QAAQ,EAAE,EAAE,EAAE,OAAO,EAAE,WAAW,GAAG,KAAK,EAAE,GAAG,SAAS,EAA8B,EACxF,GAAqB;IAErB,MAAM,gBAAgB,GAAG;QACvB,GAAG,CAAC,OAAO,IAAI;YACb,OAAO;YACP,QAAQ,EAAE,CAAC;YACX,IAAI,EAAE,QAAQ;SACf,CAAC;QACF,GAAG,CAAC,WAAW,IAAI;YACjB,QAAQ,EAAE,CAAC;SACZ,CAAC;QACF,WAAW;KACZ,CAAC;IAEF,OAAO,CACL,KAAC,IAAI,IACH,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAClC,EAAE,EAAE,UAAU,EACd,WAAW,EAAE,EAAE,EACf,GAAG,EAAE,GAAG,KACJ,gBAAgB,KAChB,SAAS,YAEZ,QAAQ,GACJ,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,IAAI,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { Ref, PropsWithoutRef, ReactNode, MouseEventHandler } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\nimport type { ForwardRefForwardPropsComponent, BaseProps, AsProp } from '../../types';\nimport { StyledPopover } from '../Popover';\nimport { useFullscreenContext } from '../Fullscreen';\n\nimport { StyledCardMedia } from './CardMedia';\n\nexport interface CardProps extends BaseProps, AsProp {\n  /** Components and content for the Card. */\n  children?: ReactNode;\n  /**\n   * Enables the focus, hover, and active styles.\n   * @default false\n   * @deprecated\n   */\n  interactive?: boolean;\n  /** Callback for onClick event. */\n  onClick?: MouseEventHandler<HTMLElement>;\n  /** Ref forwarded to the wrapping element. */\n  ref?: Ref<HTMLElement>;\n}\n\nexport const StyledCard = styled.article<Partial<CardProps>>(props => {\n  const fullscreen = useFullscreenContext();\n\n  const {\n    'border-radius': borderRadius,\n    'border-color': borderColor,\n    background\n  } = props.theme.components.card;\n  const interactive = props.interactive\n    ? css`\n        &:hover {\n          border: 0;\n          box-shadow: 0 0 0 0.0625rem ${borderColor};\n        }\n        &:focus {\n          border: 0;\n          box-shadow: 0 0 0 0.125rem ${borderColor};\n        }\n      `\n    : undefined;\n\n  return css`\n    ${StyledPopover} &, &:not(& &) {\n      background: ${background};\n\n      &:focus {\n        outline: none;\n      }\n\n      ${interactive}\n\n      ${StyledCardMedia} {\n        &:first-child img {\n          border-radius: var(--container-border-radius, ${borderRadius})\n            var(--container-border-radius, ${borderRadius}) 0 0;\n        }\n      }\n\n      ${fullscreen?.[0]\n        ? css`\n            block-size: 100%;\n            border-radius: 0;\n          `\n        : css`\n            border-radius: var(--border-radius, ${borderRadius});\n            --container-border-radius: var(--border-radius, ${borderRadius});\n            * {\n              --border-radius: calc(var(--container-border-radius) * 0.5);\n            }\n          `}\n    }\n  `;\n});\n\nStyledCard.defaultProps = defaultThemeProp;\n\nconst Card: ForwardRefForwardPropsComponent<CardProps> = forwardRef(function Card(\n  { children, as, onClick, interactive = false, ...restProps }: PropsWithoutRef<CardProps>,\n  ref: CardProps['ref']\n) {\n  const interactiveProps = {\n    ...(onClick && {\n      onClick,\n      tabIndex: 0,\n      role: 'button'\n    }),\n    ...(interactive && {\n      tabIndex: 0\n    }),\n    interactive\n  };\n\n  return (\n    <Flex\n      role='none'\n      container={{ direction: 'column' }}\n      as={StyledCard}\n      forwardedAs={as}\n      ref={ref}\n      {...interactiveProps}\n      {...restProps}\n    >\n      {children}\n    </Flex>\n  );\n});\n\nexport default Card;\n"]}
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,UAAU,MAAM,wBAAwB,CAAC;AAEhD,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAiBjD,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAqB,KAAK,CAAC,EAAE;IACnE,MAAM,UAAU,GAAG,oBAAoB,EAAE,CAAC;IAE1C,MAAM,EACJ,eAAe,EAAE,YAAY,EAC7B,cAAc,EAAE,WAAW,EAC3B,UAAU,EACX,GAAG,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC;IAChC,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW;QACnC,CAAC,CAAC,GAAG,CAAA;;;wCAG+B,WAAW;;;;uCAIZ,WAAW;;OAE3C;QACH,CAAC,CAAC,SAAS,CAAC;IAEd,OAAO,GAAG,CAAA;kBACM,UAAU;;;;;;MAMtB,WAAW;;MAEX,eAAe;;wDAEmC,YAAY;2CACzB,YAAY;;;;MAIjD,UAAU,EAAE,CAAC,CAAC,CAAC;QACf,CAAC,CAAC,GAAG,CAAA;;;SAGF;QACH,CAAC,CAAC,GAAG,CAAA;;uCAE4B,YAAY;;;;SAI1C;GACN,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,IAAI,GAA+C,UAAU,CAAC,SAAS,IAAI,CAC/E,EAAE,QAAQ,EAAE,EAAE,EAAE,OAAO,EAAE,WAAW,GAAG,KAAK,EAAE,MAAM,EAAE,GAAG,SAAS,EAA8B,EAChG,GAAqB;IAErB,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;IACnD,MAAM,gBAAgB,GAAG;QACvB,GAAG,CAAC,OAAO,IAAI;YACb,OAAO;YACP,QAAQ,EAAE,CAAC;YACX,IAAI,EAAE,QAAQ;SACf,CAAC;QACF,GAAG,CAAC,WAAW,IAAI;YACjB,QAAQ,EAAE,CAAC;SACZ,CAAC;QACF,WAAW;KACZ,CAAC;IAEF,OAAO,CACL,KAAC,IAAI,mBACU,OAAO,CAAC,IAAI,EACzB,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAClC,EAAE,EAAE,UAAU,EACd,WAAW,EAAE,EAAE,EACf,GAAG,EAAE,GAAG,KACJ,gBAAgB,KAChB,SAAS,YAEZ,QAAQ,GACJ,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,IAAI,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { Ref, PropsWithoutRef, ReactNode, MouseEventHandler } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\nimport type { ForwardRefForwardPropsComponent, BaseProps, AsProp, TestIdProp } from '../../types';\nimport { useFullscreenContext } from '../Fullscreen';\nimport useTestIds from '../../hooks/useTestIds';\n\nimport { StyledCardMedia } from './CardMedia';\nimport { getCardTestIds } from './Card.test-ids';\n\nexport interface CardProps extends BaseProps, AsProp, TestIdProp {\n  /** Components and content for the Card. */\n  children?: ReactNode;\n  /**\n   * Enables the focus, hover, and active styles.\n   * @default false\n   * @deprecated\n   */\n  interactive?: boolean;\n  /** Callback for onClick event. */\n  onClick?: MouseEventHandler<HTMLElement>;\n  /** Ref forwarded to the wrapping element. */\n  ref?: Ref<HTMLElement>;\n}\n\nexport const StyledCard = styled.article<Partial<CardProps>>(props => {\n  const fullscreen = useFullscreenContext();\n\n  const {\n    'border-radius': borderRadius,\n    'border-color': borderColor,\n    background\n  } = props.theme.components.card;\n  const interactive = props.interactive\n    ? css`\n        &:hover {\n          border: 0;\n          box-shadow: 0 0 0 0.0625rem ${borderColor};\n        }\n        &:focus {\n          border: 0;\n          box-shadow: 0 0 0 0.125rem ${borderColor};\n        }\n      `\n    : undefined;\n\n  return css`\n    background: ${background};\n\n    &:focus {\n      outline: none;\n    }\n\n    ${interactive}\n\n    ${StyledCardMedia} {\n      &:first-child img {\n        border-radius: var(--container-border-radius, ${borderRadius})\n          var(--container-border-radius, ${borderRadius}) 0 0;\n      }\n    }\n\n    ${fullscreen?.[0]\n      ? css`\n          block-size: 100%;\n          border-radius: 0;\n        `\n      : css`\n          border-radius: var(--border-radius, var(--container-border-radius));\n          --container-border-radius: ${borderRadius};\n          * {\n            --border-radius: calc(var(--container-border-radius) * 0.5);\n          }\n        `}\n  `;\n});\n\nStyledCard.defaultProps = defaultThemeProp;\n\nconst Card: ForwardRefForwardPropsComponent<CardProps> = forwardRef(function Card(\n  { children, as, onClick, interactive = false, testId, ...restProps }: PropsWithoutRef<CardProps>,\n  ref: CardProps['ref']\n) {\n  const testIds = useTestIds(testId, getCardTestIds);\n  const interactiveProps = {\n    ...(onClick && {\n      onClick,\n      tabIndex: 0,\n      role: 'button'\n    }),\n    ...(interactive && {\n      tabIndex: 0\n    }),\n    interactive\n  };\n\n  return (\n    <Flex\n      data-testid={testIds.root}\n      role='none'\n      container={{ direction: 'column' }}\n      as={StyledCard}\n      forwardedAs={as}\n      ref={ref}\n      {...interactiveProps}\n      {...restProps}\n    >\n      {children}\n    </Flex>\n  );\n});\n\nexport default Card;\n"]}

package/lib/components/Card/Card.test-ids.d.ts

@@ -0,0 +1,2 @@
+export declare const getCardTestIds: (testIdProp?: import("../..").TestIdProp["testId"]) => import("../..").TestIdsRecord<readonly []>;
+//# sourceMappingURL=Card.test-ids.d.ts.map

package/lib/components/Card/Card.test-ids.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,mGAAqC,CAAC"}

package/lib/components/Card/Card.test-ids.js

@@ -0,0 +1,3 @@
+import { createTestIds } from '../../utils';
+export const getCardTestIds = createTestIds('card', []);
+//# sourceMappingURL=Card.test-ids.js.map

package/lib/components/Card/Card.test-ids.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.test-ids.js","sourceRoot":"","sources":["../../../src/components/Card/Card.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,MAAM,CAAC,MAAM,cAAc,GAAG,aAAa,CAAC,MAAM,EAAE,EAAW,CAAC,CAAC","sourcesContent":["import { createTestIds } from '../../utils';\n\nexport const getCardTestIds = createTestIds('card', [] as const);\n"]}

package/lib/components/CheckboxGroup/CheckboxGroup.d.ts

@@ -1,7 +1,6 @@
-import type { OmitStrict } from '../../types';
 import type { RadioCheckGroupProps } from '../RadioCheckGroup';
-export type CheckboxGroupProps = OmitStrict<RadioCheckGroupProps, 'arrowNavigation'>;
-declare const _default: import("react").ForwardRefExoticComponent<Omit<Pick<RadioCheckGroupProps, "hidden" | "color" | "content" | "style" | "inline" | "translate" | "disabled" | "form" | "label" | "slot" | "title" | "ref" | "suppressHydrationWarning" | "className" | "id" | "lang" | "name" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "nonce" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "inert" | "readOnly" | "required" | "status" | "testId" | "info" | "variant" | "additionalInfo" | "labelHidden" | "onClear" | "autoStack">, "ref"> & import("react").RefAttributes<HTMLElement>> & {
+export type CheckboxGroupProps = Omit<RadioCheckGroupProps, 'arrowNavigation'>;
+declare const _default: import("react").ForwardRefExoticComponent<Omit<CheckboxGroupProps, "ref"> & import("react").RefAttributes<HTMLElement>> & {
     getTestIds: (testIdProp?: import("../../types").TestIdProp["testId"]) => import("../../types").TestIdsRecord<readonly ["label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
 };
 export default _default;

package/lib/components/CheckboxGroup/CheckboxGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.d.ts","sourceRoot":"","sources":["../../../src/components/CheckboxGroup/CheckboxGroup.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAc,MAAM,aAAa,CAAC;AAG1D,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAG/D,MAAM,MAAM,kBAAkB,GAAG,UAAU,CAAC,oBAAoB,EAAE,iBAAiB,CAAC,CAAC;;;;AASrF,wBAAqE"}
+{"version":3,"file":"CheckboxGroup.d.ts","sourceRoot":"","sources":["../../../src/components/CheckboxGroup/CheckboxGroup.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAK/D,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,oBAAoB,EAAE,iBAAiB,CAAC,CAAC;;;;AAS/E,wBAAqE"}

package/lib/components/CheckboxGroup/CheckboxGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.js","sourceRoot":"","sources":["../../../src/components/CheckboxGroup/CheckboxGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAInC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,eAAe,MAAM,oBAAoB,CAAC;AAEjD,OAAO,EAAE,yBAAyB,EAAE,MAAM,6CAA6C,CAAC;AAIxF,MAAM,aAAa,GAAG,UAAU,CAG9B,SAAS,aAAa,CAAC,KAAK,EAAE,GAAG;IACjC,OAAO,KAAC,eAAe,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,eAAe,EAAE,KAAK,GAAI,CAAC;AAC1E,CAAC,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC,aAAa,EAAE,yBAAyB,CAAC,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\n\nimport type { OmitStrict, RefElement } from '../../types';\nimport { withTestIds } from '../../utils';\nimport RadioCheckGroup from '../RadioCheckGroup';\nimport type { RadioCheckGroupProps } from '../RadioCheckGroup';\nimport { getRadioCheckGroupTestIds } from '../RadioCheckGroup/RadioCheckGroup.test-ids';\n\nexport type CheckboxGroupProps = OmitStrict<RadioCheckGroupProps, 'arrowNavigation'>;\n\nconst CheckboxGroup = forwardRef<\n  RefElement<CheckboxGroupProps>,\n  PropsWithoutRef<CheckboxGroupProps>\n>(function CheckboxGroup(props, ref) {\n  return <RadioCheckGroup {...props} ref={ref} arrowNavigation={false} />;\n});\n\nexport default withTestIds(CheckboxGroup, getRadioCheckGroupTestIds);\n"]}
+{"version":3,"file":"CheckboxGroup.js","sourceRoot":"","sources":["../../../src/components/CheckboxGroup/CheckboxGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAInC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,eAAe,MAAM,oBAAoB,CAAC;AAEjD,OAAO,EAAE,yBAAyB,EAAE,MAAM,6CAA6C,CAAC;AAMxF,MAAM,aAAa,GAAG,UAAU,CAG9B,SAAS,aAAa,CAAC,KAAK,EAAE,GAAG;IACjC,OAAO,KAAC,eAAe,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,eAAe,EAAE,KAAK,GAAI,CAAC;AAC1E,CAAC,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC,aAAa,EAAE,yBAAyB,CAAC,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\n\nimport type { RefElement } from '../../types';\nimport { withTestIds } from '../../utils';\nimport RadioCheckGroup from '../RadioCheckGroup';\nimport type { RadioCheckGroupProps } from '../RadioCheckGroup';\nimport { getRadioCheckGroupTestIds } from '../RadioCheckGroup/RadioCheckGroup.test-ids';\n\n// Using Omit instead of OmitStrict as workaround for downstream consumers without intert type augmentation.\n// eslint-disable-next-line @typescript-eslint/ban-types\nexport type CheckboxGroupProps = Omit<RadioCheckGroupProps, 'arrowNavigation'>;\n\nconst CheckboxGroup = forwardRef<\n  RefElement<CheckboxGroupProps>,\n  PropsWithoutRef<CheckboxGroupProps>\n>(function CheckboxGroup(props, ref) {\n  return <RadioCheckGroup {...props} ref={ref} arrowNavigation={false} />;\n});\n\nexport default withTestIds(CheckboxGroup, getRadioCheckGroupTestIds);\n"]}

package/lib/components/PageTemplates/CategorySubPage.styles.d.ts

@@ -3,9 +3,7 @@ export declare const StyledSkipNavigation: import("styled-components/dist/types"
 }, never>> & string & Omit<import("../..").ForwardRefForwardPropsComponent<import("../Button").ButtonProps>, keyof import("react").Component<any, {}, any>>;
 export declare const StyledNavItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<Omit<Omit<import("../Button/BareButton").BareButtonProps, "ref"> & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement> & import("../..").ForwardProps, "ref"> & {
     ref?: ((instance: HTMLAnchorElement | HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLAnchorElement | HTMLButtonElement> | null | undefined;
-}, "level" | keyof import("../Tabs/Tab").StyledTabProps> & import("../Tabs/Tab").StyledTabProps & {
-    level?: import("../Tabs/TabsContext").TabsContextValue["level"];
-}, never>> & string;
+}, keyof import("../Tabs/Tab").StyledTabProps> & import("../Tabs/Tab").StyledTabProps, never>> & string;
 export declare const StyledNavGroupHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("../Text").TextProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement | HTMLSpanElement> & import("../..").ForwardProps, "ref"> & {
     ref?: ((instance: HTMLHeadingElement | HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLHeadingElement | HTMLSpanElement> | null | undefined;
 }, never>> & string & Omit<import("../..").ForwardRefForwardPropsComponent<import("../Text").TextProps>, keyof import("react").Component<any, {}, any>>;

package/lib/components/PageTemplates/CategorySubPage.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CategorySubPage.styles.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/CategorySubPage.styles.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,oBAAoB;;2JAoB/B,CAAC;AAGH,eAAO,MAAM,aAAa;;;;mBAgExB,CAAC;AAGH,eAAO,MAAM,oBAAoB;;uJAa/B,CAAC;AAGH,eAAO,MAAM,kBAAkB,iOAAc,CAAC;AAE9C,eAAO,MAAM,cAAc,6NAazB,CAAC;AAGH,eAAO,MAAM,aAAa,iOAwBxB,CAAC;AAGH,eAAO,MAAM,SAAS,uNAAe,CAAC;AAEtC,eAAO,MAAM,uBAAuB,6NAsBlC,CAAC;AAGH,eAAO,MAAM,wBAAwB,6NAmBnC,CAAC;AAGH,eAAO,MAAM,gBAAgB,6NAuC3B,CAAC;AAGH,eAAO,MAAM,eAAe,qOAe1B,CAAC;AAGH,eAAO,MAAM,mBAAmB,6NAAe,CAAC;AAEhD,eAAO,MAAM,mBAAmB,uNAe9B,CAAC;AAGH,eAAO,MAAM,iBAAiB,uNA0B5B,CAAC;AAGH,eAAO,MAAM,iBAAiB,6NAe5B,CAAC;AAGH,eAAO,MAAM,cAAc,6NAG1B,CAAC"}
+{"version":3,"file":"CategorySubPage.styles.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/CategorySubPage.styles.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,oBAAoB;;2JAoB/B,CAAC;AAGH,eAAO,MAAM,aAAa;;uGAgExB,CAAC;AAGH,eAAO,MAAM,oBAAoB;;uJAa/B,CAAC;AAGH,eAAO,MAAM,kBAAkB,iOAAc,CAAC;AAE9C,eAAO,MAAM,cAAc,6NAazB,CAAC;AAGH,eAAO,MAAM,aAAa,iOAwBxB,CAAC;AAGH,eAAO,MAAM,SAAS,uNAAe,CAAC;AAEtC,eAAO,MAAM,uBAAuB,6NAsBlC,CAAC;AAGH,eAAO,MAAM,wBAAwB,6NAmBnC,CAAC;AAGH,eAAO,MAAM,gBAAgB,6NAuC3B,CAAC;AAGH,eAAO,MAAM,eAAe,qOAe1B,CAAC;AAGH,eAAO,MAAM,mBAAmB,6NAAe,CAAC;AAEhD,eAAO,MAAM,mBAAmB,uNAe9B,CAAC;AAGH,eAAO,MAAM,iBAAiB,uNA0B5B,CAAC;AAGH,eAAO,MAAM,iBAAiB,6NAe5B,CAAC;AAGH,eAAO,MAAM,cAAc,6NAG1B,CAAC"}

package/lib/components/RadioButtonGroup/RadioButtonGroup.d.ts

@@ -1,7 +1,6 @@
-import type { OmitStrict } from '../../types';
 import type { RadioCheckGroupProps } from '../RadioCheckGroup';
-export type RadioButtonGroupProps = OmitStrict<RadioCheckGroupProps, 'arrowNavigation'>;
-declare const _default: import("react").ForwardRefExoticComponent<Omit<Pick<RadioCheckGroupProps, "hidden" | "color" | "content" | "style" | "inline" | "translate" | "disabled" | "form" | "label" | "slot" | "title" | "ref" | "suppressHydrationWarning" | "className" | "id" | "lang" | "name" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "nonce" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "inert" | "readOnly" | "required" | "status" | "testId" | "info" | "variant" | "additionalInfo" | "labelHidden" | "onClear" | "autoStack">, "ref"> & import("react").RefAttributes<HTMLElement>> & {
+export type RadioButtonGroupProps = Omit<RadioCheckGroupProps, 'arrowNavigation'>;
+declare const _default: import("react").ForwardRefExoticComponent<Omit<RadioButtonGroupProps, "ref"> & import("react").RefAttributes<HTMLElement>> & {
     getTestIds: (testIdProp?: import("../../types").TestIdProp["testId"]) => import("../../types").TestIdsRecord<readonly ["label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
 };
 export default _default;

package/lib/components/RadioButtonGroup/RadioButtonGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButtonGroup.d.ts","sourceRoot":"","sources":["../../../src/components/RadioButtonGroup/RadioButtonGroup.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAc,MAAM,aAAa,CAAC;AAG1D,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAG/D,MAAM,MAAM,qBAAqB,GAAG,UAAU,CAAC,oBAAoB,EAAE,iBAAiB,CAAC,CAAC;;;;AASxF,wBAAwE"}
+{"version":3,"file":"RadioButtonGroup.d.ts","sourceRoot":"","sources":["../../../src/components/RadioButtonGroup/RadioButtonGroup.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAK/D,MAAM,MAAM,qBAAqB,GAAG,IAAI,CAAC,oBAAoB,EAAE,iBAAiB,CAAC,CAAC;;;;AASlF,wBAAwE"}

package/lib/components/RadioButtonGroup/RadioButtonGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButtonGroup.js","sourceRoot":"","sources":["../../../src/components/RadioButtonGroup/RadioButtonGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAInC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,eAAe,MAAM,oBAAoB,CAAC;AAEjD,OAAO,EAAE,yBAAyB,EAAE,MAAM,6CAA6C,CAAC;AAIxF,MAAM,gBAAgB,GAAG,UAAU,CAGjC,SAAS,gBAAgB,CAAC,KAAK,EAAE,GAAG;IACpC,OAAO,KAAC,eAAe,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,eAAe,SAAG,CAAC;AAClE,CAAC,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC,gBAAgB,EAAE,yBAAyB,CAAC,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\n\nimport type { OmitStrict, RefElement } from '../../types';\nimport { withTestIds } from '../../utils';\nimport RadioCheckGroup from '../RadioCheckGroup';\nimport type { RadioCheckGroupProps } from '../RadioCheckGroup';\nimport { getRadioCheckGroupTestIds } from '../RadioCheckGroup/RadioCheckGroup.test-ids';\n\nexport type RadioButtonGroupProps = OmitStrict<RadioCheckGroupProps, 'arrowNavigation'>;\n\nconst RadioButtonGroup = forwardRef<\n  RefElement<RadioButtonGroupProps>,\n  PropsWithoutRef<RadioButtonGroupProps>\n>(function RadioButtonGroup(props, ref) {\n  return <RadioCheckGroup {...props} ref={ref} arrowNavigation />;\n});\n\nexport default withTestIds(RadioButtonGroup, getRadioCheckGroupTestIds);\n"]}
+{"version":3,"file":"RadioButtonGroup.js","sourceRoot":"","sources":["../../../src/components/RadioButtonGroup/RadioButtonGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAInC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,eAAe,MAAM,oBAAoB,CAAC;AAEjD,OAAO,EAAE,yBAAyB,EAAE,MAAM,6CAA6C,CAAC;AAMxF,MAAM,gBAAgB,GAAG,UAAU,CAGjC,SAAS,gBAAgB,CAAC,KAAK,EAAE,GAAG;IACpC,OAAO,KAAC,eAAe,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,eAAe,SAAG,CAAC;AAClE,CAAC,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC,gBAAgB,EAAE,yBAAyB,CAAC,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\n\nimport type { RefElement } from '../../types';\nimport { withTestIds } from '../../utils';\nimport RadioCheckGroup from '../RadioCheckGroup';\nimport type { RadioCheckGroupProps } from '../RadioCheckGroup';\nimport { getRadioCheckGroupTestIds } from '../RadioCheckGroup/RadioCheckGroup.test-ids';\n\n// Using Omit instead of OmitStrict as workaround for downstream consumers without intert type augmentation.\n// eslint-disable-next-line @typescript-eslint/ban-types\nexport type RadioButtonGroupProps = Omit<RadioCheckGroupProps, 'arrowNavigation'>;\n\nconst RadioButtonGroup = forwardRef<\n  RefElement<RadioButtonGroupProps>,\n  PropsWithoutRef<RadioButtonGroupProps>\n>(function RadioButtonGroup(props, ref) {\n  return <RadioCheckGroup {...props} ref={ref} arrowNavigation />;\n});\n\nexport default withTestIds(RadioButtonGroup, getRadioCheckGroupTestIds);\n"]}

package/lib/components/Select/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAEV,GAAG,EACH,SAAS,EACT,kBAAkB,EAGnB,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,+BAA+B,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAGlG,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAWvD,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,UAAU;IACxD,oFAAoF;IACpF,QAAQ,EAAE,SAAS,CAAC;IACpB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,kBAAkB,CAAC,iBAAiB,CAAC,CAAC;IACjD,6DAA6D;IAC7D,mBAAmB,CAAC,EAAE,gBAAgB,CAAC,qBAAqB,CAAC,CAAC;IAC9D;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,qFAAqF;IACrF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,kFAAkF;IAClF,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,mCAAmC;IACnC,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CAC9B;AAED,eAAO,MAAM,YAAY;eACZ,OAAO;cACR,OAAO;YAgEjB,CAAC;;;;AA2FH,wBAAqD"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAEV,GAAG,EACH,SAAS,EACT,kBAAkB,EAGnB,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,+BAA+B,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAGlG,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAWvD,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,UAAU;IACxD,oFAAoF;IACpF,QAAQ,EAAE,SAAS,CAAC;IACpB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,kBAAkB,CAAC,iBAAiB,CAAC,CAAC;IACjD,6DAA6D;IAC7D,mBAAmB,CAAC,EAAE,gBAAgB,CAAC,qBAAqB,CAAC,CAAC;IAC9D;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,qFAAqF;IACrF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,kFAAkF;IAClF,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,mCAAmC;IACnC,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CAC9B;AAED,eAAO,MAAM,YAAY;eACZ,OAAO;cACR,OAAO;YAgEjB,CAAC;;;;AA4FH,wBAAqD"}

package/lib/components/Select/Select.js

@@ -74,7 +74,7 @@ const Select = forwardRef(function Select(props, ref) {
     const t = useI18n();
     const { testId, additionalInfo, children, id = uid, label, labelHidden, info, status, required = false, disabled = false, readOnly = false, actions, onResolveSuggestion, ...restProps } = props;
     const testIds = useTestIds(testId, getSelectTestIds);
-    const Comp = (_jsx(StyledFormControl, { "data-testid": testIds.control, autoComplete: '_off', ...restProps, as: StyledSelect, hasSuggestion: status === 'pending' && !!onResolveSuggestion, id: id, hasStatus: !!status, required: required, disabled: disabled, label: label, readOnly: readOnly, ref: ref, onMouseDown: readOnly
+    const Comp = (_jsx(StyledFormControl, { "data-testid": testIds.control, autoComplete: '_off', ...restProps, as: StyledSelect, hasSuggestion: status === 'pending' && !!onResolveSuggestion, id: id, hasStatus: !!status, status: status, required: required, disabled: disabled, label: label, readOnly: readOnly, ref: ref, onMouseDown: readOnly
             ? (e) => {
                 e.preventDefault();
             }

package/lib/components/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type {\n  PropsWithoutRef,\n  Ref,\n  ReactNode,\n  ChangeEventHandler,\n  MouseEvent,\n  KeyboardEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport type { Action, BaseProps, ForwardRefForwardPropsComponent, TestIdProp } from '../../types';\nimport FormField from '../FormField';\nimport { StyledFormControl } from '../FormControl';\nimport type { FormControlProps } from '../FormControl';\nimport { useDirection, useI18n, useTestIds, useUID } from '../../hooks';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport { withTestIds } from '../../utils';\n\nimport { getSelectTestIds } from './Select.test-ids';\n\nconst getSelectArrowSvg = (color: string) =>\n  // cspell:disable-next-line\n  `url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25' fill='${encodeURIComponent(color)}'%3E%3Cpath d='M21 8v2.75l-8.5 6.5-8.5-6.5V8l8.5 6.5z'/%3E%3C/svg%3E\")`;\n\nexport interface SelectProps extends BaseProps, TestIdProp {\n  /** Pass Options components as children to render the options of the Select list. */\n  children: ReactNode;\n  /** Called when an Option is chosen within the list. */\n  onChange?: ChangeEventHandler<HTMLSelectElement>;\n  /** Callback fired when AI suggestion is accepted/rejected */\n  onResolveSuggestion?: FormControlProps['onResolveSuggestion'];\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not pass, a random id will be generated for any render.\n   */\n  id?: FormControlProps['id'];\n  /** Set visual state based on a validation state. */\n  status?: FormControlProps['status'];\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: FormControlProps['label'];\n  /** Visually hides the label region. */\n  labelHidden?: FormControlProps['labelHidden'];\n  /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n  info?: FormControlProps['info'];\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: FormControlProps['required'];\n  /**\n   * Creates a controlled input and sets the value. Requires an onChange handler to update value.\n   * value + onChange is the recommended method per React team.\n   */\n  value?: FormControlProps['value'];\n  /** Disable the control. The browser defaults to false. */\n  disabled?: FormControlProps['disabled'];\n  /** Makes the input non editable and non clickable. The browser defaults to false. */\n  readOnly?: FormControlProps['readOnly'];\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: FormControlProps['name'];\n  /** Pass an array of Action objects to append button(s) inline with the Select. */\n  actions?: Action[];\n  /** Pass a heading and content to show additional information on the field. */\n  additionalInfo?: FormControlProps['additionalInfo'];\n  /** A ref to the select element. */\n  ref?: Ref<HTMLSelectElement>;\n}\n\nexport const StyledSelect = styled.select<{\n  hasStatus: boolean;\n  readOnly: boolean;\n}>(({ theme, readOnly, hasStatus }) => {\n  const {\n    base,\n    components: {\n      'form-control': { 'foreground-color': fg, 'background-color': backgroundColor },\n      select,\n      icon\n    }\n  } = theme;\n  const { rtl } = useDirection();\n\n  return css`\n    appearance: none;\n    -webkit-appearance: none;\n    overflow-x: hidden;\n    text-overflow: ellipsis;\n    width: 100%;\n    height: ${select.height};\n    min-height: ${base['hit-area']['mouse-min']};\n    padding-inline-start: ${select.padding};\n    padding-inline-end: calc(4 * ${base.spacing});\n    background-image: ${getSelectArrowSvg(fg)};\n    background-repeat: no-repeat;\n    background-size: ${icon.size.s} ${icon.size.s};\n    background-position: ${rtl ? '0.375rem' : 'calc(100% - 0.375rem)'} 50%;\n    border-width: ${select['border-width']};\n    border-radius: calc(${base['border-radius']} * ${select['border-radius']});\n\n    @media (forced-colors: active) {\n      background-image: ${getSelectArrowSvg('CanvasText')};\n    }\n\n    ${readOnly &&\n    css`\n      background-image: none;\n    `}\n\n    ${!hasStatus &&\n    css`\n      border-color: ${select['border-color']};\n    `}\n\n    &:has(option[value='']:checked, option:not([value]):checked) {\n      color: ${mix(base.transparency['transparent-3'], fg, backgroundColor)};\n    }\n\n    & option {\n      color: ${fg};\n\n      &[value=''],\n      &:not([value]) {\n        color: ${mix(base.transparency['transparent-3'], fg, backgroundColor)};\n      }\n    }\n\n    &::-ms-expand {\n      display: none;\n    }\n\n    @media (pointer: coarse) {\n      min-height: ${base['hit-area']['finger-min']};\n    }\n  `;\n});\n\nStyledSelect.defaultProps = defaultThemeProp;\n\nconst Select: ForwardRefForwardPropsComponent<SelectProps> = forwardRef(function Select(\n  props: PropsWithoutRef<SelectProps>,\n  ref: SelectProps['ref']\n) {\n  const uid = useUID();\n  const t = useI18n();\n\n  const {\n    testId,\n    additionalInfo,\n    children,\n    id = uid,\n    label,\n    labelHidden,\n    info,\n    status,\n    required = false,\n    disabled = false,\n    readOnly = false,\n    actions,\n    onResolveSuggestion,\n    ...restProps\n  } = props;\n\n  const testIds = useTestIds(testId, getSelectTestIds);\n\n  const Comp = (\n    <StyledFormControl\n      data-testid={testIds.control}\n      autoComplete='_off'\n      {...restProps}\n      as={StyledSelect}\n      hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n      id={id}\n      hasStatus={!!status}\n      required={required}\n      disabled={disabled}\n      label={label}\n      readOnly={readOnly}\n      ref={ref}\n      onMouseDown={\n        readOnly\n          ? (e: MouseEvent<HTMLSelectElement>) => {\n              e.preventDefault();\n            }\n          : undefined\n      }\n      onKeyDown={\n        readOnly\n          ? (e: KeyboardEvent) => {\n              // TODO: Consideration is needed for key modifiers, e.g. \"ctrl p\"\n              if (!['Escape', 'Tab', 'Space'].includes(e.key)) e.preventDefault();\n            }\n          : undefined\n      }\n    >\n      {children}\n    </StyledFormControl>\n  );\n\n  return label ? (\n    <FormField\n      testId={testIds}\n      label={\n        <>\n          {label}\n          {readOnly && <VisuallyHiddenText>{` ${t('read_only')}`}</VisuallyHiddenText>}\n        </>\n      }\n      labelHidden={labelHidden}\n      id={id}\n      info={info}\n      status={status}\n      required={required}\n      disabled={disabled}\n      readOnly={readOnly}\n      actions={actions}\n      onResolveSuggestion={onResolveSuggestion}\n      additionalInfo={additionalInfo}\n    >\n      {Comp}\n    </FormField>\n  ) : (\n    Comp\n  );\n});\n\nexport default withTestIds(Select, getSelectTestIds);\n"]}
+{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type {\n  PropsWithoutRef,\n  Ref,\n  ReactNode,\n  ChangeEventHandler,\n  MouseEvent,\n  KeyboardEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport type { Action, BaseProps, ForwardRefForwardPropsComponent, TestIdProp } from '../../types';\nimport FormField from '../FormField';\nimport { StyledFormControl } from '../FormControl';\nimport type { FormControlProps } from '../FormControl';\nimport { useDirection, useI18n, useTestIds, useUID } from '../../hooks';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport { withTestIds } from '../../utils';\n\nimport { getSelectTestIds } from './Select.test-ids';\n\nconst getSelectArrowSvg = (color: string) =>\n  // cspell:disable-next-line\n  `url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25' fill='${encodeURIComponent(color)}'%3E%3Cpath d='M21 8v2.75l-8.5 6.5-8.5-6.5V8l8.5 6.5z'/%3E%3C/svg%3E\")`;\n\nexport interface SelectProps extends BaseProps, TestIdProp {\n  /** Pass Options components as children to render the options of the Select list. */\n  children: ReactNode;\n  /** Called when an Option is chosen within the list. */\n  onChange?: ChangeEventHandler<HTMLSelectElement>;\n  /** Callback fired when AI suggestion is accepted/rejected */\n  onResolveSuggestion?: FormControlProps['onResolveSuggestion'];\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not pass, a random id will be generated for any render.\n   */\n  id?: FormControlProps['id'];\n  /** Set visual state based on a validation state. */\n  status?: FormControlProps['status'];\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: FormControlProps['label'];\n  /** Visually hides the label region. */\n  labelHidden?: FormControlProps['labelHidden'];\n  /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n  info?: FormControlProps['info'];\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: FormControlProps['required'];\n  /**\n   * Creates a controlled input and sets the value. Requires an onChange handler to update value.\n   * value + onChange is the recommended method per React team.\n   */\n  value?: FormControlProps['value'];\n  /** Disable the control. The browser defaults to false. */\n  disabled?: FormControlProps['disabled'];\n  /** Makes the input non editable and non clickable. The browser defaults to false. */\n  readOnly?: FormControlProps['readOnly'];\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: FormControlProps['name'];\n  /** Pass an array of Action objects to append button(s) inline with the Select. */\n  actions?: Action[];\n  /** Pass a heading and content to show additional information on the field. */\n  additionalInfo?: FormControlProps['additionalInfo'];\n  /** A ref to the select element. */\n  ref?: Ref<HTMLSelectElement>;\n}\n\nexport const StyledSelect = styled.select<{\n  hasStatus: boolean;\n  readOnly: boolean;\n}>(({ theme, readOnly, hasStatus }) => {\n  const {\n    base,\n    components: {\n      'form-control': { 'foreground-color': fg, 'background-color': backgroundColor },\n      select,\n      icon\n    }\n  } = theme;\n  const { rtl } = useDirection();\n\n  return css`\n    appearance: none;\n    -webkit-appearance: none;\n    overflow-x: hidden;\n    text-overflow: ellipsis;\n    width: 100%;\n    height: ${select.height};\n    min-height: ${base['hit-area']['mouse-min']};\n    padding-inline-start: ${select.padding};\n    padding-inline-end: calc(4 * ${base.spacing});\n    background-image: ${getSelectArrowSvg(fg)};\n    background-repeat: no-repeat;\n    background-size: ${icon.size.s} ${icon.size.s};\n    background-position: ${rtl ? '0.375rem' : 'calc(100% - 0.375rem)'} 50%;\n    border-width: ${select['border-width']};\n    border-radius: calc(${base['border-radius']} * ${select['border-radius']});\n\n    @media (forced-colors: active) {\n      background-image: ${getSelectArrowSvg('CanvasText')};\n    }\n\n    ${readOnly &&\n    css`\n      background-image: none;\n    `}\n\n    ${!hasStatus &&\n    css`\n      border-color: ${select['border-color']};\n    `}\n\n    &:has(option[value='']:checked, option:not([value]):checked) {\n      color: ${mix(base.transparency['transparent-3'], fg, backgroundColor)};\n    }\n\n    & option {\n      color: ${fg};\n\n      &[value=''],\n      &:not([value]) {\n        color: ${mix(base.transparency['transparent-3'], fg, backgroundColor)};\n      }\n    }\n\n    &::-ms-expand {\n      display: none;\n    }\n\n    @media (pointer: coarse) {\n      min-height: ${base['hit-area']['finger-min']};\n    }\n  `;\n});\n\nStyledSelect.defaultProps = defaultThemeProp;\n\nconst Select: ForwardRefForwardPropsComponent<SelectProps> = forwardRef(function Select(\n  props: PropsWithoutRef<SelectProps>,\n  ref: SelectProps['ref']\n) {\n  const uid = useUID();\n  const t = useI18n();\n\n  const {\n    testId,\n    additionalInfo,\n    children,\n    id = uid,\n    label,\n    labelHidden,\n    info,\n    status,\n    required = false,\n    disabled = false,\n    readOnly = false,\n    actions,\n    onResolveSuggestion,\n    ...restProps\n  } = props;\n\n  const testIds = useTestIds(testId, getSelectTestIds);\n\n  const Comp = (\n    <StyledFormControl\n      data-testid={testIds.control}\n      autoComplete='_off'\n      {...restProps}\n      as={StyledSelect}\n      hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n      id={id}\n      hasStatus={!!status}\n      status={status}\n      required={required}\n      disabled={disabled}\n      label={label}\n      readOnly={readOnly}\n      ref={ref}\n      onMouseDown={\n        readOnly\n          ? (e: MouseEvent<HTMLSelectElement>) => {\n              e.preventDefault();\n            }\n          : undefined\n      }\n      onKeyDown={\n        readOnly\n          ? (e: KeyboardEvent) => {\n              // TODO: Consideration is needed for key modifiers, e.g. \"ctrl p\"\n              if (!['Escape', 'Tab', 'Space'].includes(e.key)) e.preventDefault();\n            }\n          : undefined\n      }\n    >\n      {children}\n    </StyledFormControl>\n  );\n\n  return label ? (\n    <FormField\n      testId={testIds}\n      label={\n        <>\n          {label}\n          {readOnly && <VisuallyHiddenText>{` ${t('read_only')}`}</VisuallyHiddenText>}\n        </>\n      }\n      labelHidden={labelHidden}\n      id={id}\n      info={info}\n      status={status}\n      required={required}\n      disabled={disabled}\n      readOnly={readOnly}\n      actions={actions}\n      onResolveSuggestion={onResolveSuggestion}\n      additionalInfo={additionalInfo}\n    >\n      {Comp}\n    </FormField>\n  ) : (\n    Comp\n  );\n});\n\nexport default withTestIds(Select, getSelectTestIds);\n"]}

package/lib/components/Tabs/Tab.d.ts

@@ -1,6 +1,5 @@
 import type { Ref } from 'react';
 import type { ForwardRefForwardPropsComponent } from '../../types';
-import type { TabsContextValue } from './TabsContext';
 import type { TabsProps, Tab as TabType } from './Tabs.types';
 export interface TabProps {
     /** Indicates if this Tab is active. */
@@ -24,9 +23,7 @@ export interface StyledTabProps {
 }
 export declare const StyledTab: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<import("../Button/BareButton").BareButtonProps, "ref"> & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement> & import("../../types").ForwardProps, "ref"> & {
     ref?: ((instance: HTMLAnchorElement | HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLAnchorElement | HTMLButtonElement> | null | undefined;
-}, StyledTabProps & {
-    level?: TabsContextValue["level"];
-}>> & string & Omit<ForwardRefForwardPropsComponent<import("../Button/BareButton").BareButtonProps>, keyof import("react").Component<any, {}, any>>;
+}, StyledTabProps>> & string & Omit<ForwardRefForwardPropsComponent<import("../Button/BareButton").BareButtonProps>, keyof import("react").Component<any, {}, any>>;
 declare const Tab: ForwardRefForwardPropsComponent<TabProps>;
 export default Tab;
 //# sourceMappingURL=Tab.d.ts.map

package/lib/components/Tabs/Tab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tab.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAalD,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,aAAa,CAAC;AAKnE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,OAAO,EAAE,MAAM,cAAc,CAAC;AAK9D,MAAM,WAAW,QAAQ;IACvB,uCAAuC;IACvC,QAAQ,EAAE,OAAO,CAAC;IAClB,kDAAkD;IAClD,OAAO,EAAE,MAAM,CAAC;IAChB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC;IACzB,6DAA6D;IAC7D,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACxB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1B,8BAA8B;IAC9B,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;CAClD;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,QAAQ,CAAC,UAAU,CAAC,CAAC;IAC/B,OAAO,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;CAC3B;AAsQD,eAAO,MAAM,SAAS;;;YAEV,gBAAgB,CAAC,OAAO,CAAC;mJAmCpC,CAAC;AAIF,QAAA,MAAM,GAAG,EAAE,+BAA+B,CAAC,QAAQ,CAiDjD,CAAC;AAEH,eAAe,GAAG,CAAC"}
+{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tab.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAalD,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,aAAa,CAAC;AAInE,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,OAAO,EAAE,MAAM,cAAc,CAAC;AAK9D,MAAM,WAAW,QAAQ;IACvB,uCAAuC;IACvC,QAAQ,EAAE,OAAO,CAAC;IAClB,kDAAkD;IAClD,OAAO,EAAE,MAAM,CAAC;IAChB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC;IACzB,6DAA6D;IAC7D,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACxB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1B,8BAA8B;IAC9B,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;CAClD;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,QAAQ,CAAC,UAAU,CAAC,CAAC;IAC/B,OAAO,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;CAC3B;AAmPD,eAAO,MAAM,SAAS;;mKA6CrB,CAAC;AAIF,QAAA,MAAM,GAAG,EAAE,+BAA+B,CAAC,QAAQ,CA+CjD,CAAC;AAEH,eAAe,GAAG,CAAC"}

package/lib/components/Tabs/Tab.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useContext } from 'react';
+import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { meetsContrastGuidelines, mix, readableColor, transparentize } from 'polished';
 import { calculateForegroundColor, isSolidColor, readableHue } from '../../styles';
@@ -12,42 +12,15 @@ import { tryCatch } from '../../utils';
 import Count, { StyledCount } from '../Badges/Count';
 import BareButton from '../Button/BareButton';
 import HiddenText from '../HiddenText';
-import TabsContext from './TabsContext';
 import { StyledErrorIcon } from './Tabs.styles';
 registerIcon(warnSolidIcon);
-const activeStyle = (color) => css `
-  &::after {
-    display: block;
-    background-color: ${color};
-  }
-`;
-const getHorizontalUnselectedHoverStyle = ({ detached, level, opacity, color }) => level && level > 1 && !detached
-    ? css `
-        &::before {
-          content: '';
-          position: absolute;
-          top: 0;
-          bottom: 0;
-          left: 0;
-          right: 0;
-          border-radius: inherit;
-          background-color: currentColor;
-          opacity: ${opacity};
-        }
-      `
-    : css `
-        background-color: ${color};
-        border-start-start-radius: ${detached ? 0 : 'calc(0.5rem * 0.5)'};
-        border-start-end-radius: ${detached ? 0 : 'calc(0.5rem * 0.5)'};
-      `;
-const getHorizontalStyles = ({ selected, level, theme }) => {
+const getHorizontalStyles = ({ selected, theme }) => {
     const color = theme.components.button.color;
     const foreground = theme.base.palette['foreground-color'];
     const { detached: tabsDetached } = theme.components.tabs;
     const secondaryColor = tabsDetached
         ? theme.base.palette['primary-background']
         : theme.base.palette['secondary-background'];
-    const lightenedColor = tryCatch(() => transparentize(0.3, color)) ?? '';
     // If the secondary color is not a solid color, use the readable color as the fallback background.
     const fallbackBackground = isSolidColor(secondaryColor) ? secondaryColor : readableColor(color);
     const backgroundUsable = tryCatch(() => meetsContrastGuidelines(color, fallbackBackground).AA);
@@ -71,6 +44,9 @@ const getHorizontalStyles = ({ selected, level, theme }) => {
     padding: 0 calc(1.5 * ${spacing});
     border: none;
     text-decoration: none;
+    transition-property: background-color;
+    transition-duration: max(${theme.base.animation.speed}, 1ms);
+    transition-timing-function: ${theme.base.animation.timing.ease};
 
     @media (pointer: coarse) {
       height: ${theme.base['hit-area']['finger-min']};
@@ -79,6 +55,9 @@ const getHorizontalStyles = ({ selected, level, theme }) => {
     span:first-of-type {
       color: ${selected ? color : foreground};
       display: inline-block;
+      transition-property: color;
+      transition-duration: ${selected ? `max(${theme.base.animation.speed}, 1ms)` : '0s'};
+      transition-timing-function: ${theme.base.animation.timing.ease};
 
       &::before {
         content: attr(data-content) / '';
@@ -91,61 +70,45 @@ const getHorizontalStyles = ({ selected, level, theme }) => {
     }
 
     &:first-child {
-      margin-left: 0;
-    }
-    &::after {
-      background: ${selected ? color : lightenedColor};
-      display: ${selected ? 'block' : 'none'};
-      content: '';
-      position: absolute;
-      height: 0.125rem;
-      bottom: 0;
-      left: calc(1.5 * ${spacing});
-      right: calc(1.5 * ${spacing});
+      margin-inline-start: 0;
     }
 
-    ${!selected
-        ? css `
-          @media (hover: hover) {
-            &:not(:disabled):hover {
-              text-decoration: none;
-              ${getHorizontalUnselectedHoverStyle({
-            detached: tabsDetached,
-            level,
-            opacity: 0.1,
-            color: hoverBackgroundColor
-        })}
-            }
+    ${!selected &&
+        css `
+      @media (hover: hover) {
+        &:not(:disabled):hover {
+          text-decoration: none;
+          background-color: ${hoverBackgroundColor};
+        }
 
-            &:not(:disabled):active {
-              text-decoration: none;
-              ${getHorizontalUnselectedHoverStyle({
-            detached: tabsDetached,
-            level,
-            opacity: 0.2,
-            color: activeBackgroundColor
-        })}
-            }
-          }
-        `
-        : css `
-          ${level &&
-            level > 1 &&
-            css `
-            background-color: ${theme.base.palette['primary-background']};
-          `}
-        `}
+        &:not(:disabled):active {
+          text-decoration: none;
+          background-color: ${activeBackgroundColor};
+        }
+      }
+    `}
 
-    &:focus,
-    &:not([disabled]):focus {
-      border-radius: calc(0.5rem * 0.5);
-      box-shadow: ${theme.base.shadow['focus-inset']};
+    &:focus-visible,
+    &:not(:disabled):focus-visible {
       text-decoration: none;
+      outline: none;
+
       &::after {
-        display: none;
+        content: '';
+        position: absolute;
+        inset: 0;
+        border-radius: calc(0.5rem * 0.5);
+        box-shadow: ${theme.base.shadow['focus-inset']};
+        pointer-events: none;
+        z-index: 3;
       }
     }
 
+    &:first-child:focus-visible::after,
+    &:first-child:not(:disabled):focus-visible::after {
+      border-start-start-radius: var(--border-radius, ${theme.base['border-radius']});
+    }
+
     @media (pointer: coarse) {
       min-block-size: ${theme.base['hit-area'].finger};
     }
@@ -157,8 +120,8 @@ const getHorizontalStyles = ({ selected, level, theme }) => {
     ${tabsDetached &&
         css `
       &[aria-selected='true'],
-      &:focus,
-      &:not([disabled]):focus {
+      &:focus-visible,
+      &:not([disabled]):focus-visible {
         color: ${activeTabColor};
         span:first-of-type {
           color: ${activeTabColor};
@@ -176,18 +139,18 @@ const getHorizontalStyles = ({ selected, level, theme }) => {
     `}
   `;
 };
-const getVerticalStyles = ({ selected, theme }) => {
+const getVerticalStyles = ({ theme, selected }) => {
     const { detached: tabsDetached } = theme.components.tabs;
-    const borderColor = theme.base.palette['border-line'];
     const interactive = theme.base.palette.interactive;
     const foreground = theme.base.palette['foreground-color'];
     const secondary = theme.base.palette['secondary-background'];
-    const lightenedColor = tryCatch(() => transparentize(tabsDetached ? 0.95 : 0.5, tabsDetached ? foreground : interactive)) ?? '';
     const { spacing } = theme.base;
+    const lightenedColor = tryCatch(() => transparentize(tabsDetached ? 0.95 : 0.5, tabsDetached ? foreground : interactive)) ?? '';
     const activeTabBg = tabsDetached ? secondary : transparentize(0.75, interactive);
     const activeTabColor = tabsDetached
         ? interactive
         : calculateForegroundColor(activeTabBg, foreground);
+    const borderColor = theme.base.palette['border-line'];
     return css `
     display: flex;
     justify-content: space-between;
@@ -200,66 +163,109 @@ const getVerticalStyles = ({ selected, theme }) => {
     margin-top: -0.0625rem;
     padding: 0 calc(2 * ${spacing});
     text-decoration: none;
+    transition-property: ${selected ? 'color, font-weight, background-color' : 'background-color'};
+    transition-duration: max(${theme.base.animation.speed}, 1ms);
+    transition-timing-function: ${theme.base.animation.timing.ease};
 
     &:first-child {
       border-top: 0.0625rem solid ${tabsDetached ? 'transparent' : borderColor};
     }
-    &::after {
+
+    &::before {
       content: '';
       position: absolute;
-      display: ${selected ? 'block' : 'none'};
-      top: 0;
-      bottom: 0;
-      ${tabsDetached ? 'left: 0;' : 'right: 0;'}
+      ${tabsDetached ? 'inset-inline-start: 0;' : 'inset-inline-end: 0;'}
+      inset-block-start: 0;
+      inset-block-end: 0;
       width: 0.25rem;
-      background: ${interactive};
+      background: ${lightenedColor};
+      pointer-events: none;
+      z-index: 2;
+      opacity: 0;
+      transition-property: opacity;
+      transition-duration: max(${theme.base.animation.speed}, 1ms);
+      transition-timing-function: ${theme.base.animation.timing.ease};
     }
-    &:hover&:not(:disabled) {
-      ${activeStyle(lightenedColor)}
-      text-decoration: none;
+
+    &:active {
+      background: none;
     }
 
-    &:focus,
-    &:not([disabled]):focus {
-      ${activeStyle(interactive)}
-      box-shadow: inset 0 0 0 0.0625rem ${interactive};
+    &:active::before {
+      opacity: 1;
+    }
+
+    &:hover:not(:disabled)::before {
+      opacity: 1;
+    }
+
+    &:focus-visible,
+    &:not(:disabled):focus-visible {
       text-decoration: none;
+      outline: none;
+
+      &::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        box-shadow: inset 0 0 0 0.0625rem ${interactive};
+        pointer-events: none;
+        z-index: 3;
+      }
     }
 
     ${tabsDetached &&
         css `
       border-radius: calc(0.5 * ${theme.base['border-radius']});
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
+      border-start-start-radius: 0;
+      border-end-start-radius: 0;
       margin: calc(0.125 * ${spacing}) calc(2 * ${spacing});
 
-      &:not([disabled]):focus,
+      &:focus-visible::after,
+      &:not(:disabled):focus-visible::after {
+        border-radius: calc(0.5 * ${theme.base['border-radius']});
+        border-start-start-radius: 0;
+        border-end-start-radius: 0;
+      }
+
+      &:not(:disabled):focus-visible,
       &[aria-selected='true'] {
-        background: ${activeTabBg};
         color: ${activeTabColor};
       }
-      &:hover&:not(:disabled):not([aria-selected='true']) {
+      &:hover:not(:disabled):not([aria-selected='true']) {
         background: ${lightenedColor};
       }
     `}
   `;
 };
-export const StyledTab = styled(BareButton)(({ theme, tabType, selected, level }) => css `
+export const StyledTab = styled(BareButton)(({ theme, tabType, selected }) => css `
     position: relative;
-    background: none;
     cursor: pointer;
     white-space: nowrap;
 
+    > * {
+      position: relative;
+      z-index: 1;
+    }
+
     ${selected &&
     css `
       font-weight: bold;
+      transition-property: font-weight;
+      transition-duration: max(${theme.base.animation.speed}, 1ms);
+      transition-timing-function: ${theme.base.animation.timing.ease};
+    `}
+
+    ${!selected &&
+    css `
+      transition: font-weight 0s;
     `}
 
     & + & {
       margin-inline-start: 0;
     }
 
-    &:focus {
+    &:focus-visible {
       outline: none;
     }
 
@@ -269,7 +275,7 @@ export const StyledTab = styled(BareButton)(({ theme, tabType, selected, level }
     }
 
     ${tabType === 'horizontal'
-    ? getHorizontalStyles({ theme, selected, level })
+    ? getHorizontalStyles({ theme, selected })
     : getVerticalStyles({ theme, selected })}
 
     ${StyledErrorIcon} {
@@ -281,7 +287,6 @@ const Tab = forwardRef(function Tab({ selected, content, count, type, disabled,
     const t = useI18n();
     const [tabEl, setTabEl] = useElement();
     const tabRef = useConsolidatedRef(ref, setTabEl);
-    const { level } = useContext(TabsContext);
     const countDescID = useUID();
     const errorDescID = useUID();
     const commaDescID = useUID();
@@ -295,7 +300,7 @@ const Tab = forwardRef(function Tab({ selected, content, count, type, disabled,
     if (errors) {
         describedBy.push(errorDescID);
     }
-    return (_jsxs(StyledTab, { ref: tabRef, selected: selected, tabType: type, disabled: disabled, level: level, "aria-describedby": describedBy.length > 0 ? describedBy.join(' ') : undefined, ...restProps, children: [_jsxs("span", { children: [!!errors && (_jsxs(_Fragment, { children: [_jsx(StyledErrorIcon, { name: 'warn-solid' }), _jsx(Tooltip, { target: tabEl, hideDelay: 'none', showDelay: 'none', describeTarget: false, children: t('tab_error_tooltip', [content]) }), _jsx(HiddenText, { id: errorDescID, children: t('tab_error_description') })] })), _jsx("span", { "data-content": content, children: content })] }), typeof count === 'number' && _jsx(Count, { id: countDescID, children: count }), typeof count === 'number' && errors && _jsx(HiddenText, { id: commaDescID, children: "," })] }));
+    return (_jsxs(StyledTab, { ref: tabRef, selected: selected, tabType: type, disabled: disabled, "aria-describedby": describedBy.length > 0 ? describedBy.join(' ') : undefined, ...restProps, children: [_jsxs("span", { children: [!!errors && (_jsxs(_Fragment, { children: [_jsx(StyledErrorIcon, { name: 'warn-solid' }), _jsx(Tooltip, { target: tabEl, hideDelay: 'none', showDelay: 'none', describeTarget: false, children: t('tab_error_tooltip', [content]) }), _jsx(HiddenText, { id: errorDescID, children: t('tab_error_description') })] })), _jsx("span", { "data-content": content, children: content })] }), typeof count === 'number' && _jsx(Count, { id: countDescID, children: count }), typeof count === 'number' && errors && _jsx(HiddenText, { id: commaDescID, children: "," })] }));
 });
 export default Tab;
 //# sourceMappingURL=Tab.js.map

package/lib/components/Tabs/Tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../src/components/Tabs/Tab.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useContext } from 'react';\nimport type { PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { DefaultTheme } from 'styled-components';\nimport { meetsContrastGuidelines, mix, readableColor, transparentize } from 'polished';\n\nimport { calculateForegroundColor, isSolidColor, readableHue } from '../../styles';\nimport * as warnSolidIcon from '../Icon/icons/warn-solid.icon';\nimport { registerIcon } from '../Icon';\nimport { useConsolidatedRef, useElement, useI18n, useUID } from '../../hooks';\nimport Tooltip from '../Tooltip';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport Count, { StyledCount } from '../Badges/Count';\nimport type { ForwardRefForwardPropsComponent } from '../../types';\nimport BareButton from '../Button/BareButton';\nimport HiddenText from '../HiddenText';\n\nimport TabsContext from './TabsContext';\nimport type { TabsContextValue } from './TabsContext';\nimport type { TabsProps, Tab as TabType } from './Tabs.types';\nimport { StyledErrorIcon } from './Tabs.styles';\n\nregisterIcon(warnSolidIcon);\n\nexport interface TabProps {\n  /** Indicates if this Tab is active. */\n  selected: boolean;\n  /** The text to display as the name of the Tab. */\n  content: string;\n  /** A number to associate with the Tab. */\n  count?: TabType['count'];\n  /** Determines the direction in which the Tab will render. */\n  type: TabsProps['type'];\n  /** Disables the tab if true */\n  disabled?: boolean;\n  /** An error to associate with the Tab. */\n  errors?: number | boolean;\n  /** Ref to the tab element. */\n  ref?: Ref<HTMLButtonElement | HTMLAnchorElement>;\n}\n\nexport interface StyledTabProps {\n  selected: TabProps['selected'];\n  tabType: TabProps['type'];\n}\n\nconst activeStyle = (color: string) => css`\n  &::after {\n    display: block;\n    background-color: ${color};\n  }\n`;\n\nconst getHorizontalUnselectedHoverStyle = ({\n  detached,\n  level,\n  opacity,\n  color\n}: { level?: TabsContextValue['level'] } & {\n  detached?: boolean;\n  color?: string;\n  opacity: number;\n}) =>\n  level && level > 1 && !detached\n    ? css`\n        &::before {\n          content: '';\n          position: absolute;\n          top: 0;\n          bottom: 0;\n          left: 0;\n          right: 0;\n          border-radius: inherit;\n          background-color: currentColor;\n          opacity: ${opacity};\n        }\n      `\n    : css`\n        background-color: ${color};\n        border-start-start-radius: ${detached ? 0 : 'calc(0.5rem * 0.5)'};\n        border-start-end-radius: ${detached ? 0 : 'calc(0.5rem * 0.5)'};\n      `;\n\nconst getHorizontalStyles = ({\n  selected,\n  level,\n  theme\n}: { theme: DefaultTheme } & Pick<StyledTabProps, 'selected'> & {\n    level?: TabsContextValue['level'];\n  }) => {\n  const color = theme.components.button.color;\n  const foreground = theme.base.palette['foreground-color'];\n  const { detached: tabsDetached } = theme.components.tabs;\n  const secondaryColor = tabsDetached\n    ? theme.base.palette['primary-background']\n    : theme.base.palette['secondary-background'];\n  const lightenedColor = tryCatch(() => transparentize(0.3, color)) ?? '';\n\n  // If the secondary color is not a solid color, use the readable color as the fallback background.\n  const fallbackBackground = isSolidColor(secondaryColor) ? secondaryColor : readableColor(color);\n  const backgroundUsable = tryCatch(() => meetsContrastGuidelines(color, fallbackBackground).AA);\n  const usableColor = backgroundUsable ? color : readableHue(color, fallbackBackground);\n  const hoverBackgroundColor = tabsDetached\n    ? tryCatch(() => transparentize(0.95, foreground))\n    : tryCatch(() => mix(0.9, fallbackBackground, usableColor));\n  const activeBackgroundColor = tabsDetached\n    ? theme.base.palette['secondary-background']\n    : tryCatch(() => mix(0.8, fallbackBackground, usableColor));\n\n  const { spacing } = theme.base;\n\n  let activeTabColor = theme.base.palette.interactive;\n  if (!meetsContrastGuidelines(activeTabColor, fallbackBackground).AA) {\n    activeTabColor = readableHue(activeTabColor, fallbackBackground);\n  }\n\n  return css`\n    align-items: center;\n    display: flex;\n    flex-direction: row;\n    height: calc(4 * ${spacing});\n    padding: 0 calc(1.5 * ${spacing});\n    border: none;\n    text-decoration: none;\n\n    @media (pointer: coarse) {\n      height: ${theme.base['hit-area']['finger-min']};\n    }\n\n    span:first-of-type {\n      color: ${selected ? color : foreground};\n      display: inline-block;\n\n      &::before {\n        content: attr(data-content) / '';\n        display: block;\n        font-weight: bold;\n        height: 0;\n        overflow: hidden;\n        visibility: hidden;\n      }\n    }\n\n    &:first-child {\n      margin-left: 0;\n    }\n    &::after {\n      background: ${selected ? color : lightenedColor};\n      display: ${selected ? 'block' : 'none'};\n      content: '';\n      position: absolute;\n      height: 0.125rem;\n      bottom: 0;\n      left: calc(1.5 * ${spacing});\n      right: calc(1.5 * ${spacing});\n    }\n\n    ${!selected\n      ? css`\n          @media (hover: hover) {\n            &:not(:disabled):hover {\n              text-decoration: none;\n              ${getHorizontalUnselectedHoverStyle({\n                detached: tabsDetached,\n                level,\n                opacity: 0.1,\n                color: hoverBackgroundColor\n              })}\n            }\n\n            &:not(:disabled):active {\n              text-decoration: none;\n              ${getHorizontalUnselectedHoverStyle({\n                detached: tabsDetached,\n                level,\n                opacity: 0.2,\n                color: activeBackgroundColor\n              })}\n            }\n          }\n        `\n      : css`\n          ${level &&\n          level > 1 &&\n          css`\n            background-color: ${theme.base.palette['primary-background']};\n          `}\n        `}\n\n    &:focus,\n    &:not([disabled]):focus {\n      border-radius: calc(0.5rem * 0.5);\n      box-shadow: ${theme.base.shadow['focus-inset']};\n      text-decoration: none;\n      &::after {\n        display: none;\n      }\n    }\n\n    @media (pointer: coarse) {\n      min-block-size: ${theme.base['hit-area'].finger};\n    }\n\n    ${StyledCount} {\n      margin-inline-start: calc(0.5 * ${spacing});\n    }\n\n    ${tabsDetached &&\n    css`\n      &[aria-selected='true'],\n      &:focus,\n      &:not([disabled]):focus {\n        color: ${activeTabColor};\n        span:first-of-type {\n          color: ${activeTabColor};\n        }\n        background: ${activeBackgroundColor};\n      }\n      &:hover:not(:disabled):not([aria-selected='true']) {\n        background: ${hoverBackgroundColor};\n        border-radius: 0;\n        color: ${foreground};\n        span:first-of-type {\n          color: ${foreground};\n        }\n      }\n    `}\n  `;\n};\n\nconst getVerticalStyles = ({\n  selected,\n  theme\n}: { theme: DefaultTheme } & Pick<StyledTabProps, 'selected'>) => {\n  const { detached: tabsDetached } = theme.components.tabs;\n  const borderColor = theme.base.palette['border-line'];\n  const interactive = theme.base.palette.interactive;\n  const foreground = theme.base.palette['foreground-color'];\n  const secondary = theme.base.palette['secondary-background'];\n  const lightenedColor =\n    tryCatch(() =>\n      transparentize(tabsDetached ? 0.95 : 0.5, tabsDetached ? foreground : interactive)\n    ) ?? '';\n  const { spacing } = theme.base;\n  const activeTabBg = tabsDetached ? secondary : transparentize(0.75, interactive);\n  const activeTabColor = tabsDetached\n    ? interactive\n    : calculateForegroundColor(activeTabBg, foreground);\n\n  return css`\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    border-style: solid;\n    color: ${foreground};\n    border-width: 0.0625rem 0;\n    border-color: ${tabsDetached ? 'transparent' : borderColor};\n    height: calc(5.5 * ${spacing});\n    margin-top: -0.0625rem;\n    padding: 0 calc(2 * ${spacing});\n    text-decoration: none;\n\n    &:first-child {\n      border-top: 0.0625rem solid ${tabsDetached ? 'transparent' : borderColor};\n    }\n    &::after {\n      content: '';\n      position: absolute;\n      display: ${selected ? 'block' : 'none'};\n      top: 0;\n      bottom: 0;\n      ${tabsDetached ? 'left: 0;' : 'right: 0;'}\n      width: 0.25rem;\n      background: ${interactive};\n    }\n    &:hover&:not(:disabled) {\n      ${activeStyle(lightenedColor)}\n      text-decoration: none;\n    }\n\n    &:focus,\n    &:not([disabled]):focus {\n      ${activeStyle(interactive)}\n      box-shadow: inset 0 0 0 0.0625rem ${interactive};\n      text-decoration: none;\n    }\n\n    ${tabsDetached &&\n    css`\n      border-radius: calc(0.5 * ${theme.base['border-radius']});\n      border-top-left-radius: 0;\n      border-bottom-left-radius: 0;\n      margin: calc(0.125 * ${spacing}) calc(2 * ${spacing});\n\n      &:not([disabled]):focus,\n      &[aria-selected='true'] {\n        background: ${activeTabBg};\n        color: ${activeTabColor};\n      }\n      &:hover&:not(:disabled):not([aria-selected='true']) {\n        background: ${lightenedColor};\n      }\n    `}\n  `;\n};\n\nexport const StyledTab = styled(BareButton)<\n  StyledTabProps & {\n    level?: TabsContextValue['level'];\n  }\n>(\n  ({ theme, tabType, selected, level }) => css`\n    position: relative;\n    background: none;\n    cursor: pointer;\n    white-space: nowrap;\n\n    ${selected &&\n    css`\n      font-weight: bold;\n    `}\n\n    & + & {\n      margin-inline-start: 0;\n    }\n\n    &:focus {\n      outline: none;\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: ${theme.base['disabled-opacity']};\n    }\n\n    ${tabType === 'horizontal'\n      ? getHorizontalStyles({ theme, selected, level })\n      : getVerticalStyles({ theme, selected })}\n\n    ${StyledErrorIcon} {\n      margin-inline-end: calc(0.5 * ${theme.base.spacing});\n    }\n  `\n);\n\nStyledTab.defaultProps = defaultThemeProp;\n\nconst Tab: ForwardRefForwardPropsComponent<TabProps> = forwardRef(function Tab(\n  { selected, content, count, type, disabled, errors, ...restProps }: PropsWithoutRef<TabProps>,\n  ref: TabProps['ref']\n) {\n  const t = useI18n();\n  const [tabEl, setTabEl] = useElement<HTMLButtonElement | HTMLAnchorElement>();\n  const tabRef = useConsolidatedRef(ref, setTabEl);\n  const { level } = useContext(TabsContext);\n  const countDescID = useUID();\n  const errorDescID = useUID();\n  const commaDescID = useUID();\n\n  const describedBy: string[] = [];\n  if (typeof count === 'number') {\n    describedBy.push(countDescID);\n  }\n  if (typeof count === 'number' && errors) {\n    describedBy.push(commaDescID);\n  }\n  if (errors) {\n    describedBy.push(errorDescID);\n  }\n\n  return (\n    <StyledTab\n      ref={tabRef}\n      selected={selected}\n      tabType={type}\n      disabled={disabled}\n      level={level}\n      aria-describedby={describedBy.length > 0 ? describedBy.join(' ') : undefined}\n      {...restProps}\n    >\n      <span>\n        {!!errors && (\n          <>\n            <StyledErrorIcon name='warn-solid' />\n            <Tooltip target={tabEl} hideDelay='none' showDelay='none' describeTarget={false}>\n              {t('tab_error_tooltip', [content])}\n            </Tooltip>\n            <HiddenText id={errorDescID}>{t('tab_error_description')}</HiddenText>\n          </>\n        )}\n        <span data-content={content}>{content}</span>\n      </span>\n      {typeof count === 'number' && <Count id={countDescID}>{count}</Count>}\n      {typeof count === 'number' && errors && <HiddenText id={commaDescID}>,</HiddenText>}\n    </StyledTab>\n  );\n});\n\nexport default Tab;\n"]}
+{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../src/components/Tabs/Tab.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { DefaultTheme } from 'styled-components';\nimport { meetsContrastGuidelines, mix, readableColor, transparentize } from 'polished';\n\nimport { calculateForegroundColor, isSolidColor, readableHue } from '../../styles';\nimport * as warnSolidIcon from '../Icon/icons/warn-solid.icon';\nimport { registerIcon } from '../Icon';\nimport { useConsolidatedRef, useElement, useI18n, useUID } from '../../hooks';\nimport Tooltip from '../Tooltip';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport Count, { StyledCount } from '../Badges/Count';\nimport type { ForwardRefForwardPropsComponent } from '../../types';\nimport BareButton from '../Button/BareButton';\nimport HiddenText from '../HiddenText';\n\nimport type { TabsProps, Tab as TabType } from './Tabs.types';\nimport { StyledErrorIcon } from './Tabs.styles';\n\nregisterIcon(warnSolidIcon);\n\nexport interface TabProps {\n  /** Indicates if this Tab is active. */\n  selected: boolean;\n  /** The text to display as the name of the Tab. */\n  content: string;\n  /** A number to associate with the Tab. */\n  count?: TabType['count'];\n  /** Determines the direction in which the Tab will render. */\n  type: TabsProps['type'];\n  /** Disables the tab if true */\n  disabled?: boolean;\n  /** An error to associate with the Tab. */\n  errors?: number | boolean;\n  /** Ref to the tab element. */\n  ref?: Ref<HTMLButtonElement | HTMLAnchorElement>;\n}\n\nexport interface StyledTabProps {\n  selected: TabProps['selected'];\n  tabType: TabProps['type'];\n}\n\nconst getHorizontalStyles = ({\n  selected,\n  theme\n}: Pick<StyledTabProps, 'selected'> & { theme: DefaultTheme }) => {\n  const color = theme.components.button.color;\n  const foreground = theme.base.palette['foreground-color'];\n  const { detached: tabsDetached } = theme.components.tabs;\n  const secondaryColor = tabsDetached\n    ? theme.base.palette['primary-background']\n    : theme.base.palette['secondary-background'];\n\n  // If the secondary color is not a solid color, use the readable color as the fallback background.\n  const fallbackBackground = isSolidColor(secondaryColor) ? secondaryColor : readableColor(color);\n  const backgroundUsable = tryCatch(() => meetsContrastGuidelines(color, fallbackBackground).AA);\n  const usableColor = backgroundUsable ? color : readableHue(color, fallbackBackground);\n  const hoverBackgroundColor = tabsDetached\n    ? tryCatch(() => transparentize(0.95, foreground))\n    : tryCatch(() => mix(0.9, fallbackBackground, usableColor));\n  const activeBackgroundColor = tabsDetached\n    ? theme.base.palette['secondary-background']\n    : tryCatch(() => mix(0.8, fallbackBackground, usableColor));\n\n  const { spacing } = theme.base;\n\n  let activeTabColor = theme.base.palette.interactive;\n  if (!meetsContrastGuidelines(activeTabColor, fallbackBackground).AA) {\n    activeTabColor = readableHue(activeTabColor, fallbackBackground);\n  }\n\n  return css`\n    align-items: center;\n    display: flex;\n    flex-direction: row;\n    height: calc(4 * ${spacing});\n    padding: 0 calc(1.5 * ${spacing});\n    border: none;\n    text-decoration: none;\n    transition-property: background-color;\n    transition-duration: max(${theme.base.animation.speed}, 1ms);\n    transition-timing-function: ${theme.base.animation.timing.ease};\n\n    @media (pointer: coarse) {\n      height: ${theme.base['hit-area']['finger-min']};\n    }\n\n    span:first-of-type {\n      color: ${selected ? color : foreground};\n      display: inline-block;\n      transition-property: color;\n      transition-duration: ${selected ? `max(${theme.base.animation.speed}, 1ms)` : '0s'};\n      transition-timing-function: ${theme.base.animation.timing.ease};\n\n      &::before {\n        content: attr(data-content) / '';\n        display: block;\n        font-weight: bold;\n        height: 0;\n        overflow: hidden;\n        visibility: hidden;\n      }\n    }\n\n    &:first-child {\n      margin-inline-start: 0;\n    }\n\n    ${!selected &&\n    css`\n      @media (hover: hover) {\n        &:not(:disabled):hover {\n          text-decoration: none;\n          background-color: ${hoverBackgroundColor};\n        }\n\n        &:not(:disabled):active {\n          text-decoration: none;\n          background-color: ${activeBackgroundColor};\n        }\n      }\n    `}\n\n    &:focus-visible,\n    &:not(:disabled):focus-visible {\n      text-decoration: none;\n      outline: none;\n\n      &::after {\n        content: '';\n        position: absolute;\n        inset: 0;\n        border-radius: calc(0.5rem * 0.5);\n        box-shadow: ${theme.base.shadow['focus-inset']};\n        pointer-events: none;\n        z-index: 3;\n      }\n    }\n\n    &:first-child:focus-visible::after,\n    &:first-child:not(:disabled):focus-visible::after {\n      border-start-start-radius: var(--border-radius, ${theme.base['border-radius']});\n    }\n\n    @media (pointer: coarse) {\n      min-block-size: ${theme.base['hit-area'].finger};\n    }\n\n    ${StyledCount} {\n      margin-inline-start: calc(0.5 * ${spacing});\n    }\n\n    ${tabsDetached &&\n    css`\n      &[aria-selected='true'],\n      &:focus-visible,\n      &:not([disabled]):focus-visible {\n        color: ${activeTabColor};\n        span:first-of-type {\n          color: ${activeTabColor};\n        }\n        background: ${activeBackgroundColor};\n      }\n      &:hover:not(:disabled):not([aria-selected='true']) {\n        background: ${hoverBackgroundColor};\n        border-radius: 0;\n        color: ${foreground};\n        span:first-of-type {\n          color: ${foreground};\n        }\n      }\n    `}\n  `;\n};\n\nconst getVerticalStyles = ({\n  theme,\n  selected\n}: Pick<StyledTabProps, 'selected'> & { theme: DefaultTheme }) => {\n  const { detached: tabsDetached } = theme.components.tabs;\n  const interactive = theme.base.palette.interactive;\n  const foreground = theme.base.palette['foreground-color'];\n  const secondary = theme.base.palette['secondary-background'];\n  const { spacing } = theme.base;\n  const lightenedColor =\n    tryCatch(() =>\n      transparentize(tabsDetached ? 0.95 : 0.5, tabsDetached ? foreground : interactive)\n    ) ?? '';\n  const activeTabBg = tabsDetached ? secondary : transparentize(0.75, interactive);\n  const activeTabColor = tabsDetached\n    ? interactive\n    : calculateForegroundColor(activeTabBg, foreground);\n\n  const borderColor = theme.base.palette['border-line'];\n\n  return css`\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    border-style: solid;\n    color: ${foreground};\n    border-width: 0.0625rem 0;\n    border-color: ${tabsDetached ? 'transparent' : borderColor};\n    height: calc(5.5 * ${spacing});\n    margin-top: -0.0625rem;\n    padding: 0 calc(2 * ${spacing});\n    text-decoration: none;\n    transition-property: ${selected ? 'color, font-weight, background-color' : 'background-color'};\n    transition-duration: max(${theme.base.animation.speed}, 1ms);\n    transition-timing-function: ${theme.base.animation.timing.ease};\n\n    &:first-child {\n      border-top: 0.0625rem solid ${tabsDetached ? 'transparent' : borderColor};\n    }\n\n    &::before {\n      content: '';\n      position: absolute;\n      ${tabsDetached ? 'inset-inline-start: 0;' : 'inset-inline-end: 0;'}\n      inset-block-start: 0;\n      inset-block-end: 0;\n      width: 0.25rem;\n      background: ${lightenedColor};\n      pointer-events: none;\n      z-index: 2;\n      opacity: 0;\n      transition-property: opacity;\n      transition-duration: max(${theme.base.animation.speed}, 1ms);\n      transition-timing-function: ${theme.base.animation.timing.ease};\n    }\n\n    &:active {\n      background: none;\n    }\n\n    &:active::before {\n      opacity: 1;\n    }\n\n    &:hover:not(:disabled)::before {\n      opacity: 1;\n    }\n\n    &:focus-visible,\n    &:not(:disabled):focus-visible {\n      text-decoration: none;\n      outline: none;\n\n      &::after {\n        content: '';\n        position: absolute;\n        inset: 0;\n        box-shadow: inset 0 0 0 0.0625rem ${interactive};\n        pointer-events: none;\n        z-index: 3;\n      }\n    }\n\n    ${tabsDetached &&\n    css`\n      border-radius: calc(0.5 * ${theme.base['border-radius']});\n      border-start-start-radius: 0;\n      border-end-start-radius: 0;\n      margin: calc(0.125 * ${spacing}) calc(2 * ${spacing});\n\n      &:focus-visible::after,\n      &:not(:disabled):focus-visible::after {\n        border-radius: calc(0.5 * ${theme.base['border-radius']});\n        border-start-start-radius: 0;\n        border-end-start-radius: 0;\n      }\n\n      &:not(:disabled):focus-visible,\n      &[aria-selected='true'] {\n        color: ${activeTabColor};\n      }\n      &:hover:not(:disabled):not([aria-selected='true']) {\n        background: ${lightenedColor};\n      }\n    `}\n  `;\n};\n\nexport const StyledTab = styled(BareButton)<StyledTabProps>(\n  ({ theme, tabType, selected }) => css`\n    position: relative;\n    cursor: pointer;\n    white-space: nowrap;\n\n    > * {\n      position: relative;\n      z-index: 1;\n    }\n\n    ${selected &&\n    css`\n      font-weight: bold;\n      transition-property: font-weight;\n      transition-duration: max(${theme.base.animation.speed}, 1ms);\n      transition-timing-function: ${theme.base.animation.timing.ease};\n    `}\n\n    ${!selected &&\n    css`\n      transition: font-weight 0s;\n    `}\n\n    & + & {\n      margin-inline-start: 0;\n    }\n\n    &:focus-visible {\n      outline: none;\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: ${theme.base['disabled-opacity']};\n    }\n\n    ${tabType === 'horizontal'\n      ? getHorizontalStyles({ theme, selected })\n      : getVerticalStyles({ theme, selected })}\n\n    ${StyledErrorIcon} {\n      margin-inline-end: calc(0.5 * ${theme.base.spacing});\n    }\n  `\n);\n\nStyledTab.defaultProps = defaultThemeProp;\n\nconst Tab: ForwardRefForwardPropsComponent<TabProps> = forwardRef(function Tab(\n  { selected, content, count, type, disabled, errors, ...restProps }: PropsWithoutRef<TabProps>,\n  ref: TabProps['ref']\n) {\n  const t = useI18n();\n  const [tabEl, setTabEl] = useElement<HTMLButtonElement | HTMLAnchorElement>();\n  const tabRef = useConsolidatedRef(ref, setTabEl);\n  const countDescID = useUID();\n  const errorDescID = useUID();\n  const commaDescID = useUID();\n\n  const describedBy: string[] = [];\n  if (typeof count === 'number') {\n    describedBy.push(countDescID);\n  }\n  if (typeof count === 'number' && errors) {\n    describedBy.push(commaDescID);\n  }\n  if (errors) {\n    describedBy.push(errorDescID);\n  }\n\n  return (\n    <StyledTab\n      ref={tabRef}\n      selected={selected}\n      tabType={type}\n      disabled={disabled}\n      aria-describedby={describedBy.length > 0 ? describedBy.join(' ') : undefined}\n      {...restProps}\n    >\n      <span>\n        {!!errors && (\n          <>\n            <StyledErrorIcon name='warn-solid' />\n            <Tooltip target={tabEl} hideDelay='none' showDelay='none' describeTarget={false}>\n              {t('tab_error_tooltip', [content])}\n            </Tooltip>\n            <HiddenText id={errorDescID}>{t('tab_error_description')}</HiddenText>\n          </>\n        )}\n        <span data-content={content}>{content}</span>\n      </span>\n      {typeof count === 'number' && <Count id={countDescID}>{count}</Count>}\n      {typeof count === 'number' && errors && <HiddenText id={commaDescID}>,</HiddenText>}\n    </StyledTab>\n  );\n});\n\nexport default Tab;\n"]}

package/lib/components/Tabs/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAmD,MAAM,OAAO,CAAC;AAMhG,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAyBhD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAwF9C;;;GAGG;AACH,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CAuJpD,CAAC;AAEH,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAmD,MAAM,OAAO,CAAC;AAMhG,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAyBhD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAwF9C;;;GAGG;AACH,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CAgLpD,CAAC;AAEH,eAAe,IAAI,CAAC"}

package/lib/components/Tabs/Tabs.js

@@ -106,6 +106,29 @@ const Tabs = forwardRef(function Tabs({ tabs = [], type = 'horizontal', currentT
         const currentTabEl = tabRefMap.get(currentTabId);
         currentTabEl?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
     }, [currentTabId]);
+    useEffect(() => {
+        const currentTabEl = tabRefMap.get(currentTabId);
+        if (!currentTabEl || !wrapper)
+            return;
+        // raf to ensure layout is stable before reading offset values
+        const rafId = requestAnimationFrame(() => {
+            if (type === 'horizontal') {
+                // Horizontal tabs need left position and width for sliding animation
+                const left = currentTabEl.offsetLeft;
+                const width = currentTabEl.offsetWidth;
+                wrapper.style.setProperty('--indicator-left', `${left}px`);
+                wrapper.style.setProperty('--indicator-width', `${width}px`);
+            }
+            else {
+                // Vertical tabs need height and top position for sliding animation
+                const height = currentTabEl.offsetHeight;
+                const top = currentTabEl.offsetTop;
+                wrapper.style.setProperty('--indicator-height', `${height}px`);
+                wrapper.style.setProperty('--indicator-top', `${top}px`);
+            }
+        });
+        return () => cancelAnimationFrame(rafId);
+    }, [currentTabId, type, tabRefMap, wrapper]);
     useEffect(() => {
         if (!wrapper)
             return;

package/lib/components/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FunctionComponent, KeyboardEvent, MouseEvent, PropsWithoutRef, Ref } from 'react';\nimport { useContext, forwardRef, useEffect, useMemo, useRef, useState, Fragment } from 'react';\n\nimport SearchInput from '../SearchInput';\nimport Flex from '../Flex';\nimport Link from '../Link';\nimport type { ForwardProps } from '../../types';\nimport {\n  useAfterInitialEffect,\n  useConsolidatedRef,\n  useElement,\n  useEscape,\n  useI18n,\n  useTheme,\n  useUID,\n  useRefMap\n} from '../../hooks';\nimport * as arrowMicroDownIcon from '../Icon/icons/arrow-micro-down.icon';\nimport { registerIcon } from '../Icon/Icon';\nimport type { MenuItemProps, MenuProps } from '../Menu';\nimport { createStringMatcher, debounce } from '../../utils';\n\nimport TabsContext from './TabsContext';\nimport {\n  StyledErrorIcon,\n  StyledAllTabsButton,\n  StyledTabs,\n  StylesAllTabsButtonWrapper,\n  StyledAllTabsWrapper,\n  StyledSeparator\n} from './Tabs.styles';\nimport type { TabsProps } from './Tabs.types';\nimport Tab from './Tab';\n\nregisterIcon(arrowMicroDownIcon);\n\ntype TabItem = TabsProps['tabs'][number];\n\nconst AllTabsButton = ({\n  tabs,\n  tabRefMap,\n  currentTabId,\n  onTabClick\n}: Pick<TabsProps, 'tabs' | 'currentTabId' | 'onTabClick'> & {\n  tabRefMap: Map<string, HTMLAnchorElement | HTMLButtonElement | null>;\n}) => {\n  const menuId = useUID();\n  const t = useI18n();\n  const menuButtonRef = useRef<HTMLButtonElement>(null);\n  const [search, setSearch] = useState('');\n  const searchEleRef = useRef<HTMLInputElement>(null);\n  const [focusControlEl, setFocusControlEl] = useState<MenuProps['focusControlEl']>();\n\n  const searchRegex = createStringMatcher(search);\n\n  const itemsToRender = useMemo(() => {\n    return tabs\n      .filter(({ name }) => searchRegex.test(name))\n      .map(({ id, name, count, disabled, errors }) => {\n        const selected = id === currentTabId;\n        const item: MenuItemProps = { id, primary: name, selected, count, disabled };\n        if (errors) {\n          item.visual = <StyledErrorIcon name='warn-solid' />;\n        }\n        return item;\n      });\n  }, [tabs, search, currentTabId]);\n\n  useEscape(() => {\n    if (!search) {\n      menuButtonRef.current?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));\n      menuButtonRef.current?.focus();\n    }\n  }, searchEleRef);\n\n  return (\n    <StyledAllTabsButton\n      ref={menuButtonRef}\n      text={t('all_tabs')}\n      iconOnly\n      variant='simple'\n      icon='arrow-micro-down'\n      menu={{\n        listId: menuId,\n        mode: 'single-select',\n        items: itemsToRender,\n        focusControlEl,\n        accent: search ? searchRegex : undefined,\n        onItemClick: (id: string, event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n          onTabClick?.(id, event);\n          setSearch('');\n          tabRefMap.get(id)?.focus();\n        },\n        header: (\n          <SearchInput\n            ref={searchEleRef}\n            onSearchChange={setSearch}\n            value={search}\n            role='searchbox'\n            aria-controls={menuId}\n          />\n        )\n      }}\n      popover={{\n        onHide: () => {\n          setFocusControlEl(undefined);\n          setSearch('');\n        },\n        onShow: () => {\n          if (searchEleRef.current) {\n            setFocusControlEl(searchEleRef.current);\n            searchEleRef.current.focus();\n          }\n        }\n      }}\n    />\n  );\n};\n\n/**\n * The tabs component will take a list of tab data objects and render out a list of tabs in either vertical or horizontal direction.\n * The tabs component handles which tab is active but will give you a callback function that allows you to make changes when a new tab is activated\n */\nconst Tabs: FunctionComponent<TabsProps & ForwardProps> = forwardRef(function Tabs(\n  {\n    tabs = [],\n    type = 'horizontal',\n    currentTabId,\n    onTabClick,\n    ...restProps\n  }: PropsWithoutRef<TabsProps>,\n  ref: Ref<HTMLElement>\n) {\n  const [wrapper, setWrapper] = useElement<HTMLDivElement>();\n  const wrapperRef = useConsolidatedRef(ref, setWrapper);\n  const { level } = useContext(TabsContext);\n  const [hasScrollBar, setHasScrollBar] = useState(false);\n  const {\n    components: {\n      tabs: { detached: tabsDetached }\n    }\n  } = useTheme();\n\n  // Used to keep a reference for every tab in order to focus them with key presses\n  const [tabRefMap, getTabRef] = useRefMap<HTMLButtonElement | HTMLAnchorElement | null>();\n\n  // Handles arrow keypresses for changing the focus\n  const changeTabFocus = (event: KeyboardEvent, index: number): void => {\n    if (tabs.length) {\n      const { key } = event;\n      if (key === 'ArrowRight' || key === 'ArrowDown') {\n        const nextIndex = index + 1 < tabs.length ? index + 1 : 0;\n        const nextTab = tabRefMap.get(tabs[nextIndex].id) as HTMLButtonElement;\n\n        if (!nextTab?.disabled) {\n          nextTab?.focus();\n        } else {\n          changeTabFocus(event, nextIndex);\n        }\n      } else if (key === 'ArrowLeft' || key === 'ArrowUp') {\n        const prevIndex = index === 0 ? tabs.length - 1 : index - 1;\n        const prevTab = tabRefMap.get(tabs[prevIndex].id) as HTMLButtonElement;\n        if (!prevTab?.disabled) {\n          prevTab?.focus();\n        } else {\n          changeTabFocus(event, prevIndex);\n        }\n      }\n    }\n  };\n\n  useAfterInitialEffect(() => {\n    const event = new Event('cosmos-tab-changed', { bubbles: true, composed: true });\n    wrapperRef.current?.dispatchEvent(event);\n\n    const currentTabEl = tabRefMap.get(currentTabId);\n    currentTabEl?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n  }, [currentTabId]);\n\n  useEffect(() => {\n    if (!wrapper) return;\n\n    const ro = new ResizeObserver(\n      debounce(([entry]) => {\n        if (!entry?.target.isConnected || !(entry.target instanceof HTMLElement)) return;\n\n        setHasScrollBar(entry.target.scrollWidth > entry.target.offsetWidth);\n      }, 1)\n    );\n\n    ro.observe(wrapper);\n\n    return () => {\n      ro.disconnect();\n    };\n  }, [wrapper]);\n\n  const shouldRenderAllTabsButton = type === 'horizontal' && hasScrollBar;\n\n  const TabList = (\n    <Flex\n      {...restProps}\n      container={{\n        direction: type !== 'horizontal' ? 'column' : undefined\n      }}\n      item={{ shrink: 0 }}\n      as={StyledTabs}\n      ref={wrapperRef}\n      role='tablist'\n      aria-orientation={type}\n      hasScrollBar={hasScrollBar}\n      level={level}\n    >\n      {tabs.map((tab: TabItem, i) => {\n        const { href, name, count, id, disabled, errors } = tab;\n        const selected = id === currentTabId;\n\n        return (\n          <Fragment key={id}>\n            {level > 1 && !tabsDetached && (\n              <StyledSeparator\n                transparent={\n                  selected ||\n                  (i === 0 ? !shouldRenderAllTabsButton : tabs[i - 1].id === currentTabId)\n                }\n              />\n            )}\n            <Tab\n              id={id}\n              aria-selected={selected}\n              aria-controls={`${id}-panel`}\n              content={name}\n              count={count}\n              href={href}\n              selected={selected}\n              onClick={(event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n                onTabClick?.(id, event);\n              }}\n              role='tab'\n              ref={getTabRef(id)}\n              onKeyDown={(e: KeyboardEvent) => {\n                if (['ArrowRight', 'ArrowDown', 'ArrowLeft', 'ArrowUp'].includes(e.key)) {\n                  e.preventDefault();\n                  changeTabFocus(e, i);\n                }\n              }}\n              as={href ? Link : undefined}\n              tabIndex={selected ? undefined : -1}\n              aria-label={name}\n              type={type}\n              disabled={disabled}\n              errors={errors}\n            />\n          </Fragment>\n        );\n      })}\n    </Flex>\n  );\n\n  return shouldRenderAllTabsButton ? (\n    <Flex container={{ alignItems: 'stretch' }} as={StyledAllTabsWrapper} level={level}>\n      <Flex container as={StylesAllTabsButtonWrapper}>\n        <AllTabsButton\n          tabs={tabs}\n          tabRefMap={tabRefMap}\n          currentTabId={currentTabId}\n          onTabClick={onTabClick}\n        />\n      </Flex>\n      {TabList}\n    </Flex>\n  ) : (\n    TabList\n  );\n});\n\nexport default Tabs;\n"]}
+{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FunctionComponent, KeyboardEvent, MouseEvent, PropsWithoutRef, Ref } from 'react';\nimport { useContext, forwardRef, useEffect, useMemo, useRef, useState, Fragment } from 'react';\n\nimport SearchInput from '../SearchInput';\nimport Flex from '../Flex';\nimport Link from '../Link';\nimport type { ForwardProps } from '../../types';\nimport {\n  useAfterInitialEffect,\n  useConsolidatedRef,\n  useElement,\n  useEscape,\n  useI18n,\n  useTheme,\n  useUID,\n  useRefMap\n} from '../../hooks';\nimport * as arrowMicroDownIcon from '../Icon/icons/arrow-micro-down.icon';\nimport { registerIcon } from '../Icon/Icon';\nimport type { MenuItemProps, MenuProps } from '../Menu';\nimport { createStringMatcher, debounce } from '../../utils';\n\nimport TabsContext from './TabsContext';\nimport {\n  StyledErrorIcon,\n  StyledAllTabsButton,\n  StyledTabs,\n  StylesAllTabsButtonWrapper,\n  StyledAllTabsWrapper,\n  StyledSeparator\n} from './Tabs.styles';\nimport type { TabsProps } from './Tabs.types';\nimport Tab from './Tab';\n\nregisterIcon(arrowMicroDownIcon);\n\ntype TabItem = TabsProps['tabs'][number];\n\nconst AllTabsButton = ({\n  tabs,\n  tabRefMap,\n  currentTabId,\n  onTabClick\n}: Pick<TabsProps, 'tabs' | 'currentTabId' | 'onTabClick'> & {\n  tabRefMap: Map<string, HTMLAnchorElement | HTMLButtonElement | null>;\n}) => {\n  const menuId = useUID();\n  const t = useI18n();\n  const menuButtonRef = useRef<HTMLButtonElement>(null);\n  const [search, setSearch] = useState('');\n  const searchEleRef = useRef<HTMLInputElement>(null);\n  const [focusControlEl, setFocusControlEl] = useState<MenuProps['focusControlEl']>();\n\n  const searchRegex = createStringMatcher(search);\n\n  const itemsToRender = useMemo(() => {\n    return tabs\n      .filter(({ name }) => searchRegex.test(name))\n      .map(({ id, name, count, disabled, errors }) => {\n        const selected = id === currentTabId;\n        const item: MenuItemProps = { id, primary: name, selected, count, disabled };\n        if (errors) {\n          item.visual = <StyledErrorIcon name='warn-solid' />;\n        }\n        return item;\n      });\n  }, [tabs, search, currentTabId]);\n\n  useEscape(() => {\n    if (!search) {\n      menuButtonRef.current?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));\n      menuButtonRef.current?.focus();\n    }\n  }, searchEleRef);\n\n  return (\n    <StyledAllTabsButton\n      ref={menuButtonRef}\n      text={t('all_tabs')}\n      iconOnly\n      variant='simple'\n      icon='arrow-micro-down'\n      menu={{\n        listId: menuId,\n        mode: 'single-select',\n        items: itemsToRender,\n        focusControlEl,\n        accent: search ? searchRegex : undefined,\n        onItemClick: (id: string, event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n          onTabClick?.(id, event);\n          setSearch('');\n          tabRefMap.get(id)?.focus();\n        },\n        header: (\n          <SearchInput\n            ref={searchEleRef}\n            onSearchChange={setSearch}\n            value={search}\n            role='searchbox'\n            aria-controls={menuId}\n          />\n        )\n      }}\n      popover={{\n        onHide: () => {\n          setFocusControlEl(undefined);\n          setSearch('');\n        },\n        onShow: () => {\n          if (searchEleRef.current) {\n            setFocusControlEl(searchEleRef.current);\n            searchEleRef.current.focus();\n          }\n        }\n      }}\n    />\n  );\n};\n\n/**\n * The tabs component will take a list of tab data objects and render out a list of tabs in either vertical or horizontal direction.\n * The tabs component handles which tab is active but will give you a callback function that allows you to make changes when a new tab is activated\n */\nconst Tabs: FunctionComponent<TabsProps & ForwardProps> = forwardRef(function Tabs(\n  {\n    tabs = [],\n    type = 'horizontal',\n    currentTabId,\n    onTabClick,\n    ...restProps\n  }: PropsWithoutRef<TabsProps>,\n  ref: Ref<HTMLElement>\n) {\n  const [wrapper, setWrapper] = useElement<HTMLDivElement>();\n  const wrapperRef = useConsolidatedRef(ref, setWrapper);\n  const { level } = useContext(TabsContext);\n  const [hasScrollBar, setHasScrollBar] = useState(false);\n  const {\n    components: {\n      tabs: { detached: tabsDetached }\n    }\n  } = useTheme();\n\n  // Used to keep a reference for every tab in order to focus them with key presses\n  const [tabRefMap, getTabRef] = useRefMap<HTMLButtonElement | HTMLAnchorElement | null>();\n\n  // Handles arrow keypresses for changing the focus\n  const changeTabFocus = (event: KeyboardEvent, index: number): void => {\n    if (tabs.length) {\n      const { key } = event;\n      if (key === 'ArrowRight' || key === 'ArrowDown') {\n        const nextIndex = index + 1 < tabs.length ? index + 1 : 0;\n        const nextTab = tabRefMap.get(tabs[nextIndex].id) as HTMLButtonElement;\n\n        if (!nextTab?.disabled) {\n          nextTab?.focus();\n        } else {\n          changeTabFocus(event, nextIndex);\n        }\n      } else if (key === 'ArrowLeft' || key === 'ArrowUp') {\n        const prevIndex = index === 0 ? tabs.length - 1 : index - 1;\n        const prevTab = tabRefMap.get(tabs[prevIndex].id) as HTMLButtonElement;\n        if (!prevTab?.disabled) {\n          prevTab?.focus();\n        } else {\n          changeTabFocus(event, prevIndex);\n        }\n      }\n    }\n  };\n\n  useAfterInitialEffect(() => {\n    const event = new Event('cosmos-tab-changed', { bubbles: true, composed: true });\n    wrapperRef.current?.dispatchEvent(event);\n\n    const currentTabEl = tabRefMap.get(currentTabId);\n    currentTabEl?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n  }, [currentTabId]);\n\n  useEffect(() => {\n    const currentTabEl = tabRefMap.get(currentTabId);\n\n    if (!currentTabEl || !wrapper) return;\n\n    // raf to ensure layout is stable before reading offset values\n    const rafId = requestAnimationFrame(() => {\n      if (type === 'horizontal') {\n        // Horizontal tabs need left position and width for sliding animation\n        const left = currentTabEl.offsetLeft;\n        const width = currentTabEl.offsetWidth;\n        wrapper.style.setProperty('--indicator-left', `${left}px`);\n        wrapper.style.setProperty('--indicator-width', `${width}px`);\n      } else {\n        // Vertical tabs need height and top position for sliding animation\n        const height = currentTabEl.offsetHeight;\n        const top = currentTabEl.offsetTop;\n        wrapper.style.setProperty('--indicator-height', `${height}px`);\n        wrapper.style.setProperty('--indicator-top', `${top}px`);\n      }\n    });\n\n    return () => cancelAnimationFrame(rafId);\n  }, [currentTabId, type, tabRefMap, wrapper]);\n\n  useEffect(() => {\n    if (!wrapper) return;\n\n    const ro = new ResizeObserver(\n      debounce(([entry]) => {\n        if (!entry?.target.isConnected || !(entry.target instanceof HTMLElement)) return;\n\n        setHasScrollBar(entry.target.scrollWidth > entry.target.offsetWidth);\n      }, 1)\n    );\n\n    ro.observe(wrapper);\n\n    return () => {\n      ro.disconnect();\n    };\n  }, [wrapper]);\n\n  const shouldRenderAllTabsButton = type === 'horizontal' && hasScrollBar;\n\n  const TabList = (\n    <Flex\n      {...restProps}\n      container={{\n        direction: type !== 'horizontal' ? 'column' : undefined\n      }}\n      item={{ shrink: 0 }}\n      as={StyledTabs}\n      ref={wrapperRef}\n      role='tablist'\n      aria-orientation={type}\n      hasScrollBar={hasScrollBar}\n      level={level}\n    >\n      {tabs.map((tab: TabItem, i) => {\n        const { href, name, count, id, disabled, errors } = tab;\n        const selected = id === currentTabId;\n\n        return (\n          <Fragment key={id}>\n            {level > 1 && !tabsDetached && (\n              <StyledSeparator\n                transparent={\n                  selected ||\n                  (i === 0 ? !shouldRenderAllTabsButton : tabs[i - 1].id === currentTabId)\n                }\n              />\n            )}\n            <Tab\n              id={id}\n              aria-selected={selected}\n              aria-controls={`${id}-panel`}\n              content={name}\n              count={count}\n              href={href}\n              selected={selected}\n              onClick={(event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n                onTabClick?.(id, event);\n              }}\n              role='tab'\n              ref={getTabRef(id)}\n              onKeyDown={(e: KeyboardEvent) => {\n                if (['ArrowRight', 'ArrowDown', 'ArrowLeft', 'ArrowUp'].includes(e.key)) {\n                  e.preventDefault();\n                  changeTabFocus(e, i);\n                }\n              }}\n              as={href ? Link : undefined}\n              tabIndex={selected ? undefined : -1}\n              aria-label={name}\n              type={type}\n              disabled={disabled}\n              errors={errors}\n            />\n          </Fragment>\n        );\n      })}\n    </Flex>\n  );\n\n  return shouldRenderAllTabsButton ? (\n    <Flex container={{ alignItems: 'stretch' }} as={StyledAllTabsWrapper} level={level}>\n      <Flex container as={StylesAllTabsButtonWrapper}>\n        <AllTabsButton\n          tabs={tabs}\n          tabRefMap={tabRefMap}\n          currentTabId={currentTabId}\n          onTabClick={onTabClick}\n        />\n      </Flex>\n      {TabList}\n    </Flex>\n  ) : (\n    TabList\n  );\n});\n\nexport default Tabs;\n"]}

package/lib/components/Tabs/Tabs.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,0BAA0B,6NAmBtC,CAAC;AAIF,eAAO,MAAM,UAAU;kBACP,OAAO;WACd,MAAM;YAqIb,CAAC;AAIH,eAAO,MAAM,mBAAmB;;;;iDAI/B,CAAC;AAIF,eAAO,MAAM,eAAe,kYAI3B,CAAC;AAIF,eAAO,MAAM,oBAAoB;WACxB,MAAM;YAoCd,CAAC;AAIF,eAAO,MAAM,eAAe;iBAA8B,OAAO;YAOhE,CAAC"}
+{"version":3,"file":"Tabs.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.styles.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,0BAA0B,6NAmBtC,CAAC;AAIF,eAAO,MAAM,UAAU;kBACP,OAAO;WACd,MAAM;YAwOb,CAAC;AAIH,eAAO,MAAM,mBAAmB;;;;iDAI/B,CAAC;AAIF,eAAO,MAAM,eAAe,kYAI3B,CAAC;AAIF,eAAO,MAAM,oBAAoB;WACxB,MAAM;YAoCd,CAAC;AAIF,eAAO,MAAM,eAAe;iBAA8B,OAAO;YAOhE,CAAC"}

package/lib/components/Tabs/Tabs.styles.js

@@ -1,4 +1,5 @@
 import styled, { css } from 'styled-components';
+import { transparentize } from 'polished';
 import Icon from '../Icon';
 import MenuButton from '../MenuButton';
 import { defaultThemeProp } from '../../theme';
@@ -23,9 +24,103 @@ export const StylesAllTabsButtonWrapper = styled.div(({ theme }) => css `
   `);
 StylesAllTabsButtonWrapper.defaultProps = defaultThemeProp;
 export const StyledTabs = styled.div(({ theme, hasScrollBar, level }) => {
+    const { detached: tabsDetached } = theme.components.tabs;
+    const { spacing } = theme.base;
+    const color = theme.components.button.color;
+    const secondary = theme.base.palette['secondary-background'];
+    const interactive = theme.base.palette.interactive;
+    const shouldShowBackground = tabsDetached || (level && level > 1);
+    let verticalBackground = 'transparent';
+    if (shouldShowBackground) {
+        verticalBackground = tabsDetached ? secondary : transparentize(0.75, interactive);
+    }
+    const horizontalBackground = shouldShowBackground
+        ? theme.base.palette['primary-background']
+        : 'transparent';
+    const indicatorTransition = css `
+    transition-property: transform, width, height;
+    transition-duration: max(${theme.base.animation.speed}, 1ms);
+    transition-timing-function: ${theme.base.animation.timing.ease};
+  `;
     return css `
     position: relative;
 
+    &::before {
+      content: '';
+      position: absolute;
+      ${indicatorTransition};
+      pointer-events: none;
+      z-index: 0;
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      ${indicatorTransition};
+      pointer-events: none;
+      z-index: 2;
+    }
+
+    &[aria-orientation='horizontal']::before {
+      inset-block-start: 0;
+      inset-block-end: 0;
+      inset-inline-start: 0;
+      width: var(--indicator-width);
+      transform: translateX(var(--indicator-left));
+      background: ${horizontalBackground};
+    }
+
+    &[aria-orientation='horizontal']::after {
+      inset-block-end: 0;
+      inset-inline-start: calc(1.5 * ${spacing});
+      width: calc(var(--indicator-width) - 3 * ${spacing});
+      height: 0.125rem;
+      background: ${color};
+      transform: translateX(var(--indicator-left));
+    }
+
+    &[aria-orientation='vertical']::before {
+      inset-block-start: 0;
+      height: var(--indicator-height);
+      transform: translateY(var(--indicator-top));
+      background: ${verticalBackground};
+
+      ${!tabsDetached &&
+        css `
+        inset-inline-start: 0;
+        width: 100%;
+      `}
+
+      ${tabsDetached &&
+        css `
+        inset-inline-start: calc(2 * ${spacing});
+        inset-inline-end: calc(2 * ${spacing});
+        border-radius: calc(0.5 * ${theme.base['border-radius']});
+        border-start-start-radius: 0;
+        border-end-start-radius: 0;
+      `}
+    }
+
+    &[aria-orientation='vertical']::after {
+      width: 0.25rem;
+      background: ${interactive};
+      transform: translateY(var(--indicator-top));
+
+      ${!tabsDetached &&
+        css `
+        inset-block-start: 0;
+        height: var(--indicator-height);
+        inset-inline-end: 0;
+      `}
+
+      ${tabsDetached &&
+        css `
+        inset-block-start: 0.0625rem;
+        height: calc(var(--indicator-height) - 0.125rem);
+        inset-inline-start: calc(2 * ${spacing});
+      `}
+    }
+
     ${theme.components.tabs.detached &&
         css `
       ${StyledTab} + ${StyledTab} {
@@ -47,14 +142,14 @@ export const StyledTabs = styled.div(({ theme, hasScrollBar, level }) => {
 
           ${!hasScrollBar &&
             css `
-            :first-child {
-              border-top-left-radius: var(--border-radius, ${theme.base['border-radius']});
+            &:first-child {
+              border-start-start-radius: var(--border-radius, ${theme.base['border-radius']});
             }
           `}
           ${hasScrollBar &&
             css `
-            :last-child {
-              border-top-right-radius: var(--border-radius, ${theme.base['border-radius']});
+            &:last-child {
+              border-start-end-radius: var(--border-radius, ${theme.base['border-radius']});
             }
           `}
         }
@@ -70,6 +165,9 @@ export const StyledTabs = styled.div(({ theme, hasScrollBar, level }) => {
               100% - ${theme.base['hit-area']['mouse-min']} -
                 ${level > 1 ? '0px' : `calc(0.5 * ${theme.base.spacing}) - 0.0625rem `}
             );
+            border-block-end: ${theme.components.tabs.detached
+            ? 'none'
+            : `0.0625rem solid ${theme.base.palette['border-line']}`};
 
             @media (pointer: coarse) {
               max-width: calc(
@@ -79,9 +177,6 @@ export const StyledTabs = styled.div(({ theme, hasScrollBar, level }) => {
             }
 
             ${StyledTab} {
-              border-block-end: ${theme.components.tabs.detached
-            ? 'none'
-            : `0.0625rem solid ${theme.base.palette['border-line']}`};
               height: calc(${theme.base['hit-area']['mouse-min']} + 0.0625rem);
 
               @media (pointer: coarse) {

package/lib/components/Tabs/Tabs.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.styles.js","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport Icon from '../Icon';\nimport MenuButton from '../MenuButton';\nimport { defaultThemeProp } from '../../theme';\n\nimport { StyledTab } from './Tab';\n\nexport const StylesAllTabsButtonWrapper = styled.div(\n  ({ theme }) => css`\n    border-block-end: ${theme.components.tabs.detached\n      ? 'none'\n      : `0.0625rem solid ${theme.base.palette['border-line']}`};\n    border-inline-end: ${theme.components.tabs.detached\n      ? 'none'\n      : `0.0625rem solid ${theme.base.palette['border-line']}`};\n    height: calc(${theme.base['hit-area']['mouse-min']} + 0.0625rem);\n\n    ${theme.components.tabs.detached &&\n    css`\n      padding: 0;\n    `};\n\n    @media (pointer: coarse) {\n      height: calc(${theme.base['hit-area']['finger-min']} + 0.0625rem);\n    }\n  `\n);\n\nStylesAllTabsButtonWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledTabs = styled.div<{\n  hasScrollBar: boolean;\n  level: number;\n}>(({ theme, hasScrollBar, level }) => {\n  return css`\n    position: relative;\n\n    ${theme.components.tabs.detached &&\n    css`\n      ${StyledTab} + ${StyledTab} {\n        margin-inline-start: calc(2 * ${theme.base.spacing});\n      }\n\n      &[aria-orientation='horizontal'] {\n        background-color: ${theme.base.palette['secondary-background']};\n        border-radius: var(--border-radius, ${theme.base['border-radius']});\n        border-end-end-radius: 0;\n        border-end-start-radius: 0;\n\n        > ${StyledTab} {\n          background-color: ${theme.base.palette['secondary-background']};\n\n          &[aria-selected='true'] {\n            background-color: ${theme.base.palette['primary-background']};\n          }\n\n          ${!hasScrollBar &&\n          css`\n            :first-child {\n              border-top-left-radius: var(--border-radius, ${theme.base['border-radius']});\n            }\n          `}\n          ${hasScrollBar &&\n          css`\n            :last-child {\n              border-top-right-radius: var(--border-radius, ${theme.base['border-radius']});\n            }\n          `}\n        }\n      }\n    `}\n    &[aria-orientation='horizontal'] {\n      height: max-content;\n      overflow: auto;\n\n      ${hasScrollBar\n        ? css`\n            max-width: calc(\n              100% - ${theme.base['hit-area']['mouse-min']} -\n                ${level > 1 ? '0px' : `calc(0.5 * ${theme.base.spacing}) - 0.0625rem `}\n            );\n\n            @media (pointer: coarse) {\n              max-width: calc(\n                100% - ${theme.base['hit-area']['finger-min']} -\n                  ${level > 1 ? '0px' : `calc(0.5 * ${theme.base.spacing}) - 0.0625rem `}\n              );\n            }\n\n            ${StyledTab} {\n              border-block-end: ${theme.components.tabs.detached\n                ? 'none'\n                : `0.0625rem solid ${theme.base.palette['border-line']}`};\n              height: calc(${theme.base['hit-area']['mouse-min']} + 0.0625rem);\n\n              @media (pointer: coarse) {\n                height: calc(${theme.base['hit-area']['finger-min']} + 0.0625rem);\n              }\n\n              &:disabled {\n                opacity: 1;\n\n                > * {\n                  opacity: ${theme.base['disabled-opacity']};\n                }\n              }\n            }\n          `\n        : css`\n            border-block-end: ${theme.components.tabs.detached\n              ? 'none'\n              : `0.0625rem solid ${theme.base.palette['border-line']}`};\n            ${level > 1 &&\n            css`\n              background-color: ${theme.base.palette['secondary-background']};\n              border: ${theme.components.tabs.detached\n                ? 'none'\n                : `0.0625rem solid ${theme.base.palette['border-line']}`};\n              border-block-end: none;\n              border-radius: 0;\n              border-start-start-radius: ${theme.components.tabs.detached\n                ? `var(--border-radius, ${theme.base['border-radius']})`\n                : 'calc(0.5rem * 0.5)'};\n              border-start-end-radius: ${theme.components.tabs.detached\n                ? `var(--border-radius, ${theme.base['border-radius']})`\n                : 'calc(0.5rem * 0.5)'};\n            `}\n          `}\n      ${theme.components.tabs.detached &&\n      css`\n        padding-block: 0;\n        border: 0.0625rem solid ${theme.base.palette['border-line']};\n        border-block-end: none;\n\n        ${StylesAllTabsButtonWrapper} + & {\n          padding-inline-start: calc(0.25 * ${theme.base.spacing});\n        }\n\n        ${StyledTab} + ${StyledTab} {\n          margin-inline-start: 0;\n        }\n\n        ${hasScrollBar &&\n        css`\n          border: none;\n          border-inline-start: none;\n          max-width: calc(100% - ${theme.base['hit-area']['mouse-min']});\n\n          @media (pointer: coarse) {\n            max-width: calc(100% - ${theme.base['hit-area']['finger-min']});\n          }\n        `}\n      `}\n    }\n\n    &:has(:focus-visible) {\n      &[aria-orientation='vertical'] {\n        box-shadow: ${theme.base.shadow['focus-group-inset']};\n      }\n\n      &[aria-orientation='horizontal'] {\n        box-shadow: ${theme.base.shadow['focus-group']};\n      }\n    }\n  `;\n});\n\nStyledTabs.defaultProps = defaultThemeProp;\n\nexport const StyledAllTabsButton = styled(MenuButton)`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n`;\n\nStyledAllTabsButton.defaultProps = defaultThemeProp;\n\nexport const StyledErrorIcon = styled(Icon)(\n  ({ theme }) => css`\n    color: ${theme.base.palette.urgent};\n  `\n);\n\nStyledErrorIcon.defaultProps = defaultThemeProp;\n\nexport const StyledAllTabsWrapper = styled.div<{\n  level: number;\n}>(\n  ({ theme, level }) => css`\n    ${level > 1 &&\n    css`\n      background-color: ${theme.base.palette['secondary-background']};\n      border-start-start-radius: var(--border-radius, ${theme.base['border-radius']});\n      border-start-end-radius: var(--border-radius, ${theme.base['border-radius']});\n\n      ${!theme.components.tabs.detached &&\n      css`\n        border-inline: 0.0625rem solid ${theme.base.palette['border-line']};\n        border-block-start: 0.0625rem solid ${theme.base.palette['border-line']};\n      `}\n      ${StylesAllTabsButtonWrapper}, ${StyledTab} {\n        border-block-end: none;\n        border-inline-end: none;\n      }\n    `}\n    ${theme.components.tabs.detached &&\n    css`\n      background-color: ${theme.base.palette['primary-background']};\n      border: 0.0625rem solid ${theme.base.palette['border-line']};\n      border-start-start-radius: var(--border-radius, ${theme.base['border-radius']});\n      border-start-end-radius: var(--border-radius, ${theme.base['border-radius']});\n      border-block-end: none;\n\n      ${StyledTabs}[aria-orientation='horizontal'] {\n        border-start-start-radius: 0;\n      }\n\n      ${StylesAllTabsButtonWrapper} {\n        border-radius: 0;\n      }\n    `}\n  `\n);\n\nStyledAllTabsWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledSeparator = styled.span<{ transparent: boolean }>(\n  ({ theme, transparent }) => css`\n    align-self: center;\n    height: 1em;\n    min-width: 0.0625rem;\n    background-color: ${transparent ? 'transparent' : theme.base.palette['border-line']};\n  `\n);\n\nStyledSeparator.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"Tabs.styles.js","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { transparentize } from 'polished';\n\nimport Icon from '../Icon';\nimport MenuButton from '../MenuButton';\nimport { defaultThemeProp } from '../../theme';\n\nimport { StyledTab } from './Tab';\n\nexport const StylesAllTabsButtonWrapper = styled.div(\n  ({ theme }) => css`\n    border-block-end: ${theme.components.tabs.detached\n      ? 'none'\n      : `0.0625rem solid ${theme.base.palette['border-line']}`};\n    border-inline-end: ${theme.components.tabs.detached\n      ? 'none'\n      : `0.0625rem solid ${theme.base.palette['border-line']}`};\n    height: calc(${theme.base['hit-area']['mouse-min']} + 0.0625rem);\n\n    ${theme.components.tabs.detached &&\n    css`\n      padding: 0;\n    `};\n\n    @media (pointer: coarse) {\n      height: calc(${theme.base['hit-area']['finger-min']} + 0.0625rem);\n    }\n  `\n);\n\nStylesAllTabsButtonWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledTabs = styled.div<{\n  hasScrollBar: boolean;\n  level: number;\n}>(({ theme, hasScrollBar, level }) => {\n  const { detached: tabsDetached } = theme.components.tabs;\n  const { spacing } = theme.base;\n  const color = theme.components.button.color;\n  const secondary = theme.base.palette['secondary-background'];\n  const interactive = theme.base.palette.interactive;\n\n  const shouldShowBackground = tabsDetached || (level && level > 1);\n\n  let verticalBackground = 'transparent';\n  if (shouldShowBackground) {\n    verticalBackground = tabsDetached ? secondary : transparentize(0.75, interactive);\n  }\n\n  const horizontalBackground = shouldShowBackground\n    ? theme.base.palette['primary-background']\n    : 'transparent';\n\n  const indicatorTransition = css`\n    transition-property: transform, width, height;\n    transition-duration: max(${theme.base.animation.speed}, 1ms);\n    transition-timing-function: ${theme.base.animation.timing.ease};\n  `;\n\n  return css`\n    position: relative;\n\n    &::before {\n      content: '';\n      position: absolute;\n      ${indicatorTransition};\n      pointer-events: none;\n      z-index: 0;\n    }\n\n    &::after {\n      content: '';\n      position: absolute;\n      ${indicatorTransition};\n      pointer-events: none;\n      z-index: 2;\n    }\n\n    &[aria-orientation='horizontal']::before {\n      inset-block-start: 0;\n      inset-block-end: 0;\n      inset-inline-start: 0;\n      width: var(--indicator-width);\n      transform: translateX(var(--indicator-left));\n      background: ${horizontalBackground};\n    }\n\n    &[aria-orientation='horizontal']::after {\n      inset-block-end: 0;\n      inset-inline-start: calc(1.5 * ${spacing});\n      width: calc(var(--indicator-width) - 3 * ${spacing});\n      height: 0.125rem;\n      background: ${color};\n      transform: translateX(var(--indicator-left));\n    }\n\n    &[aria-orientation='vertical']::before {\n      inset-block-start: 0;\n      height: var(--indicator-height);\n      transform: translateY(var(--indicator-top));\n      background: ${verticalBackground};\n\n      ${!tabsDetached &&\n      css`\n        inset-inline-start: 0;\n        width: 100%;\n      `}\n\n      ${tabsDetached &&\n      css`\n        inset-inline-start: calc(2 * ${spacing});\n        inset-inline-end: calc(2 * ${spacing});\n        border-radius: calc(0.5 * ${theme.base['border-radius']});\n        border-start-start-radius: 0;\n        border-end-start-radius: 0;\n      `}\n    }\n\n    &[aria-orientation='vertical']::after {\n      width: 0.25rem;\n      background: ${interactive};\n      transform: translateY(var(--indicator-top));\n\n      ${!tabsDetached &&\n      css`\n        inset-block-start: 0;\n        height: var(--indicator-height);\n        inset-inline-end: 0;\n      `}\n\n      ${tabsDetached &&\n      css`\n        inset-block-start: 0.0625rem;\n        height: calc(var(--indicator-height) - 0.125rem);\n        inset-inline-start: calc(2 * ${spacing});\n      `}\n    }\n\n    ${theme.components.tabs.detached &&\n    css`\n      ${StyledTab} + ${StyledTab} {\n        margin-inline-start: calc(2 * ${theme.base.spacing});\n      }\n\n      &[aria-orientation='horizontal'] {\n        background-color: ${theme.base.palette['secondary-background']};\n        border-radius: var(--border-radius, ${theme.base['border-radius']});\n        border-end-end-radius: 0;\n        border-end-start-radius: 0;\n\n        > ${StyledTab} {\n          background-color: ${theme.base.palette['secondary-background']};\n\n          &[aria-selected='true'] {\n            background-color: ${theme.base.palette['primary-background']};\n          }\n\n          ${!hasScrollBar &&\n          css`\n            &:first-child {\n              border-start-start-radius: var(--border-radius, ${theme.base['border-radius']});\n            }\n          `}\n          ${hasScrollBar &&\n          css`\n            &:last-child {\n              border-start-end-radius: var(--border-radius, ${theme.base['border-radius']});\n            }\n          `}\n        }\n      }\n    `}\n    &[aria-orientation='horizontal'] {\n      height: max-content;\n      overflow: auto;\n\n      ${hasScrollBar\n        ? css`\n            max-width: calc(\n              100% - ${theme.base['hit-area']['mouse-min']} -\n                ${level > 1 ? '0px' : `calc(0.5 * ${theme.base.spacing}) - 0.0625rem `}\n            );\n            border-block-end: ${theme.components.tabs.detached\n              ? 'none'\n              : `0.0625rem solid ${theme.base.palette['border-line']}`};\n\n            @media (pointer: coarse) {\n              max-width: calc(\n                100% - ${theme.base['hit-area']['finger-min']} -\n                  ${level > 1 ? '0px' : `calc(0.5 * ${theme.base.spacing}) - 0.0625rem `}\n              );\n            }\n\n            ${StyledTab} {\n              height: calc(${theme.base['hit-area']['mouse-min']} + 0.0625rem);\n\n              @media (pointer: coarse) {\n                height: calc(${theme.base['hit-area']['finger-min']} + 0.0625rem);\n              }\n\n              &:disabled {\n                opacity: 1;\n\n                > * {\n                  opacity: ${theme.base['disabled-opacity']};\n                }\n              }\n            }\n          `\n        : css`\n            border-block-end: ${theme.components.tabs.detached\n              ? 'none'\n              : `0.0625rem solid ${theme.base.palette['border-line']}`};\n            ${level > 1 &&\n            css`\n              background-color: ${theme.base.palette['secondary-background']};\n              border: ${theme.components.tabs.detached\n                ? 'none'\n                : `0.0625rem solid ${theme.base.palette['border-line']}`};\n              border-block-end: none;\n              border-radius: 0;\n              border-start-start-radius: ${theme.components.tabs.detached\n                ? `var(--border-radius, ${theme.base['border-radius']})`\n                : 'calc(0.5rem * 0.5)'};\n              border-start-end-radius: ${theme.components.tabs.detached\n                ? `var(--border-radius, ${theme.base['border-radius']})`\n                : 'calc(0.5rem * 0.5)'};\n            `}\n          `}\n      ${theme.components.tabs.detached &&\n      css`\n        padding-block: 0;\n        border: 0.0625rem solid ${theme.base.palette['border-line']};\n        border-block-end: none;\n\n        ${StylesAllTabsButtonWrapper} + & {\n          padding-inline-start: calc(0.25 * ${theme.base.spacing});\n        }\n\n        ${StyledTab} + ${StyledTab} {\n          margin-inline-start: 0;\n        }\n\n        ${hasScrollBar &&\n        css`\n          border: none;\n          border-inline-start: none;\n          max-width: calc(100% - ${theme.base['hit-area']['mouse-min']});\n\n          @media (pointer: coarse) {\n            max-width: calc(100% - ${theme.base['hit-area']['finger-min']});\n          }\n        `}\n      `}\n    }\n\n    &:has(:focus-visible) {\n      &[aria-orientation='vertical'] {\n        box-shadow: ${theme.base.shadow['focus-group-inset']};\n      }\n\n      &[aria-orientation='horizontal'] {\n        box-shadow: ${theme.base.shadow['focus-group']};\n      }\n    }\n  `;\n});\n\nStyledTabs.defaultProps = defaultThemeProp;\n\nexport const StyledAllTabsButton = styled(MenuButton)`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n`;\n\nStyledAllTabsButton.defaultProps = defaultThemeProp;\n\nexport const StyledErrorIcon = styled(Icon)(\n  ({ theme }) => css`\n    color: ${theme.base.palette.urgent};\n  `\n);\n\nStyledErrorIcon.defaultProps = defaultThemeProp;\n\nexport const StyledAllTabsWrapper = styled.div<{\n  level: number;\n}>(\n  ({ theme, level }) => css`\n    ${level > 1 &&\n    css`\n      background-color: ${theme.base.palette['secondary-background']};\n      border-start-start-radius: var(--border-radius, ${theme.base['border-radius']});\n      border-start-end-radius: var(--border-radius, ${theme.base['border-radius']});\n\n      ${!theme.components.tabs.detached &&\n      css`\n        border-inline: 0.0625rem solid ${theme.base.palette['border-line']};\n        border-block-start: 0.0625rem solid ${theme.base.palette['border-line']};\n      `}\n      ${StylesAllTabsButtonWrapper}, ${StyledTab} {\n        border-block-end: none;\n        border-inline-end: none;\n      }\n    `}\n    ${theme.components.tabs.detached &&\n    css`\n      background-color: ${theme.base.palette['primary-background']};\n      border: 0.0625rem solid ${theme.base.palette['border-line']};\n      border-start-start-radius: var(--border-radius, ${theme.base['border-radius']});\n      border-start-end-radius: var(--border-radius, ${theme.base['border-radius']});\n      border-block-end: none;\n\n      ${StyledTabs}[aria-orientation='horizontal'] {\n        border-start-start-radius: 0;\n      }\n\n      ${StylesAllTabsButtonWrapper} {\n        border-radius: 0;\n      }\n    `}\n  `\n);\n\nStyledAllTabsWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledSeparator = styled.span<{ transparent: boolean }>(\n  ({ theme, transparent }) => css`\n    align-self: center;\n    height: 1em;\n    min-width: 0.0625rem;\n    background-color: ${transparent ? 'transparent' : theme.base.palette['border-line']};\n  `\n);\n\nStyledSeparator.defaultProps = defaultThemeProp;\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-core",
-  "version": "9.0.0-build.21.3",
+  "version": "9.0.0-build.21.4",
   "description": "Cosmos is a visual design system and UI component collection. Its goal is to empower application developers in their pursuit to create engaging and rewarding user experiences.",
   "license": "SEE LICENSE IN LICENSE",
   "author": "Pegasystems",