@dynatrace/strato-components 3.13.3 → 3.14.0

package/esm/navigation/menu/MobileMenu.css

@@ -1,4 +1,4 @@
-@keyframes _1y10jf5-3-13-3 {
+@keyframes _1y10jf5-3-14-0 {
   from {
     transform: translateX(100%);
   }
@@ -6,7 +6,7 @@
     transform: translateX(0);
   }
 }
-@keyframes _1y10jf6-3-13-3 {
+@keyframes _1y10jf6-3-14-0 {
   from {
     transform: translateX(-100%);
   }
@@ -14,7 +14,7 @@
     transform: translateX(0);
   }
 }
-._1y10jf0-3-13-3 {
+._1y10jf0-3-14-0 {
   background: var(--dt-colors-background-surface-default, #fff);
   border-radius: var(--dt-borders-radius-surface-subdued, 9px);
   box-shadow: var(--dt-box-shadows-surface-floating-rest, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);
@@ -26,12 +26,12 @@
   width: 240px;
   max-width: 100dvw;
 }
-._1y10jf1-3-13-3 {
+._1y10jf1-3-14-0 {
   border-bottom: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
   flex-shrink: 0;
   padding: var(--dt-spacings-size-4, 4px);
 }
-._1y10jf2-3-13-3 {
+._1y10jf2-3-14-0 {
   display: flex;
   align-items: center;
   gap: var(--dt-spacings-size-8, 8px);
@@ -47,13 +47,13 @@
   text-align: left;
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._1y10jf2-3-13-3:hover {
+._1y10jf2-3-14-0:hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._1y10jf2-3-13-3:active {
+._1y10jf2-3-14-0:active {
   background-color: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
 }
-._1y10jf3-3-13-3 {
+._1y10jf3-3-14-0 {
   display: flex;
   align-items: center;
   gap: var(--dt-spacings-size-8, 8px);
@@ -61,7 +61,7 @@
   flex: 1;
   min-width: 0;
 }
-._1y10jf4-3-13-3 {
+._1y10jf4-3-14-0 {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -69,14 +69,22 @@
   flex: 1;
   min-width: 0;
 }
-._1y10jf7-3-13-3 {
+._1y10jf7-3-14-0 {
   flex: 1;
   overflow-y: auto;
   padding: var(--dt-spacings-size-4, 4px);
 }
-._1y10jf8-3-13-3 {
-  animation: _1y10jf5-3-13-3 200ms ease-out;
+._1y10jf8-3-14-0 {
+  animation: _1y10jf5-3-14-0 200ms ease-out;
 }
-._1y10jf9-3-13-3 {
-  animation: _1y10jf6-3-13-3 200ms ease-out;
+._1y10jf9-3-14-0 {
+  animation: _1y10jf6-3-14-0 200ms ease-out;
+}
+@media (prefers-reduced-motion) {
+  ._1y10jf8-3-14-0 {
+    animation: none;
+  }
+  ._1y10jf9-3-14-0 {
+    animation: none;
+  }
 }

package/esm/navigation/menu/MobileMenu.sty.js

@@ -1,12 +1,12 @@
 import "./MobileMenu.css";
-var backButton = "_1y10jf2-3-13-3";
-var body = "_1y10jf7-3-13-3";
-var bodyAnimatedBack = "_1y10jf9-3-13-3";
-var bodyAnimatedForward = "_1y10jf8-3-13-3";
-var header = "_1y10jf1-3-13-3";
-var headerTitleText = "_1y10jf4-3-13-3";
-var headerTitleWrapper = "_1y10jf3-3-13-3";
-var panel = "_1y10jf0-3-13-3";
+var backButton = "_1y10jf2-3-14-0";
+var body = "_1y10jf7-3-14-0";
+var bodyAnimatedBack = "_1y10jf9-3-14-0";
+var bodyAnimatedForward = "_1y10jf8-3-14-0";
+var header = "_1y10jf1-3-14-0";
+var headerTitleText = "_1y10jf4-3-14-0";
+var headerTitleWrapper = "_1y10jf3-3-14-0";
+var panel = "_1y10jf0-3-14-0";
 export {
   backButton,
   body,

package/esm/navigation/menu/MobileMenu.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/navigation/menu/MobileMenu.css.ts"],
-  "sourcesContent": ["import './MobileMenu.css';\nexport var backButton = '_1y10jf2-3-13-3';\nexport var body = '_1y10jf7-3-13-3';\nexport var bodyAnimatedBack = '_1y10jf9-3-13-3';\nexport var bodyAnimatedForward = '_1y10jf8-3-13-3';\nexport var header = '_1y10jf1-3-13-3';\nexport var headerTitleText = '_1y10jf4-3-13-3';\nexport var headerTitleWrapper = '_1y10jf3-3-13-3';\nexport var panel = '_1y10jf0-3-13-3';"],
+  "sourcesContent": ["import './MobileMenu.css';\nexport var backButton = '_1y10jf2-3-14-0';\nexport var body = '_1y10jf7-3-14-0';\nexport var bodyAnimatedBack = '_1y10jf9-3-14-0';\nexport var bodyAnimatedForward = '_1y10jf8-3-14-0';\nexport var header = '_1y10jf1-3-14-0';\nexport var headerTitleText = '_1y10jf4-3-14-0';\nexport var headerTitleWrapper = '_1y10jf3-3-14-0';\nexport var panel = '_1y10jf0-3-14-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,aAAa;AACjB,IAAI,OAAO;AACX,IAAI,mBAAmB;AACvB,IAAI,sBAAsB;AAC1B,IAAI,SAAS;AACb,IAAI,kBAAkB;AACtB,IAAI,qBAAqB;AACzB,IAAI,QAAQ;",
   "names": []
 }

package/esm/navigation/menu/Prefix.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/navigation/menu/Prefix.tsx"],
-  "sourcesContent": ["import { forwardRef } from 'react';\n\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\n\n//#region Typings\n/**\n * Accepted properties for the Menu Prefix.\n * @public\n */\nexport interface MenuPrefixProps\n  extends WithChildren,\n    AriaLabelingProps,\n    StylingProps,\n    DataTestId,\n    BehaviorTrackingProps {}\n//#endregion\n\n/**\n * The `Menu.Prefix` component allows you to specify any content that should\n * be prefixed in the menu item. The `Menu.Prefix` component is only valid\n * within the `Menu.Item`, `Menu.Link`, `Menu.SubTrigger`, and `Menu.Intent` elements.\n * @example\n * ```tsx\n * <Menu.Item onSelect={() => {}}>\n *   <Menu.Prefix>\n *     <WhatsNewIcon />\n *   </Menu.Prefix>\n *   Label\n * </Menu.Item>\n * ```\n * @public\n */\nexport const Prefix = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  MenuPrefixProps\n>(\n  (\n    {\n      children,\n      className,\n      style,\n      'data-testid': dataTestId,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      'aria-describedby': ariaDescribedBy,\n      'aria-details': ariaDetails,\n      ...remainingProps\n    },\n    forwardedRef,\n  ) => {\n    const [behavioralTrackingProps] =\n      useBehavioralTrackingProps(remainingProps);\n\n    return (\n      <Flex\n        ref={forwardedRef}\n        className={className}\n        style={style}\n        data-testid={dataTestId}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-describedby={ariaDescribedBy}\n        aria-details={ariaDetails}\n        {...behavioralTrackingProps}\n      >\n        {children}\n      </Flex>\n    );\n  },\n);\n\n(Prefix as typeof Prefix & { displayName: string }).displayName = 'Menu.Prefix';\n"],
-  "mappings": "AA4DM;AA5DN,SAAS,kBAAkB;AAE3B,SAAS,kCAAkC;AAM3C,SAAS,YAAY;AA8Bd,MAAM,SAAyB;AAAA,EAIpC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,gBAAgB;AAAA,IAChB,GAAG;AAAA,EACL,GACA,iBACG;AACH,UAAM,CAAC,uBAAuB,IAC5B,2BAA2B,cAAc;AAE3C,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA;AAAA,QACA,eAAa;AAAA,QACb,cAAY;AAAA,QACZ,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB,gBAAc;AAAA,QACb,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEC,OAAmD,cAAc;",
+  "sourcesContent": ["import { forwardRef } from 'react';\n\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\n\n//#region Typings\n/**\n * Accepted properties for the Menu Prefix.\n * @public\n */\nexport interface MenuPrefixProps\n  extends\n    WithChildren,\n    AriaLabelingProps,\n    StylingProps,\n    DataTestId,\n    BehaviorTrackingProps {}\n//#endregion\n\n/**\n * The `Menu.Prefix` component allows you to specify any content that should\n * be prefixed in the menu item. The `Menu.Prefix` component is only valid\n * within the `Menu.Item`, `Menu.Link`, `Menu.SubTrigger`, and `Menu.Intent` elements.\n * @example\n * ```tsx\n * <Menu.Item onSelect={() => {}}>\n *   <Menu.Prefix>\n *     <WhatsNewIcon />\n *   </Menu.Prefix>\n *   Label\n * </Menu.Item>\n * ```\n * @public\n */\nexport const Prefix = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  MenuPrefixProps\n>(\n  (\n    {\n      children,\n      className,\n      style,\n      'data-testid': dataTestId,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      'aria-describedby': ariaDescribedBy,\n      'aria-details': ariaDetails,\n      ...remainingProps\n    },\n    forwardedRef,\n  ) => {\n    const [behavioralTrackingProps] =\n      useBehavioralTrackingProps(remainingProps);\n\n    return (\n      <Flex\n        ref={forwardedRef}\n        className={className}\n        style={style}\n        data-testid={dataTestId}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-describedby={ariaDescribedBy}\n        aria-details={ariaDetails}\n        {...behavioralTrackingProps}\n      >\n        {children}\n      </Flex>\n    );\n  },\n);\n\n(Prefix as typeof Prefix & { displayName: string }).displayName = 'Menu.Prefix';\n"],
+  "mappings": "AA6DM;AA7DN,SAAS,kBAAkB;AAE3B,SAAS,kCAAkC;AAM3C,SAAS,YAAY;AA+Bd,MAAM,SAAyB;AAAA,EAIpC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,gBAAgB;AAAA,IAChB,GAAG;AAAA,EACL,GACA,iBACG;AACH,UAAM,CAAC,uBAAuB,IAC5B,2BAA2B,cAAc;AAE3C,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA;AAAA,QACA,eAAa;AAAA,QACb,cAAY;AAAA,QACZ,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB,gBAAc;AAAA,QACb,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEC,OAAmD,cAAc;",
   "names": []
 }

package/esm/navigation/menu/SubContent.js

@@ -5,8 +5,10 @@ import {
 } from "@radix-ui/react-dropdown-menu";
 import {
   forwardRef,
-  useCallback
+  useCallback,
+  useContext
 } from "react";
+import { MenuPortalOwnerContext } from "./contexts/MenuPortalOwnerContext.js";
 import * as styles from "./Menu.sty.js";
 import { useOverlayStacking } from "../../core/hooks/useOverlayStacking.js";
 const SUB_CONTENT_SIDE_OFFSET = 0;
@@ -22,6 +24,7 @@ const SubContent = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
     [_onTabKeyPressed]
   );
   const { style } = useOverlayStacking(void 0, "overlay");
+  const ownerId = useContext(MenuPortalOwnerContext);
   return /* @__PURE__ */ jsx(RadixPortal, { children: /* @__PURE__ */ jsx(
     RadixSubContent,
     {
@@ -29,9 +32,10 @@ const SubContent = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
       sideOffset: SUB_CONTENT_SIDE_OFFSET,
       alignOffset: ALIGN_OFFSET,
       onKeyUp: tabKeyHandler,
-      className: styles.content,
+      className: `${styles.content} ${styles.groupContainer}`,
       style: { zIndex: style.zIndex },
       collisionPadding: 2,
+      ...ownerId ? { "data-tooltip-menu-id": ownerId } : {},
       children
     }
   ) });

package/esm/navigation/menu/SubContent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/navigation/menu/SubContent.tsx"],
-  "sourcesContent": ["import {\n  SubContent as RadixSubContent,\n  Portal as RadixPortal,\n} from '@radix-ui/react-dropdown-menu';\nimport {\n  forwardRef,\n  useCallback,\n  type KeyboardEvent as ReactKeyboardEvent,\n} from 'react';\n\nimport * as styles from './Menu.sty.js';\nimport { useOverlayStacking } from '../../core/hooks/useOverlayStacking.js';\nimport { WithChildren } from '../../core/types/with-children.js';\n\n/**\n * @public\n */\nexport type MenuSubContentProps = WithChildren;\n\nconst SUB_CONTENT_SIDE_OFFSET = 0; // NOTE: This effectively results in an offset of -4px due to the default behavior of radix-ui sub-menus\n\n/**\n * @internal\n */\nexport const ALIGN_OFFSET = -4;\n\n/**\n * The component that pops out when the dropdown menu is open.\n * @public\n */\nexport const SubContent = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  MenuSubContentProps\n>((props, forwardedRef) => {\n  const { _onTabKeyPressed, children } = props as MenuSubContentProps & {\n    _onTabKeyPressed: () => void;\n  };\n  const tabKeyHandler = useCallback(\n    (e: ReactKeyboardEvent) => {\n      if (_onTabKeyPressed && e.key === 'Tab') {\n        _onTabKeyPressed();\n      }\n    },\n    [_onTabKeyPressed],\n  );\n  const { style } = useOverlayStacking(undefined, 'overlay');\n\n  return (\n    <RadixPortal>\n      <RadixSubContent\n        ref={forwardedRef}\n        sideOffset={SUB_CONTENT_SIDE_OFFSET}\n        alignOffset={ALIGN_OFFSET}\n        onKeyUp={tabKeyHandler}\n        className={styles.content}\n        style={{ zIndex: style.zIndex }}\n        collisionPadding={2}\n      >\n        {children}\n      </RadixSubContent>\n    </RadixPortal>\n  );\n});\n\n(SubContent as typeof SubContent & { displayName: string }).displayName =\n  'Menu.SubContent';\n"],
-  "mappings": "AAiDM;AAjDN;AAAA,EACE,cAAc;AAAA,EACd,UAAU;AAAA,OACL;AACP;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AAEP,YAAY,YAAY;AACxB,SAAS,0BAA0B;AAQnC,MAAM,0BAA0B;AAKzB,MAAM,eAAe;AAMrB,MAAM,aAA6B,2BAGxC,CAAC,OAAO,iBAAiB;AACzB,QAAM,EAAE,kBAAkB,SAAS,IAAI;AAGvC,QAAM,gBAAgB;AAAA,IACpB,CAAC,MAA0B;AACzB,UAAI,oBAAoB,EAAE,QAAQ,OAAO;AACvC,yBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,gBAAgB;AAAA,EACnB;AACA,QAAM,EAAE,MAAM,IAAI,mBAAmB,QAAW,SAAS;AAEzD,SACE,oBAAC,eACC;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,SAAS;AAAA,MACT,WAAW,OAAO;AAAA,MAClB,OAAO,EAAE,QAAQ,MAAM,OAAO;AAAA,MAC9B,kBAAkB;AAAA,MAEjB;AAAA;AAAA,EACH,GACF;AAEJ,CAAC;AAEA,WAA2D,cAC1D;",
+  "sourcesContent": ["import {\n  SubContent as RadixSubContent,\n  Portal as RadixPortal,\n} from '@radix-ui/react-dropdown-menu';\nimport {\n  forwardRef,\n  useCallback,\n  useContext,\n  type KeyboardEvent as ReactKeyboardEvent,\n} from 'react';\n\nimport { MenuPortalOwnerContext } from './contexts/MenuPortalOwnerContext.js';\nimport * as styles from './Menu.sty.js';\nimport { useOverlayStacking } from '../../core/hooks/useOverlayStacking.js';\nimport { WithChildren } from '../../core/types/with-children.js';\n\n/**\n * @public\n */\nexport type MenuSubContentProps = WithChildren;\n\nconst SUB_CONTENT_SIDE_OFFSET = 0; // NOTE: This effectively results in an offset of -4px due to the default behavior of radix-ui sub-menus\n\n/**\n * @internal\n */\nexport const ALIGN_OFFSET = -4;\n\n/**\n * The component that pops out when the dropdown menu is open.\n * @public\n */\nexport const SubContent = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  MenuSubContentProps\n>((props, forwardedRef) => {\n  const { _onTabKeyPressed, children } = props as MenuSubContentProps & {\n    _onTabKeyPressed: () => void;\n  };\n  const tabKeyHandler = useCallback(\n    (e: ReactKeyboardEvent) => {\n      if (_onTabKeyPressed && e.key === 'Tab') {\n        _onTabKeyPressed();\n      }\n    },\n    [_onTabKeyPressed],\n  );\n  const { style } = useOverlayStacking(undefined, 'overlay');\n  const ownerId = useContext(MenuPortalOwnerContext);\n\n  return (\n    <RadixPortal>\n      <RadixSubContent\n        ref={forwardedRef}\n        sideOffset={SUB_CONTENT_SIDE_OFFSET}\n        alignOffset={ALIGN_OFFSET}\n        onKeyUp={tabKeyHandler}\n        className={`${styles.content} ${styles.groupContainer}`}\n        style={{ zIndex: style.zIndex }}\n        collisionPadding={2}\n        {...(ownerId ? { 'data-tooltip-menu-id': ownerId } : {})}\n      >\n        {children}\n      </RadixSubContent>\n    </RadixPortal>\n  );\n});\n\n(SubContent as typeof SubContent & { displayName: string }).displayName =\n  'Menu.SubContent';\n"],
+  "mappings": "AAoDM;AApDN;AAAA,EACE,cAAc;AAAA,EACd,UAAU;AAAA,OACL;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAEP,SAAS,8BAA8B;AACvC,YAAY,YAAY;AACxB,SAAS,0BAA0B;AAQnC,MAAM,0BAA0B;AAKzB,MAAM,eAAe;AAMrB,MAAM,aAA6B,2BAGxC,CAAC,OAAO,iBAAiB;AACzB,QAAM,EAAE,kBAAkB,SAAS,IAAI;AAGvC,QAAM,gBAAgB;AAAA,IACpB,CAAC,MAA0B;AACzB,UAAI,oBAAoB,EAAE,QAAQ,OAAO;AACvC,yBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,gBAAgB;AAAA,EACnB;AACA,QAAM,EAAE,MAAM,IAAI,mBAAmB,QAAW,SAAS;AACzD,QAAM,UAAU,WAAW,sBAAsB;AAEjD,SACE,oBAAC,eACC;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,SAAS;AAAA,MACT,WAAW,GAAG,OAAO,OAAO,IAAI,OAAO,cAAc;AAAA,MACrD,OAAO,EAAE,QAAQ,MAAM,OAAO;AAAA,MAC9B,kBAAkB;AAAA,MACjB,GAAI,UAAU,EAAE,wBAAwB,QAAQ,IAAI,CAAC;AAAA,MAErD;AAAA;AAAA,EACH,GACF;AAEJ,CAAC;AAEA,WAA2D,cAC1D;",
   "names": []
 }

package/esm/navigation/menu/Suffix.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/navigation/menu/Suffix.tsx"],
-  "sourcesContent": ["import { forwardRef } from 'react';\n\nimport { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\n\n//#region Typings\n\n/**\n * Accepted properties for the Menu Suffix.\n * @public\n */\nexport interface MenuSuffixProps\n  extends WithChildren,\n    AriaLabelingProps,\n    StylingProps,\n    DataTestId {}\n//#endregion\n\n/**\n * The `Menu.Suffix` component allows you to specify any content that should\n * be suffixed in the menu item. The `Menu.Suffix` component is only valid\n * within the `Menu.Item`, and `Menu.Link` elements.\n * @example\n * ```tsx\n * <Menu.Item onSelect={() => {}}>\n *   Label\n *   <Menu.Suffix>\n *     <WhatsNewIcon />\n *   </Menu.Suffix>\n * </Menu.Item>\n * ```\n * @public\n */\nexport const Suffix = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  MenuSuffixProps\n>(\n  (\n    {\n      children,\n      className,\n      style,\n      'data-testid': dataTestId,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      'aria-describedby': ariaDescribedBy,\n      'aria-details': ariaDetails,\n    },\n    forwardedRef,\n  ) => {\n    return (\n      <Flex\n        ref={forwardedRef}\n        className={className}\n        style={style}\n        data-testid={dataTestId}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-describedby={ariaDescribedBy}\n        aria-details={ariaDetails}\n      >\n        {children}\n      </Flex>\n    );\n  },\n);\n\n(Suffix as typeof Suffix & { displayName: string }).displayName = 'Menu.Suffix';\n"],
-  "mappings": "AAsDM;AAtDN,SAAS,kBAAkB;AAM3B,SAAS,YAAY;AA8Bd,MAAM,SAAyB;AAAA,EAIpC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,gBAAgB;AAAA,EAClB,GACA,iBACG;AACH,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA;AAAA,QACA,eAAa;AAAA,QACb,cAAY;AAAA,QACZ,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB,gBAAc;AAAA,QAEb;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEC,OAAmD,cAAc;",
+  "sourcesContent": ["import { forwardRef } from 'react';\n\nimport { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\n\n//#region Typings\n\n/**\n * Accepted properties for the Menu Suffix.\n * @public\n */\nexport interface MenuSuffixProps\n  extends WithChildren, AriaLabelingProps, StylingProps, DataTestId {}\n//#endregion\n\n/**\n * The `Menu.Suffix` component allows you to specify any content that should\n * be suffixed in the menu item. The `Menu.Suffix` component is only valid\n * within the `Menu.Item`, and `Menu.Link` elements.\n * @example\n * ```tsx\n * <Menu.Item onSelect={() => {}}>\n *   Label\n *   <Menu.Suffix>\n *     <WhatsNewIcon />\n *   </Menu.Suffix>\n * </Menu.Item>\n * ```\n * @public\n */\nexport const Suffix = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  MenuSuffixProps\n>(\n  (\n    {\n      children,\n      className,\n      style,\n      'data-testid': dataTestId,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      'aria-describedby': ariaDescribedBy,\n      'aria-details': ariaDetails,\n    },\n    forwardedRef,\n  ) => {\n    return (\n      <Flex\n        ref={forwardedRef}\n        className={className}\n        style={style}\n        data-testid={dataTestId}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-describedby={ariaDescribedBy}\n        aria-details={ariaDetails}\n      >\n        {children}\n      </Flex>\n    );\n  },\n);\n\n(Suffix as typeof Suffix & { displayName: string }).displayName = 'Menu.Suffix';\n"],
+  "mappings": "AAmDM;AAnDN,SAAS,kBAAkB;AAM3B,SAAS,YAAY;AA2Bd,MAAM,SAAyB;AAAA,EAIpC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,gBAAgB;AAAA,EAClB,GACA,iBACG;AACH,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA;AAAA,QACA,eAAa;AAAA,QACb,cAAY;AAAA,QACZ,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB,gBAAc;AAAA,QAEb;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEC,OAAmD,cAAc;",
   "names": []
 }

package/esm/navigation/menu/Trigger.js

@@ -44,6 +44,8 @@ const Trigger = /* @__PURE__ */ forwardRef(
         "aria-describedby": ariaDescribedBy,
         "aria-details": ariaDetails,
         "aria-controls": isOpen ? contentId : void 0,
+        "aria-expanded": isOpen,
+        "aria-haspopup": "menu",
         "data-testid": "menu-trigger",
         asChild: true,
         "data-dt-component": dataDtComponent,

package/esm/navigation/menu/Trigger.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/navigation/menu/Trigger.tsx"],
-  "sourcesContent": ["import { Trigger as RadixTrigger } from '@radix-ui/react-dropdown-menu';\nimport {\n  forwardRef,\n  type ReactElement,\n  type ReactNode,\n  useEffect,\n  useState,\n} from 'react';\n\nimport { COMPONENT_NAME } from './constants.js';\nimport { useMenuContext } from './hooks/useMenuContext.js';\nimport { useIsInViewport } from '../../core/hooks/useIsInViewport.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { isSlot } from '../../core/utils/is-slot.js';\n\n/**\n * @public\n */\nexport interface MenuTriggerProps extends WithChildren, AriaLabelingProps {}\n\n/**\n * Allows to check if a ReactNode is a MenuTrigger element.\n * @internal\n * */\nexport function isTrigger(\n  node: ReactNode,\n): node is ReactElement<MenuTriggerProps> {\n  return isSlot(node, Trigger);\n}\n\n/**\n * The button that toggles the dropdown menu.\n * By default, the Content will position itself against the trigger.\n * @public\n */\nexport const Trigger = /* @__PURE__ */ forwardRef<\n  HTMLButtonElement,\n  MenuTriggerProps\n>(\n  (\n    {\n      children,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      'aria-describedby': ariaDescribedBy,\n      'aria-details': ariaDetails,\n      // @ts-expect-error - We want to allow overriding data-dt-component as we use the component internally in other Strato components, but it should not appear in the public API.\n      'data-dt-component': dataDtComponent = COMPONENT_NAME,\n      ...remainingProps\n    },\n    forwardedRef,\n  ) => {\n    /** If the menu trigger is not visible in the viewport, close the menu to avoid issues with overlay drawing loop */\n    const [containerRef, isVisible] = useIsInViewport<HTMLButtonElement>();\n    const rootRef = useMergeRefs([forwardedRef, containerRef]);\n\n    const { isOpen, setIsOpen, isDefaultOpen, contentId } = useMenuContext();\n    // Flag to indicate if the menu was forcibly closed once already or not.\n    // This would allow the menu to be closed only once if defaultOpen was true and\n    // the Menu trigger wasn't visible to avoid page crashes due to infinite calls to window.render.\n    // And to also avoid closing the menu repeatedly due to issues with virtualization.\n    const [isForciblyClosed, setIsForciblyClosed] = useState(false);\n\n    useEffect(() => {\n      if (!isVisible && isDefaultOpen && isOpen && !isForciblyClosed) {\n        setIsOpen(false);\n        setIsForciblyClosed(true);\n      }\n    }, [isVisible, isOpen, setIsOpen, isForciblyClosed, isDefaultOpen]);\n\n    return (\n      <RadixTrigger\n        {...remainingProps}\n        ref={rootRef}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-describedby={ariaDescribedBy}\n        aria-details={ariaDetails}\n        aria-controls={isOpen ? contentId : undefined}\n        data-testid=\"menu-trigger\"\n        asChild\n        data-dt-component={dataDtComponent}\n      >\n        {children}\n      </RadixTrigger>\n    );\n  },\n);\n\n(Trigger as typeof Trigger & { displayName: string }).displayName =\n  'Menu.Trigger';\n"],
-  "mappings": "AAyEM;AAzEN,SAAS,WAAW,oBAAoB;AACxC;AAAA,EACE;AAAA,EAGA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAG7B,SAAS,cAAc;AAWhB,SAAS,UACd,MACwC;AACxC,SAAO,OAAO,MAAM,OAAO;AAC7B;AAOO,MAAM,UAA0B;AAAA,EAIrC,CACE;AAAA,IACE;AAAA,IACA,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,gBAAgB;AAAA;AAAA,IAEhB,qBAAqB,kBAAkB;AAAA,IACvC,GAAG;AAAA,EACL,GACA,iBACG;AAEH,UAAM,CAAC,cAAc,SAAS,IAAI,gBAAmC;AACrE,UAAM,UAAU,aAAa,CAAC,cAAc,YAAY,CAAC;AAEzD,UAAM,EAAE,QAAQ,WAAW,eAAe,UAAU,IAAI,eAAe;AAKvE,UAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAS,KAAK;AAE9D,cAAU,MAAM;AACd,UAAI,CAAC,aAAa,iBAAiB,UAAU,CAAC,kBAAkB;AAC9D,kBAAU,KAAK;AACf,4BAAoB,IAAI;AAAA,MAC1B;AAAA,IACF,GAAG,CAAC,WAAW,QAAQ,WAAW,kBAAkB,aAAa,CAAC;AAElE,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,cAAY;AAAA,QACZ,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB,gBAAc;AAAA,QACd,iBAAe,SAAS,YAAY;AAAA,QACpC,eAAY;AAAA,QACZ,SAAO;AAAA,QACP,qBAAmB;AAAA,QAElB;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEC,QAAqD,cACpD;",
+  "sourcesContent": ["import { Trigger as RadixTrigger } from '@radix-ui/react-dropdown-menu';\nimport {\n  forwardRef,\n  type ReactElement,\n  type ReactNode,\n  useEffect,\n  useState,\n} from 'react';\n\nimport { COMPONENT_NAME } from './constants.js';\nimport { useMenuContext } from './hooks/useMenuContext.js';\nimport { useIsInViewport } from '../../core/hooks/useIsInViewport.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { isSlot } from '../../core/utils/is-slot.js';\n\n/**\n * @public\n */\nexport interface MenuTriggerProps extends WithChildren, AriaLabelingProps {}\n\n/**\n * Allows to check if a ReactNode is a MenuTrigger element.\n * @internal\n * */\nexport function isTrigger(\n  node: ReactNode,\n): node is ReactElement<MenuTriggerProps> {\n  return isSlot(node, Trigger);\n}\n\n/**\n * The button that toggles the dropdown menu.\n * By default, the Content will position itself against the trigger.\n * @public\n */\nexport const Trigger = /* @__PURE__ */ forwardRef<\n  HTMLButtonElement,\n  MenuTriggerProps\n>(\n  (\n    {\n      children,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      'aria-describedby': ariaDescribedBy,\n      'aria-details': ariaDetails,\n      // @ts-expect-error - We want to allow overriding data-dt-component as we use the component internally in other Strato components, but it should not appear in the public API.\n      'data-dt-component': dataDtComponent = COMPONENT_NAME,\n      ...remainingProps\n    },\n    forwardedRef,\n  ) => {\n    /** If the menu trigger is not visible in the viewport, close the menu to avoid issues with overlay drawing loop */\n    const [containerRef, isVisible] = useIsInViewport<HTMLButtonElement>();\n    const rootRef = useMergeRefs([forwardedRef, containerRef]);\n\n    const { isOpen, setIsOpen, isDefaultOpen, contentId } = useMenuContext();\n    // Flag to indicate if the menu was forcibly closed once already or not.\n    // This would allow the menu to be closed only once if defaultOpen was true and\n    // the Menu trigger wasn't visible to avoid page crashes due to infinite calls to window.render.\n    // And to also avoid closing the menu repeatedly due to issues with virtualization.\n    const [isForciblyClosed, setIsForciblyClosed] = useState(false);\n\n    useEffect(() => {\n      if (!isVisible && isDefaultOpen && isOpen && !isForciblyClosed) {\n        setIsOpen(false);\n        setIsForciblyClosed(true);\n      }\n    }, [isVisible, isOpen, setIsOpen, isForciblyClosed, isDefaultOpen]);\n\n    return (\n      <RadixTrigger\n        {...remainingProps}\n        ref={rootRef}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-describedby={ariaDescribedBy}\n        aria-details={ariaDetails}\n        aria-controls={isOpen ? contentId : undefined}\n        aria-expanded={isOpen}\n        aria-haspopup=\"menu\"\n        data-testid=\"menu-trigger\"\n        asChild\n        data-dt-component={dataDtComponent}\n      >\n        {children}\n      </RadixTrigger>\n    );\n  },\n);\n\n(Trigger as typeof Trigger & { displayName: string }).displayName =\n  'Menu.Trigger';\n"],
+  "mappings": "AAyEM;AAzEN,SAAS,WAAW,oBAAoB;AACxC;AAAA,EACE;AAAA,EAGA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAG7B,SAAS,cAAc;AAWhB,SAAS,UACd,MACwC;AACxC,SAAO,OAAO,MAAM,OAAO;AAC7B;AAOO,MAAM,UAA0B;AAAA,EAIrC,CACE;AAAA,IACE;AAAA,IACA,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,gBAAgB;AAAA;AAAA,IAEhB,qBAAqB,kBAAkB;AAAA,IACvC,GAAG;AAAA,EACL,GACA,iBACG;AAEH,UAAM,CAAC,cAAc,SAAS,IAAI,gBAAmC;AACrE,UAAM,UAAU,aAAa,CAAC,cAAc,YAAY,CAAC;AAEzD,UAAM,EAAE,QAAQ,WAAW,eAAe,UAAU,IAAI,eAAe;AAKvE,UAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAS,KAAK;AAE9D,cAAU,MAAM;AACd,UAAI,CAAC,aAAa,iBAAiB,UAAU,CAAC,kBAAkB;AAC9D,kBAAU,KAAK;AACf,4BAAoB,IAAI;AAAA,MAC1B;AAAA,IACF,GAAG,CAAC,WAAW,QAAQ,WAAW,kBAAkB,aAAa,CAAC;AAElE,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,cAAY;AAAA,QACZ,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB,gBAAc;AAAA,QACd,iBAAe,SAAS,YAAY;AAAA,QACpC,iBAAe;AAAA,QACf,iBAAc;AAAA,QACd,eAAY;AAAA,QACZ,SAAO;AAAA,QACP,qBAAmB;AAAA,QAElB;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEC,QAAqD,cACpD;",
   "names": []
 }

package/esm/navigation/menu/contexts/MenuPortalOwnerContext.js

@@ -0,0 +1,8 @@
+import { createContext } from "react";
+const MenuPortalOwnerContext = createContext(
+  void 0
+);
+export {
+  MenuPortalOwnerContext
+};
+//# sourceMappingURL=MenuPortalOwnerContext.js.map

package/esm/navigation/menu/contexts/MenuPortalOwnerContext.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/navigation/menu/contexts/MenuPortalOwnerContext.ts"],
+  "sourcesContent": ["import { createContext } from 'react';\n\n/** @internal */\nexport const MenuPortalOwnerContext = createContext<string | undefined>(\n  undefined,\n);\n"],
+  "mappings": "AAAA,SAAS,qBAAqB;AAGvB,MAAM,yBAAyB;AAAA,EACpC;AACF;",
+  "names": []
+}

package/esm/navigation/tabs/RenderTab.css

@@ -1,4 +1,4 @@
-._39c1kf0-3-13-3 {
+._39c1kf0-3-14-0 {
   border-radius: var(--dt-borders-radius-field-default, 6px);
   background-color: inherit;
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
@@ -11,7 +11,7 @@
   padding-right: var(--dt-spacings-size-12, 12px);
   scroll-margin: var(--dt-spacings-size-64, 64px);
 }
-._39c1kf0-3-13-3::after {
+._39c1kf0-3-14-0::after {
   content: " ";
   border-bottom-width: var(--dt-borders-width-emphasized, 2px);
   border-bottom-style: var(--dt-borders-style-default, solid);
@@ -23,46 +23,46 @@
   padding-top: var(--dt-spacings-size-4, 4px);
   z-index: 1;
 }
-._39c1kf1-3-13-3 {
+._39c1kf1-3-14-0 {
   pointer-events: none;
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._39c1kf2-3-13-3 {
+._39c1kf2-3-14-0 {
   cursor: pointer;
 }
-._39c1kf2-3-13-3:hover {
+._39c1kf2-3-14-0:hover {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._39c1kf2-3-13-3:active {
+._39c1kf2-3-14-0:active {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   background-color: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
 }
-._39c1kf5-3-13-3 {
+._39c1kf5-3-14-0 {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._39c1kf5-3-13-3:hover {
+._39c1kf5-3-14-0:hover {
   color: var(--dt-colors-text-primary-default, #464cce);
   background-color: var(--dt-colors-background-field-primary-default-hover, #d5dbf6);
 }
-._39c1kf5-3-13-3:active {
+._39c1kf5-3-14-0:active {
   color: var(--dt-colors-text-primary-default, #464cce);
   background-color: var(--dt-colors-background-field-primary-default-active, #c9d1f4);
 }
-._39c1kf5-3-13-3::after {
+._39c1kf5-3-14-0::after {
   border-bottom-color: var(--dt-colors-icon-primary-default, #464cce);
 }
-._39c1kf6-3-13-3 {
+._39c1kf6-3-14-0 {
   display: flex;
   flex: 1;
   flex-wrap: nowrap;
   align-items: center;
   justify-content: center;
 }
-._39c1kf7-3-13-3 {
+._39c1kf7-3-14-0 {
   cursor: not-allowed;
 }
-._39c1kf0-3-13-3 .text-content {
+._39c1kf0-3-14-0 .text-content {
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
   white-space: nowrap;
   overflow: hidden;
@@ -71,6 +71,6 @@
   justify-content: center;
   padding-left: var(--dt-spacings-size-4, 4px);
 }
-._39c1kf0-3-13-3 svg + .text-content {
+._39c1kf0-3-14-0 svg + .text-content {
   padding-left: var(--dt-spacings-size-8, 8px);
 }

package/esm/navigation/tabs/RenderTab.sty.js

@@ -1,8 +1,8 @@
 import "./RenderTab.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var disabledTabWrapperCSS = "_39c1kf7-3-13-3";
-var tabButtonCSS = _7a468({ defaultClassName: "_39c1kf0-3-13-3", variantClassNames: { disabled: { true: "_39c1kf1-3-13-3", false: "_39c1kf2-3-13-3" }, selected: { true: "_39c1kf3-3-13-3", false: "_39c1kf4-3-13-3" } }, defaultVariants: {}, compoundVariants: [[{ selected: true, disabled: false }, "_39c1kf5-3-13-3"]] });
-var tabContentWrapperCSS = "_39c1kf6-3-13-3";
+var disabledTabWrapperCSS = "_39c1kf7-3-14-0";
+var tabButtonCSS = _7a468({ defaultClassName: "_39c1kf0-3-14-0", variantClassNames: { disabled: { true: "_39c1kf1-3-14-0", false: "_39c1kf2-3-14-0" }, selected: { true: "_39c1kf3-3-14-0", false: "_39c1kf4-3-14-0" } }, defaultVariants: {}, compoundVariants: [[{ selected: true, disabled: false }, "_39c1kf5-3-14-0"]] });
+var tabContentWrapperCSS = "_39c1kf6-3-14-0";
 export {
   disabledTabWrapperCSS,
   tabButtonCSS,

package/esm/navigation/tabs/RenderTab.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/navigation/tabs/RenderTab.css.ts"],
-  "sourcesContent": ["import './RenderTab.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var disabledTabWrapperCSS = '_39c1kf7-3-13-3';\nexport var tabButtonCSS = _7a468({defaultClassName:'_39c1kf0-3-13-3',variantClassNames:{disabled:{true:'_39c1kf1-3-13-3',false:'_39c1kf2-3-13-3'},selected:{true:'_39c1kf3-3-13-3',false:'_39c1kf4-3-13-3'}},defaultVariants:{},compoundVariants:[[{selected:true,disabled:false},'_39c1kf5-3-13-3']]});\nexport var tabContentWrapperCSS = '_39c1kf6-3-13-3';"],
+  "sourcesContent": ["import './RenderTab.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var disabledTabWrapperCSS = '_39c1kf7-3-14-0';\nexport var tabButtonCSS = _7a468({defaultClassName:'_39c1kf0-3-14-0',variantClassNames:{disabled:{true:'_39c1kf1-3-14-0',false:'_39c1kf2-3-14-0'},selected:{true:'_39c1kf3-3-14-0',false:'_39c1kf4-3-14-0'}},defaultVariants:{},compoundVariants:[[{selected:true,disabled:false},'_39c1kf5-3-14-0']]});\nexport var tabContentWrapperCSS = '_39c1kf6-3-14-0';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,wBAAwB;AAC5B,IAAI,eAAe,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,UAAS,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,GAAE,UAAS,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,UAAS,MAAK,UAAS,MAAK,GAAE,iBAAiB,CAAC,EAAC,CAAC;AAC/R,IAAI,uBAAuB;",
   "names": []
 }

package/esm/navigation/tabs/Tab.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/navigation/tabs/Tab.tsx"],
-  "sourcesContent": ["import { type ReactNode } from 'react';\n\nimport { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { DOMProps } from '../../core/types/dom.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\n\n// #region Typings\n/**\n * @public\n */\nexport interface TabProps\n  extends StylingProps,\n    DataTestId,\n    AriaLabelingProps,\n    DOMProps {\n  /** Rendered contents of the option. */\n  children: ReactNode;\n  /**\n   * Whether the tab should be disabled.\n   * If true, the tab cannot be clicked and its tab panel does not render any content.\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /** The text shown on the tab. This must be unique. */\n  title: string;\n  /** The prefix icon shown in front of the tab text. */\n  prefixIcon?: ReactNode;\n  /**\n   * Defines if the tabs content will be kept in the DOM, even if the content\n   * is not shown to the user.\n   * @defaultValue false\n   */\n  keepMounted?: boolean;\n}\n// #endregion\n\n/**\n * Component used for specifying the Tab's title and content.\n * @public\n */\nexport const Tab = (props: TabProps) => null;\n"],
-  "mappings": "AAyCO,MAAM,MAAM,CAAC,UAAoB;",
+  "sourcesContent": ["import { type ReactNode } from 'react';\n\nimport { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { DOMProps } from '../../core/types/dom.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\n\n// #region Typings\n/**\n * @public\n */\nexport interface TabProps\n  extends StylingProps, DataTestId, AriaLabelingProps, DOMProps {\n  /** Rendered contents of the option. */\n  children: ReactNode;\n  /**\n   * Whether the tab should be disabled.\n   * If true, the tab cannot be clicked and its tab panel does not render any content.\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /** The text shown on the tab. This must be unique. */\n  title: string;\n  /** The prefix icon shown in front of the tab text. */\n  prefixIcon?: ReactNode;\n  /**\n   * Defines if the tabs content will be kept in the DOM, even if the content\n   * is not shown to the user.\n   * @defaultValue false\n   */\n  keepMounted?: boolean;\n}\n// #endregion\n\n/**\n * Component used for specifying the Tab's title and content.\n * @public\n */\nexport const Tab = (props: TabProps) => null;\n"],
+  "mappings": "AAsCO,MAAM,MAAM,CAAC,UAAoB;",
   "names": []
 }

package/esm/navigation/tabs/TabPanel.css

@@ -1,12 +1,12 @@
-._b4irt10-3-13-3 {
+._b4irt10-3-14-0 {
   width: 100%;
   height: 100%;
   box-sizing: border-box;
   padding-top: var(--dt-spacings-size-16, 16px);
 }
-._b4irt11-3-13-3 {
+._b4irt11-3-14-0 {
   overflow: hidden;
 }
-._b4irt12-3-13-3 {
+._b4irt12-3-14-0 {
   overflow-y: auto;
 }

package/esm/navigation/tabs/TabPanel.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/navigation/tabs/TabPanel.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { useLayoutEffect, useRef, useState } from 'react';\n\nimport { tabPanelCSS, tabPanelOverflowBehaviorCSS } from './TabPanel.sty.js';\nimport { useFocusRing } from '../../core/hooks/useFocusRing.js';\nimport { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { DOMProps } from '../../core/types/dom.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { getFirstFocusableChild as _getFirstFocusableChild } from '../../core/utils/focus-management/get-first-focusable-child.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\ninterface TabPanelProps\n  extends WithChildren,\n    DOMProps,\n    AriaLabelingProps,\n    StylingProps,\n    DataTestId {\n  /**\n   * Whether the tab panel is disabled.\n   * If true, its content is not rendered.\n   */\n  disabled: boolean;\n  /** The overflow behavior of the tab panel. */\n  panelOverflow: 'hidden' | 'scroll-y';\n}\n\n/**\n * TabPanel component, used to display the content of a tab.\n */\nexport const TabPanel = (props: TabPanelProps) => {\n  const {\n    children,\n    disabled,\n    panelOverflow,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    ...restProps\n  } = props;\n  const ref = useRef<HTMLDivElement>(null);\n\n  const { focusProps, focusClassName } = useFocusRing({ disabled });\n  const [hasFocusableChildren, setHasFocusableChildren] =\n    useState<boolean>(false);\n\n  // Check if the tab panel has focusable children to focus on them instead of the panel per a11y rules\n  useLayoutEffect(() => {\n    if (ref.current) {\n      setHasFocusableChildren(_getFirstFocusableChild(ref.current) !== null);\n    }\n  }, [children]);\n\n  return (\n    <div\n      data-testid={dataTestId}\n      className={clsx(\n        consumerClassName,\n        focusClassName,\n        tabPanelCSS,\n        tabPanelOverflowBehaviorCSS[panelOverflow],\n      )}\n      style={consumerStyle}\n      ref={ref}\n      {..._mergeProps(focusProps, restProps)}\n      tabIndex={hasFocusableChildren ? -1 : 0}\n      role=\"tabpanel\"\n    >\n      {!disabled && children}\n    </div>\n  );\n};\nTabPanel['displayName'] = 'TabPanel';\n"],
-  "mappings": "AAsDI;AAtDJ,OAAO,UAAU;AACjB,SAAS,iBAAiB,QAAQ,gBAAgB;AAElD,SAAS,aAAa,mCAAmC;AACzD,SAAS,oBAAoB;AAM7B,SAAS,0BAA0B,+BAA+B;AAClE,SAAS,cAAc,mBAAmB;AAmBnC,MAAM,WAAW,CAAC,UAAyB;AAChD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,MAAM,OAAuB,IAAI;AAEvC,QAAM,EAAE,YAAY,eAAe,IAAI,aAAa,EAAE,SAAS,CAAC;AAChE,QAAM,CAAC,sBAAsB,uBAAuB,IAClD,SAAkB,KAAK;AAGzB,kBAAgB,MAAM;AACpB,QAAI,IAAI,SAAS;AACf,8BAAwB,wBAAwB,IAAI,OAAO,MAAM,IAAI;AAAA,IACvE;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa;AAAA,MACb,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA,4BAA4B,aAAa;AAAA,MAC3C;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACC,GAAG,YAAY,YAAY,SAAS;AAAA,MACrC,UAAU,uBAAuB,KAAK;AAAA,MACtC,MAAK;AAAA,MAEJ,WAAC,YAAY;AAAA;AAAA,EAChB;AAEJ;AACA,SAAS,aAAa,IAAI;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { useLayoutEffect, useRef, useState } from 'react';\n\nimport { tabPanelCSS, tabPanelOverflowBehaviorCSS } from './TabPanel.sty.js';\nimport { useFocusRing } from '../../core/hooks/useFocusRing.js';\nimport { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { DOMProps } from '../../core/types/dom.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { getFirstFocusableChild as _getFirstFocusableChild } from '../../core/utils/focus-management/get-first-focusable-child.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\ninterface TabPanelProps\n  extends WithChildren, DOMProps, AriaLabelingProps, StylingProps, DataTestId {\n  /**\n   * Whether the tab panel is disabled.\n   * If true, its content is not rendered.\n   */\n  disabled: boolean;\n  /** The overflow behavior of the tab panel. */\n  panelOverflow: 'hidden' | 'scroll-y';\n}\n\n/**\n * TabPanel component, used to display the content of a tab.\n */\nexport const TabPanel = (props: TabPanelProps) => {\n  const {\n    children,\n    disabled,\n    panelOverflow,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    ...restProps\n  } = props;\n  const ref = useRef<HTMLDivElement>(null);\n\n  const { focusProps, focusClassName } = useFocusRing({ disabled });\n  const [hasFocusableChildren, setHasFocusableChildren] =\n    useState<boolean>(false);\n\n  // Check if the tab panel has focusable children to focus on them instead of the panel per a11y rules\n  useLayoutEffect(() => {\n    if (ref.current) {\n      setHasFocusableChildren(_getFirstFocusableChild(ref.current) !== null);\n    }\n  }, [children]);\n\n  return (\n    <div\n      data-testid={dataTestId}\n      className={clsx(\n        consumerClassName,\n        focusClassName,\n        tabPanelCSS,\n        tabPanelOverflowBehaviorCSS[panelOverflow],\n      )}\n      style={consumerStyle}\n      ref={ref}\n      {..._mergeProps(focusProps, restProps)}\n      tabIndex={hasFocusableChildren ? -1 : 0}\n      role=\"tabpanel\"\n    >\n      {!disabled && children}\n    </div>\n  );\n};\nTabPanel['displayName'] = 'TabPanel';\n"],
+  "mappings": "AAkDI;AAlDJ,OAAO,UAAU;AACjB,SAAS,iBAAiB,QAAQ,gBAAgB;AAElD,SAAS,aAAa,mCAAmC;AACzD,SAAS,oBAAoB;AAM7B,SAAS,0BAA0B,+BAA+B;AAClE,SAAS,cAAc,mBAAmB;AAenC,MAAM,WAAW,CAAC,UAAyB;AAChD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,MAAM,OAAuB,IAAI;AAEvC,QAAM,EAAE,YAAY,eAAe,IAAI,aAAa,EAAE,SAAS,CAAC;AAChE,QAAM,CAAC,sBAAsB,uBAAuB,IAClD,SAAkB,KAAK;AAGzB,kBAAgB,MAAM;AACpB,QAAI,IAAI,SAAS;AACf,8BAAwB,wBAAwB,IAAI,OAAO,MAAM,IAAI;AAAA,IACvE;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa;AAAA,MACb,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA,4BAA4B,aAAa;AAAA,MAC3C;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACC,GAAG,YAAY,YAAY,SAAS;AAAA,MACrC,UAAU,uBAAuB,KAAK;AAAA,MACtC,MAAK;AAAA,MAEJ,WAAC,YAAY;AAAA;AAAA,EAChB;AAEJ;AACA,SAAS,aAAa,IAAI;",
   "names": []
 }

package/esm/navigation/tabs/TabPanel.sty.js

@@ -1,6 +1,6 @@
 import "./TabPanel.css";
-var tabPanelCSS = "_b4irt10-3-13-3";
-var tabPanelOverflowBehaviorCSS = { hidden: "_b4irt11-3-13-3", "scroll-y": "_b4irt12-3-13-3" };
+var tabPanelCSS = "_b4irt10-3-14-0";
+var tabPanelOverflowBehaviorCSS = { hidden: "_b4irt11-3-14-0", "scroll-y": "_b4irt12-3-14-0" };
 export {
   tabPanelCSS,
   tabPanelOverflowBehaviorCSS

package/esm/navigation/tabs/TabPanel.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/navigation/tabs/TabPanel.css.ts"],
-  "sourcesContent": ["import './TabPanel.css';\nexport var tabPanelCSS = '_b4irt10-3-13-3';\nexport var tabPanelOverflowBehaviorCSS = {hidden:'_b4irt11-3-13-3','scroll-y':'_b4irt12-3-13-3'};"],
+  "sourcesContent": ["import './TabPanel.css';\nexport var tabPanelCSS = '_b4irt10-3-14-0';\nexport var tabPanelOverflowBehaviorCSS = {hidden:'_b4irt11-3-14-0','scroll-y':'_b4irt12-3-14-0'};"],
   "mappings": "AAAA,OAAO;AACA,IAAI,cAAc;AAClB,IAAI,8BAA8B,EAAC,QAAO,mBAAkB,YAAW,kBAAiB;",
   "names": []
 }

package/esm/navigation/tabs/Tabs.css

@@ -1,9 +1,9 @@
-._1tfbrxp0-3-13-3 {
+._1tfbrxp0-3-14-0 {
   display: flex;
   flex-direction: column;
   max-width: 100%;
 }
-._1tfbrxp1-3-13-3 {
+._1tfbrxp1-3-14-0 {
   display: flex;
   align-items: center;
   gap: var(--dt-spacings-size-4, 4px);
@@ -14,29 +14,29 @@
   scrollbar-width: none;
   scroll-behavior: smooth;
 }
-._1tfbrxp1-3-13-3::-webkit-scrollbar {
+._1tfbrxp1-3-14-0::-webkit-scrollbar {
   display: none;
 }
-._1tfbrxp2-3-13-3 {
+._1tfbrxp2-3-14-0 {
   -webkit-mask: linear-gradient(to right, transparent var(--dt-spacings-size-32, 32px), #fff var(--dt-spacings-size-56, 56px));
   mask: linear-gradient(to right, transparent var(--dt-spacings-size-32, 32px), #fff var(--dt-spacings-size-56, 56px));
   -webkit-mask-repeat: no-repeat;
 }
-._1tfbrxp3-3-13-3 {
+._1tfbrxp3-3-14-0 {
   -webkit-mask: linear-gradient(to right, #fff calc(100% - var(--dt-spacings-size-56, 56px)), transparent calc(100% - var(--dt-spacings-size-32, 32px)));
   mask: linear-gradient(to right, #fff calc(100% - var(--dt-spacings-size-56, 56px)), transparent calc(100% - var(--dt-spacings-size-32, 32px)));
   -webkit-mask-repeat: no-repeat;
 }
-._1tfbrxp4-3-13-3 {
+._1tfbrxp4-3-14-0 {
   -webkit-mask: linear-gradient(to right, transparent var(--dt-spacings-size-32, 32px), #fff var(--dt-spacings-size-56, 56px),#fff calc(100% - var(--dt-spacings-size-56, 56px)), transparent calc(100% - var(--dt-spacings-size-32, 32px)));
   mask: linear-gradient(to right, transparent var(--dt-spacings-size-32, 32px), #fff var(--dt-spacings-size-56, 56px),#fff calc(100% - var(--dt-spacings-size-56, 56px)), transparent calc(100% - var(--dt-spacings-size-32, 32px)));
   -webkit-mask-repeat: no-repeat;
 }
-._1tfbrxp5-3-13-3 {
+._1tfbrxp5-3-14-0 {
   position: relative;
   z-index: var(--dt-elevations-default, 1);
 }
-._1tfbrxp5-3-13-3:after {
+._1tfbrxp5-3-14-0:after {
   content: '';
   display: block;
   position: absolute;
@@ -47,7 +47,7 @@
   left: 0;
   right: 0;
 }
-._1tfbrxp6-3-13-3 {
+._1tfbrxp6-3-14-0 {
   position: absolute;
   top: 0;
   z-index: var(--dt-elevations-overlay, 20);

package/esm/navigation/tabs/Tabs.sty.js

@@ -1,9 +1,9 @@
 import "./Tabs.css";
-var tabsArrowButtonCSS = "_1tfbrxp6-3-13-3";
-var tabsArrowWrapperCSS = "_1tfbrxp5-3-13-3";
-var tabsCSS = "_1tfbrxp0-3-13-3";
-var tabsWrapperCSS = "_1tfbrxp1-3-13-3";
-var tabsWrapperOverflowCSS = { left: "_1tfbrxp2-3-13-3", right: "_1tfbrxp3-3-13-3", both: "_1tfbrxp4-3-13-3" };
+var tabsArrowButtonCSS = "_1tfbrxp6-3-14-0";
+var tabsArrowWrapperCSS = "_1tfbrxp5-3-14-0";
+var tabsCSS = "_1tfbrxp0-3-14-0";
+var tabsWrapperCSS = "_1tfbrxp1-3-14-0";
+var tabsWrapperOverflowCSS = { left: "_1tfbrxp2-3-14-0", right: "_1tfbrxp3-3-14-0", both: "_1tfbrxp4-3-14-0" };
 export {
   tabsArrowButtonCSS,
   tabsArrowWrapperCSS,

package/esm/navigation/tabs/Tabs.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/navigation/tabs/Tabs.css.ts"],
-  "sourcesContent": ["import './Tabs.css';\nexport var tabsArrowButtonCSS = '_1tfbrxp6-3-13-3';\nexport var tabsArrowWrapperCSS = '_1tfbrxp5-3-13-3';\nexport var tabsCSS = '_1tfbrxp0-3-13-3';\nexport var tabsWrapperCSS = '_1tfbrxp1-3-13-3';\nexport var tabsWrapperOverflowCSS = {left:'_1tfbrxp2-3-13-3',right:'_1tfbrxp3-3-13-3',both:'_1tfbrxp4-3-13-3'};"],
+  "sourcesContent": ["import './Tabs.css';\nexport var tabsArrowButtonCSS = '_1tfbrxp6-3-14-0';\nexport var tabsArrowWrapperCSS = '_1tfbrxp5-3-14-0';\nexport var tabsCSS = '_1tfbrxp0-3-14-0';\nexport var tabsWrapperCSS = '_1tfbrxp1-3-14-0';\nexport var tabsWrapperOverflowCSS = {left:'_1tfbrxp2-3-14-0',right:'_1tfbrxp3-3-14-0',both:'_1tfbrxp4-3-14-0'};"],
   "mappings": "AAAA,OAAO;AACA,IAAI,qBAAqB;AACzB,IAAI,sBAAsB;AAC1B,IAAI,UAAU;AACd,IAAI,iBAAiB;AACrB,IAAI,yBAAyB,EAAC,MAAK,oBAAmB,OAAM,oBAAmB,MAAK,mBAAkB;",
   "names": []
 }

package/esm/notifications/notification-settings/NotificationSettings.css

@@ -1,3 +1,3 @@
-._1cohdty0-3-13-3 {
+._1cohdty0-3-14-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }

package/esm/notifications/notification-settings/NotificationSettings.sty.js

@@ -1,5 +1,5 @@
 import "./NotificationSettings.css";
-var overlayText = "_1cohdty0-3-13-3";
+var overlayText = "_1cohdty0-3-14-0";
 export {
   overlayText
 };

package/esm/notifications/notification-settings/NotificationSettings.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/notifications/notification-settings/NotificationSettings.css.ts"],
-  "sourcesContent": ["import './NotificationSettings.css';\nexport var overlayText = '_1cohdty0-3-13-3';"],
+  "sourcesContent": ["import './NotificationSettings.css';\nexport var overlayText = '_1cohdty0-3-14-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,cAAc;",
   "names": []
 }

package/esm/notifications/toast/Toast.css

@@ -1,11 +1,11 @@
-._yjszxq0-3-13-3 {
+._yjszxq0-3-14-0 {
   display: flex;
   overflow: hidden;
 }
-._yjszxq1-3-13-3 {
+._yjszxq1-3-14-0 {
   display: flex;
 }
-._yjszxq1-3-13-3._yjszxq1-3-13-3 {
+._yjszxq1-3-14-0._yjszxq1-3-14-0 {
   border: 0;
   border-radius: 0;
   padding-left: var(--dt-spacings-size-8, 8px);
@@ -13,14 +13,14 @@
   padding-top: var(--dt-spacings-size-12, 12px);
   padding-bottom: var(--dt-spacings-size-12, 12px);
 }
-._yjszxq2-3-13-3 {
+._yjszxq2-3-14-0 {
   overflow-y: auto;
   max-height: min(40vh, 400px);
   box-sizing: border-box;
 }
-._yjszxq3-3-13-3 {
+._yjszxq3-3-14-0 {
   max-width: 100%;
 }
-._yjszxq3-3-13-3._yjszxq3-3-13-3 {
+._yjszxq3-3-14-0._yjszxq3-3-14-0 {
   overflow-wrap: anywhere;
 }