@dynatrace/strato-components 3.12.1 → 3.13.0

package/esm/layouts/surface/Surface.css

@@ -1,86 +1,86 @@
-._1qto6jt6-3-12-1 {
-  --_1igzksy0-3-12-1: var(--dt-borders-radius-surface-default, 12px);
+._1qto6jt6-3-13-0 {
+  --_1igzksy0-3-13-0: var(--dt-borders-radius-surface-default, 12px);
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   text-align: left;
   border: none;
   outline: none;
   position: relative;
   background-color: var(--dt-colors-background-surface-default, #fff);
-  border-radius: var(--_1igzksy0-3-12-1);
+  border-radius: var(--_1igzksy0-3-13-0);
 }
-._1qto6jt6-3-12-1::before, ._1qto6jt6-3-12-1::after {
+._1qto6jt6-3-13-0::before, ._1qto6jt6-3-13-0::after {
   content: "";
   width: 100%;
   height: 100%;
   position: absolute;
   left: 0;
   top: 0;
-  border-radius: var(--_1igzksy0-3-12-1);
+  border-radius: var(--_1igzksy0-3-13-0);
   pointer-events: none;
 }
-._1qto6jt6-3-12-1::after {
+._1qto6jt6-3-13-0::after {
   outline-offset: 2px;
-  outline: 2px solid var(--_17bwkb02-3-12-1);
-  opacity: var(--_1qto6jt4-3-12-1);
-  transition: var(--_1qto6jt5-3-12-1);
+  outline: 2px solid var(--_17bwkb02-3-13-0);
+  opacity: var(--_1qto6jt4-3-13-0);
+  transition: var(--_1qto6jt5-3-13-0);
 }
-._1qto6jt7-3-12-1 {
-  --_1qto6jt4-3-12-1: 1;
-  --_1qto6jt5-3-12-1: var(--dt-animations-fade-in-easing, cubic-bezier(0.5, 0, 1, 1)) var(--dt-animations-fade-in-duration-fast, 150ms);
+._1qto6jt7-3-13-0 {
+  --_1qto6jt4-3-13-0: 1;
+  --_1qto6jt5-3-13-0: var(--dt-animations-fade-in-easing, cubic-bezier(0.5, 0, 1, 1)) var(--dt-animations-fade-in-duration-fast, 150ms);
 }
-._1qto6jt8-3-12-1 {
-  --_1qto6jt4-3-12-1: 0;
-  --_1qto6jt5-3-12-1: var(--dt-animations-fade-out-easing, cubic-bezier(0, 0, 0.2, 1)) var(--dt-animations-fade-out-duration-fast, 150ms);
+._1qto6jt8-3-13-0 {
+  --_1qto6jt4-3-13-0: 0;
+  --_1qto6jt5-3-13-0: var(--dt-animations-fade-out-easing, cubic-bezier(0, 0, 0.2, 1)) var(--dt-animations-fade-out-duration-fast, 150ms);
 }
-._1qto6jt9-3-12-1 {
-  --_1qto6jt1-3-12-1: 0;
-  --_1qto6jt2-3-12-1: pointer;
-  --_1qto6jt3-3-12-1: var(--dt-box-shadows-surface-flat-hover, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 4px 8px -2px #2d2e4e12);
+._1qto6jt9-3-13-0 {
+  --_1qto6jt1-3-13-0: 0;
+  --_1qto6jt2-3-13-0: pointer;
+  --_1qto6jt3-3-13-0: var(--dt-box-shadows-surface-flat-hover, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 4px 8px -2px #2d2e4e12);
   width: 100%;
   height: 100%;
   position: absolute;
   left: 0;
   top: 0;
-  border-radius: var(--_1igzksy0-3-12-1);
+  border-radius: var(--_1igzksy0-3-13-0);
   pointer-events: none;
 }
-._1qto6jt9-3-12-1::after,._1qto6jt9-3-12-1::before {
+._1qto6jt9-3-13-0::after,._1qto6jt9-3-13-0::before {
   content: "";
   width: 100%;
   height: 100%;
   position: absolute;
   left: 0;
   top: 0;
-  border-radius: var(--_1igzksy0-3-12-1);
+  border-radius: var(--_1igzksy0-3-13-0);
   pointer-events: none;
   transition: var(--dt-animations-fade-in-easing, cubic-bezier(0.5, 0, 1, 1)) var(--dt-animations-fade-in-duration-fast, 150ms);
 }
-._1qto6jt9-3-12-1::after {
-  box-shadow: var(--_1qto6jt0-3-12-1);
-  opacity: var(--_1qto6jt1-3-12-1);
+._1qto6jt9-3-13-0::after {
+  box-shadow: var(--_1qto6jt0-3-13-0);
+  opacity: var(--_1qto6jt1-3-13-0);
 }
-._1qto6jt9-3-12-1::before {
-  box-shadow: var(--_1qto6jt3-3-12-1);
+._1qto6jt9-3-13-0::before {
+  box-shadow: var(--_1qto6jt3-3-13-0);
   opacity: 0;
 }
-._1qto6jta-3-12-1 {
-  --_1qto6jt0-3-12-1: var(--dt-box-shadows-surface-flat-drag, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 7px 17px -2px #2d2e4e52);
-  --_1qto6jt3-3-12-1: var(--dt-box-shadows-surface-flat-hover, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 4px 8px -2px #2d2e4e12);
+._1qto6jta-3-13-0 {
+  --_1qto6jt0-3-13-0: var(--dt-box-shadows-surface-flat-drag, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 7px 17px -2px #2d2e4e52);
+  --_1qto6jt3-3-13-0: var(--dt-box-shadows-surface-flat-hover, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 4px 8px -2px #2d2e4e12);
   box-shadow: var(--dt-box-shadows-surface-flat-rest, 0px 0px 0px 1px #2d2e4e0d);
 }
-._1qto6jtb-3-12-1 {
-  --_1qto6jt0-3-12-1: var(--dt-box-shadows-surface-raised-drag, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 7px 17px -2px #2d2e4e52);
-  --_1qto6jt3-3-12-1: var(--dt-box-shadows-surface-raised-hover, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);
+._1qto6jtb-3-13-0 {
+  --_1qto6jt0-3-13-0: var(--dt-box-shadows-surface-raised-drag, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 7px 17px -2px #2d2e4e52);
+  --_1qto6jt3-3-13-0: var(--dt-box-shadows-surface-raised-hover, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);
   box-shadow: var(--dt-box-shadows-surface-raised-rest, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 4px 8px -2px #2d2e4e12);
 }
-._1qto6jtc-3-12-1 {
-  --_1qto6jt0-3-12-1: var(--dt-box-shadows-surface-floating-drag, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 7px 17px -2px #2d2e4e52);
-  --_1qto6jt3-3-12-1: var(--dt-box-shadows-surface-floating-hover, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 6px 14px -2px #2d2e4e3d);
+._1qto6jtc-3-13-0 {
+  --_1qto6jt0-3-13-0: var(--dt-box-shadows-surface-floating-drag, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 7px 17px -2px #2d2e4e52);
+  --_1qto6jt3-3-13-0: var(--dt-box-shadows-surface-floating-hover, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 6px 14px -2px #2d2e4e3d);
   box-shadow: var(--dt-box-shadows-surface-floating-rest, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);
 }
-._1qto6jtd-3-12-1 {
-  --_1qto6jt1-3-12-1: 1;
-  --_1qto6jt2-3-12-1: grab;
+._1qto6jtd-3-13-0 {
+  --_1qto6jt1-3-13-0: 1;
+  --_1qto6jt2-3-13-0: grab;
 }
 button.strato-surface:not(:disabled), a.strato-surface:not(:disabled) {
   cursor: pointer;

package/esm/layouts/surface/Surface.sty.js

@@ -1,8 +1,8 @@
 import "../../styles/colorUtils.css";
 import "./Surface.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var pseudoElement = _7a468({ defaultClassName: "_1qto6jt9-3-12-1", variantClassNames: { elevation: { flat: "_1qto6jta-3-12-1", raised: "_1qto6jtb-3-12-1", floating: "_1qto6jtc-3-12-1" }, dragged: { true: "_1qto6jtd-3-12-1" } }, defaultVariants: {}, compoundVariants: [] });
-var surface = _7a468({ defaultClassName: "_1qto6jt6-3-12-1", variantClassNames: { selected: { true: "_1qto6jt7-3-12-1", false: "_1qto6jt8-3-12-1" } }, defaultVariants: {}, compoundVariants: [] });
+var pseudoElement = _7a468({ defaultClassName: "_1qto6jt9-3-13-0", variantClassNames: { elevation: { flat: "_1qto6jta-3-13-0", raised: "_1qto6jtb-3-13-0", floating: "_1qto6jtc-3-13-0" }, dragged: { true: "_1qto6jtd-3-13-0" } }, defaultVariants: {}, compoundVariants: [] });
+var surface = _7a468({ defaultClassName: "_1qto6jt6-3-13-0", variantClassNames: { selected: { true: "_1qto6jt7-3-13-0", false: "_1qto6jt8-3-13-0" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   pseudoElement,
   surface

package/esm/layouts/surface/Surface.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/surface/Surface.css.ts"],
-  "sourcesContent": ["import '../../styles/colorUtils.css';\nimport './Surface.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var pseudoElement = _7a468({defaultClassName:'_1qto6jt9-3-12-1',variantClassNames:{elevation:{flat:'_1qto6jta-3-12-1',raised:'_1qto6jtb-3-12-1',floating:'_1qto6jtc-3-12-1'},dragged:{true:'_1qto6jtd-3-12-1'}},defaultVariants:{},compoundVariants:[]});\nexport var surface = _7a468({defaultClassName:'_1qto6jt6-3-12-1',variantClassNames:{selected:{true:'_1qto6jt7-3-12-1',false:'_1qto6jt8-3-12-1'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import '../../styles/colorUtils.css';\nimport './Surface.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var pseudoElement = _7a468({defaultClassName:'_1qto6jt9-3-13-0',variantClassNames:{elevation:{flat:'_1qto6jta-3-13-0',raised:'_1qto6jtb-3-13-0',floating:'_1qto6jtc-3-13-0'},dragged:{true:'_1qto6jtd-3-13-0'}},defaultVariants:{},compoundVariants:[]});\nexport var surface = _7a468({defaultClassName:'_1qto6jt6-3-13-0',variantClassNames:{selected:{true:'_1qto6jt7-3-13-0',false:'_1qto6jt8-3-13-0'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,gBAAgB,OAAO,EAAC,kBAAiB,oBAAmB,mBAAkB,EAAC,WAAU,EAAC,MAAK,oBAAmB,QAAO,oBAAmB,UAAS,mBAAkB,GAAE,SAAQ,EAAC,MAAK,mBAAkB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACvP,IAAI,UAAU,OAAO,EAAC,kBAAiB,oBAAmB,mBAAkB,EAAC,UAAS,EAAC,MAAK,oBAAmB,OAAM,mBAAkB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/layouts/surface/variables.sty.js

@@ -1,4 +1,4 @@
-var surfaceBorderRadius = "var(--_1igzksy0-3-12-1)";
+var surfaceBorderRadius = "var(--_1igzksy0-3-13-0)";
 export {
   surfaceBorderRadius
 };

package/esm/layouts/surface/variables.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/surface/variables.css.ts"],
-  "sourcesContent": ["export var surfaceBorderRadius = 'var(--_1igzksy0-3-12-1)';"],
+  "sourcesContent": ["export var surfaceBorderRadius = 'var(--_1igzksy0-3-13-0)';"],
   "mappings": "AAAO,IAAI,sBAAsB;",
   "names": []
 }

package/esm/layouts/title-bar/TitleBar.css

@@ -1,21 +1,21 @@
-._wcwjv20-3-12-1 {
+._wcwjv20-3-13-0 {
   flex-grow: 1;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   gap: var(--dt-spacings-size-4, 4px);
 }
-._wcwjv21-3-12-1 {
+._wcwjv21-3-13-0 {
   width: clamp(400px, 400px, 100%);
 }
-._wcwjv22-3-12-1 {
+._wcwjv22-3-13-0 {
   flex-grow: 1;
   align-self: center;
   min-width: 0;
 }
-._wcwjv23-3-12-1 {
+._wcwjv23-3-13-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._wcwjv24-3-12-1 {
+._wcwjv24-3-13-0 {
   max-width: 100%;
 }

package/esm/layouts/title-bar/TitleBar.sty.js

@@ -1,10 +1,10 @@
 import "../../styles/textStyle.css";
 import "./TitleBar.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var navigationWrapperCSS = "_wcwjv22-3-12-1";
-var subtitleCSS = "_wcwjv23-3-12-1 _da9a8v0-3-12-1 _da9a8v2-3-12-1 _da9a8v3-3-12-1 _da9a8vb-3-12-1";
-var suffixWrapperCSS = "_wcwjv24-3-12-1";
-var titleSubtitleWrapperCSS = _7a468({ defaultClassName: "_wcwjv20-3-12-1", variantClassNames: { childrenAreText: { true: "_wcwjv21-3-12-1" } }, defaultVariants: {}, compoundVariants: [] });
+var navigationWrapperCSS = "_wcwjv22-3-13-0";
+var subtitleCSS = "_wcwjv23-3-13-0 _da9a8v0-3-13-0 _da9a8v2-3-13-0 _da9a8v3-3-13-0 _da9a8vb-3-13-0";
+var suffixWrapperCSS = "_wcwjv24-3-13-0";
+var titleSubtitleWrapperCSS = _7a468({ defaultClassName: "_wcwjv20-3-13-0", variantClassNames: { childrenAreText: { true: "_wcwjv21-3-13-0" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   navigationWrapperCSS,
   subtitleCSS,

package/esm/layouts/title-bar/TitleBar.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/title-bar/TitleBar.css.ts"],
-  "sourcesContent": ["import '../../styles/textStyle.css';\nimport './TitleBar.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var navigationWrapperCSS = '_wcwjv22-3-12-1';\nexport var subtitleCSS = '_wcwjv23-3-12-1 _da9a8v0-3-12-1 _da9a8v2-3-12-1 _da9a8v3-3-12-1 _da9a8vb-3-12-1';\nexport var suffixWrapperCSS = '_wcwjv24-3-12-1';\nexport var titleSubtitleWrapperCSS = _7a468({defaultClassName:'_wcwjv20-3-12-1',variantClassNames:{childrenAreText:{true:'_wcwjv21-3-12-1'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import '../../styles/textStyle.css';\nimport './TitleBar.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var navigationWrapperCSS = '_wcwjv22-3-13-0';\nexport var subtitleCSS = '_wcwjv23-3-13-0 _da9a8v0-3-13-0 _da9a8v2-3-13-0 _da9a8v3-3-13-0 _da9a8vb-3-13-0';\nexport var suffixWrapperCSS = '_wcwjv24-3-13-0';\nexport var titleSubtitleWrapperCSS = _7a468({defaultClassName:'_wcwjv20-3-13-0',variantClassNames:{childrenAreText:{true:'_wcwjv21-3-13-0'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,uBAAuB;AAC3B,IAAI,cAAc;AAClB,IAAI,mBAAmB;AACvB,IAAI,0BAA0B,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,iBAAgB,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/navigation/breadcrumbs/Breadcrumbs.css

@@ -1,27 +1,27 @@
-._hw98ku0-3-12-1 {
+._hw98ku0-3-13-0 {
   display: flex;
   min-width: 0;
   margin: 0;
   padding: 0;
 }
-._hw98ku1-3-12-1 {
+._hw98ku1-3-13-0 {
   display: flex;
   gap: var(--dt-spacings-size-2, 2px);
   padding-right: var(--dt-spacings-size-2, 2px);
   white-space: nowrap;
 }
-._hw98ku2-3-12-1 {
+._hw98ku2-3-13-0 {
   overflow: hidden;
 }
-._hw98ku3-3-12-1 {
+._hw98ku3-3-13-0 {
   overflow: visible;
 }
-._hw98ku4-3-12-1 {
+._hw98ku4-3-13-0 {
   position: absolute;
   visibility: hidden;
   z-index: -1;
 }
-._hw98ku5-3-12-1 {
+._hw98ku5-3-13-0 {
   cursor: pointer;
   padding: 0;
   background: none;
@@ -32,18 +32,18 @@
   line-height: var(--dt-typography-text-base-emphasized-line-height, 1.4285714286);
   text-decoration: underline;
 }
-._hw98ku6-3-12-1 {
+._hw98ku6-3-13-0 {
   cursor: default;
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   text-decoration: none;
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
   pointer-events: none;
 }
-._hw98ku7-3-12-1 {
+._hw98ku7-3-13-0 {
   overflow: hidden;
   text-overflow: ellipsis;
 }
-._hw98ku8-3-12-1 {
+._hw98ku8-3-13-0 {
   min-width: var(--dt-spacings-size-20, 20px);
   min-height: var(--dt-spacings-size-20, 20px);
   color: var(--dt-colors-icon-neutral-subdued, #595a7d);

package/esm/navigation/breadcrumbs/Breadcrumbs.sty.js

@@ -1,10 +1,10 @@
 import "./Breadcrumbs.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var breadcrumbsContainerCSS = "_hw98ku0-3-12-1";
-var breadcrumbsItemCSS = _7a468({ defaultClassName: "_hw98ku5-3-12-1", variantClassNames: { disabled: { true: "_hw98ku6-3-12-1" }, isLastItem: { true: "_hw98ku7-3-12-1" } }, defaultVariants: { disabled: false, isLastItem: false }, compoundVariants: [] });
-var breadcrumbsItemInvisibleCSS = "_hw98ku4-3-12-1";
-var breadcrumbsListItemCSS = _7a468({ defaultClassName: "_hw98ku1-3-12-1", variantClassNames: { isLastVisible: { true: "_hw98ku2-3-12-1", false: "_hw98ku3-3-12-1" } }, defaultVariants: { isLastVisible: false }, compoundVariants: [] });
-var breadcrumbsSeperatorIconCSS = "_hw98ku8-3-12-1";
+var breadcrumbsContainerCSS = "_hw98ku0-3-13-0";
+var breadcrumbsItemCSS = _7a468({ defaultClassName: "_hw98ku5-3-13-0", variantClassNames: { disabled: { true: "_hw98ku6-3-13-0" }, isLastItem: { true: "_hw98ku7-3-13-0" } }, defaultVariants: { disabled: false, isLastItem: false }, compoundVariants: [] });
+var breadcrumbsItemInvisibleCSS = "_hw98ku4-3-13-0";
+var breadcrumbsListItemCSS = _7a468({ defaultClassName: "_hw98ku1-3-13-0", variantClassNames: { isLastVisible: { true: "_hw98ku2-3-13-0", false: "_hw98ku3-3-13-0" } }, defaultVariants: { isLastVisible: false }, compoundVariants: [] });
+var breadcrumbsSeperatorIconCSS = "_hw98ku8-3-13-0";
 export {
   breadcrumbsContainerCSS,
   breadcrumbsItemCSS,

package/esm/navigation/breadcrumbs/Breadcrumbs.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/navigation/breadcrumbs/Breadcrumbs.css.ts"],
-  "sourcesContent": ["import './Breadcrumbs.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var breadcrumbsContainerCSS = '_hw98ku0-3-12-1';\nexport var breadcrumbsItemCSS = _7a468({defaultClassName:'_hw98ku5-3-12-1',variantClassNames:{disabled:{true:'_hw98ku6-3-12-1'},isLastItem:{true:'_hw98ku7-3-12-1'}},defaultVariants:{disabled:false,isLastItem:false},compoundVariants:[]});\nexport var breadcrumbsItemInvisibleCSS = '_hw98ku4-3-12-1';\nexport var breadcrumbsListItemCSS = _7a468({defaultClassName:'_hw98ku1-3-12-1',variantClassNames:{isLastVisible:{true:'_hw98ku2-3-12-1',false:'_hw98ku3-3-12-1'}},defaultVariants:{isLastVisible:false},compoundVariants:[]});\nexport var breadcrumbsSeperatorIconCSS = '_hw98ku8-3-12-1';"],
+  "sourcesContent": ["import './Breadcrumbs.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var breadcrumbsContainerCSS = '_hw98ku0-3-13-0';\nexport var breadcrumbsItemCSS = _7a468({defaultClassName:'_hw98ku5-3-13-0',variantClassNames:{disabled:{true:'_hw98ku6-3-13-0'},isLastItem:{true:'_hw98ku7-3-13-0'}},defaultVariants:{disabled:false,isLastItem:false},compoundVariants:[]});\nexport var breadcrumbsItemInvisibleCSS = '_hw98ku4-3-13-0';\nexport var breadcrumbsListItemCSS = _7a468({defaultClassName:'_hw98ku1-3-13-0',variantClassNames:{isLastVisible:{true:'_hw98ku2-3-13-0',false:'_hw98ku3-3-13-0'}},defaultVariants:{isLastVisible:false},compoundVariants:[]});\nexport var breadcrumbsSeperatorIconCSS = '_hw98ku8-3-13-0';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,0BAA0B;AAC9B,IAAI,qBAAqB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,UAAS,EAAC,MAAK,kBAAiB,GAAE,YAAW,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,UAAS,OAAM,YAAW,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACpO,IAAI,8BAA8B;AAClC,IAAI,yBAAyB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,eAAc,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,eAAc,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACrN,IAAI,8BAA8B;",
   "names": []
 }

package/esm/navigation/menu/Content.js

@@ -22,6 +22,7 @@ const Content = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
     onCloseAutoFocus,
     avoidCollisions = true,
     _sideOffset = SIDE_OFFSET,
+    _alignOffset,
     _onTabKeyPressed,
     children,
     collisionBoundary,
@@ -64,6 +65,7 @@ const Content = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
       onKeyUp: tabKeyHandler,
       onCloseAutoFocus,
       sideOffset: _sideOffset,
+      alignOffset: _alignOffset,
       avoidCollisions,
       className: styles.content,
       style: { zIndex: style.zIndex },

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/navigation/menu/Content.tsx"],
-  "sourcesContent": ["import {\n  Content as RadixContent,\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 { MobileMenuModeContext } from './contexts/MobileMenuModeContext.js';\nimport { useMenuContext } from './hooks/useMenuContext.js';\nimport * as styles from './Menu.sty.js';\nimport { MobileContent } from './MobileContent.js';\nimport { type MenuContentProps } from './types.js';\nimport { useOverlayStacking } from '../../core/hooks/useOverlayStacking.js';\n\nexport type { MenuContentProps };\n\nconst SIDE_OFFSET = 4;\ntype InternalMenuContentProps = MenuContentProps & {\n  /** @internal */\n  _onTabKeyPressed: () => void;\n  /** @internal */\n  _sideOffset?: number;\n};\n\n/**\n * The component that pops out when the dropdown menu is open.\n * @public\n */\nexport const Content = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  MenuContentProps\n>((props, forwardedRef) => {\n  const isMobile = useContext(MobileMenuModeContext);\n\n  const {\n    side = 'bottom',\n    alignment = 'start',\n    onCloseAutoFocus,\n    avoidCollisions = true,\n    _sideOffset = SIDE_OFFSET,\n    _onTabKeyPressed,\n    children,\n    collisionBoundary,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    ...remainingProps\n  } = props as InternalMenuContentProps;\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 { setIsOpen, contentId } = useMenuContext();\n\n  const handleOnKeyDown = useCallback(\n    (e: ReactKeyboardEvent) => {\n      // Only close menu on escape when it is nested in other overlays (modal, sheet, ...).\n      if (e.key === 'Escape') {\n        setIsOpen(false);\n        e.stopPropagation();\n      }\n    },\n    [setIsOpen],\n  );\n\n  if (isMobile) {\n    return <MobileContent {...props} _contentId={contentId} />;\n  }\n\n  return (\n    <RadixPortal>\n      <RadixContent\n        {...remainingProps}\n        id={contentId}\n        data-testid={dataTestId}\n        ref={forwardedRef}\n        side={side}\n        align={alignment}\n        onKeyUp={tabKeyHandler}\n        onCloseAutoFocus={onCloseAutoFocus}\n        sideOffset={_sideOffset}\n        avoidCollisions={avoidCollisions}\n        className={styles.content}\n        style={{ zIndex: style.zIndex }}\n        onKeyDown={handleOnKeyDown}\n        collisionBoundary={collisionBoundary}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n      >\n        {children}\n      </RadixContent>\n    </RadixPortal>\n  );\n});\n\n(Content as typeof Content & { displayName: string }).displayName =\n  'Menu.Content';\n"],
-  "mappings": "AA2EW;AA3EX;AAAA,EACE,WAAW;AAAA,EACX,UAAU;AAAA,OACL;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAEP,SAAS,6BAA6B;AACtC,SAAS,sBAAsB;AAC/B,YAAY,YAAY;AACxB,SAAS,qBAAqB;AAE9B,SAAS,0BAA0B;AAInC,MAAM,cAAc;AAYb,MAAM,UAA0B,2BAGrC,CAAC,OAAO,iBAAiB;AACzB,QAAM,WAAW,WAAW,qBAAqB;AAEjD,QAAM;AAAA,IACJ,OAAO;AAAA,IACP,YAAY;AAAA,IACZ;AAAA,IACA,kBAAkB;AAAA,IAClB,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,GAAG;AAAA,EACL,IAAI;AACJ,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,EAAE,WAAW,UAAU,IAAI,eAAe;AAEhD,QAAM,kBAAkB;AAAA,IACtB,CAAC,MAA0B;AAEzB,UAAI,EAAE,QAAQ,UAAU;AACtB,kBAAU,KAAK;AACf,UAAE,gBAAgB;AAAA,MACpB;AAAA,IACF;AAAA,IACA,CAAC,SAAS;AAAA,EACZ;AAEA,MAAI,UAAU;AACZ,WAAO,oBAAC,iBAAe,GAAG,OAAO,YAAY,WAAW;AAAA,EAC1D;AAEA,SACE,oBAAC,eACC;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,IAAI;AAAA,MACJ,eAAa;AAAA,MACb,KAAK;AAAA,MACL;AAAA,MACA,OAAO;AAAA,MACP,SAAS;AAAA,MACT;AAAA,MACA,YAAY;AAAA,MACZ;AAAA,MACA,WAAW,OAAO;AAAA,MAClB,OAAO,EAAE,QAAQ,MAAM,OAAO;AAAA,MAC9B,WAAW;AAAA,MACX;AAAA,MACA,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAEjB;AAAA;AAAA,EACH,GACF;AAEJ,CAAC;AAEA,QAAqD,cACpD;",
+  "sourcesContent": ["import {\n  Content as RadixContent,\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 { MobileMenuModeContext } from './contexts/MobileMenuModeContext.js';\nimport { useMenuContext } from './hooks/useMenuContext.js';\nimport * as styles from './Menu.sty.js';\nimport { MobileContent } from './MobileContent.js';\nimport { type MenuContentProps } from './types.js';\nimport { useOverlayStacking } from '../../core/hooks/useOverlayStacking.js';\n\nexport type { MenuContentProps };\n\nconst SIDE_OFFSET = 4;\ntype InternalMenuContentProps = MenuContentProps & {\n  /** @internal */\n  _onTabKeyPressed: () => void;\n  /** @internal */\n  _sideOffset?: number;\n  /** @internal */\n  _alignOffset?: number;\n};\n\n/**\n * The component that pops out when the dropdown menu is open.\n * @public\n */\nexport const Content = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  MenuContentProps\n>((props, forwardedRef) => {\n  const isMobile = useContext(MobileMenuModeContext);\n\n  const {\n    side = 'bottom',\n    alignment = 'start',\n    onCloseAutoFocus,\n    avoidCollisions = true,\n    _sideOffset = SIDE_OFFSET,\n    _alignOffset,\n    _onTabKeyPressed,\n    children,\n    collisionBoundary,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    ...remainingProps\n  } = props as InternalMenuContentProps;\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 { setIsOpen, contentId } = useMenuContext();\n\n  const handleOnKeyDown = useCallback(\n    (e: ReactKeyboardEvent) => {\n      // Only close menu on escape when it is nested in other overlays (modal, sheet, ...).\n      if (e.key === 'Escape') {\n        setIsOpen(false);\n        e.stopPropagation();\n      }\n    },\n    [setIsOpen],\n  );\n\n  if (isMobile) {\n    return <MobileContent {...props} _contentId={contentId} />;\n  }\n\n  return (\n    <RadixPortal>\n      <RadixContent\n        {...remainingProps}\n        id={contentId}\n        data-testid={dataTestId}\n        ref={forwardedRef}\n        side={side}\n        align={alignment}\n        onKeyUp={tabKeyHandler}\n        onCloseAutoFocus={onCloseAutoFocus}\n        sideOffset={_sideOffset}\n        alignOffset={_alignOffset}\n        avoidCollisions={avoidCollisions}\n        className={styles.content}\n        style={{ zIndex: style.zIndex }}\n        onKeyDown={handleOnKeyDown}\n        collisionBoundary={collisionBoundary}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n      >\n        {children}\n      </RadixContent>\n    </RadixPortal>\n  );\n});\n\n(Content as typeof Content & { displayName: string }).displayName =\n  'Menu.Content';\n"],
+  "mappings": "AA8EW;AA9EX;AAAA,EACE,WAAW;AAAA,EACX,UAAU;AAAA,OACL;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAEP,SAAS,6BAA6B;AACtC,SAAS,sBAAsB;AAC/B,YAAY,YAAY;AACxB,SAAS,qBAAqB;AAE9B,SAAS,0BAA0B;AAInC,MAAM,cAAc;AAcb,MAAM,UAA0B,2BAGrC,CAAC,OAAO,iBAAiB;AACzB,QAAM,WAAW,WAAW,qBAAqB;AAEjD,QAAM;AAAA,IACJ,OAAO;AAAA,IACP,YAAY;AAAA,IACZ;AAAA,IACA,kBAAkB;AAAA,IAClB,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,GAAG;AAAA,EACL,IAAI;AACJ,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,EAAE,WAAW,UAAU,IAAI,eAAe;AAEhD,QAAM,kBAAkB;AAAA,IACtB,CAAC,MAA0B;AAEzB,UAAI,EAAE,QAAQ,UAAU;AACtB,kBAAU,KAAK;AACf,UAAE,gBAAgB;AAAA,MACpB;AAAA,IACF;AAAA,IACA,CAAC,SAAS;AAAA,EACZ;AAEA,MAAI,UAAU;AACZ,WAAO,oBAAC,iBAAe,GAAG,OAAO,YAAY,WAAW;AAAA,EAC1D;AAEA,SACE,oBAAC,eACC;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,IAAI;AAAA,MACJ,eAAa;AAAA,MACb,KAAK;AAAA,MACL;AAAA,MACA,OAAO;AAAA,MACP,SAAS;AAAA,MACT;AAAA,MACA,YAAY;AAAA,MACZ,aAAa;AAAA,MACb;AAAA,MACA,WAAW,OAAO;AAAA,MAClB,OAAO,EAAE,QAAQ,MAAM,OAAO;AAAA,MAC9B,WAAW;AAAA,MACX;AAAA,MACA,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAEjB;AAAA;AAAA,EACH,GACF;AAEJ,CAAC;AAEA,QAAqD,cACpD;",
   "names": []
 }

package/esm/navigation/menu/Group.js

@@ -1,12 +1,25 @@
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Group as RadixGroup } from "@radix-ui/react-dropdown-menu";
 import clsx from "clsx";
-import { forwardRef, Children } from "react";
+import {
+  forwardRef,
+  Children,
+  useCallback,
+  useMemo,
+  useState
+} from "react";
+import { MenuGroupContext } from "./contexts/MenuGroupContext.js";
+import { Label } from "./Label.js";
 import * as styles from "./Menu.sty.js";
+import { useId } from "../../core/hooks/useId.js";
+const isRenderableLabel = (label) => label !== null && label !== void 0 && typeof label !== "boolean" && label !== "";
+const appendLabelId = (labelId) => (current) => [...current, labelId];
+const removeLabelId = (labelId) => (current) => current.filter((registeredId) => registeredId !== labelId);
 const Group = /* @__PURE__ */ forwardRef(
   (props, forwardedRef) => {
     const {
       children,
+      label,
       "aria-label": ariaLabel,
       "aria-labelledby": ariaLabelledBy,
       "aria-describedby": ariaDescribedBy,
@@ -15,21 +28,34 @@ const Group = /* @__PURE__ */ forwardRef(
       style: consumerStyle,
       "data-testid": dataTestId
     } = props;
+    const generatedLabelId = useId();
+    const [registeredLabelIds, setRegisteredLabelIds] = useState([]);
+    const hasLabelProp = isRenderableLabel(label);
+    const registerLabel = useCallback((labelId) => {
+      setRegisteredLabelIds(appendLabelId(labelId));
+      return () => setRegisteredLabelIds(removeLabelId(labelId));
+    }, []);
+    const groupContext = useMemo(() => ({ registerLabel }), [registerLabel]);
     const hasChildren = Children.count(children) > 0;
-    return hasChildren ? /* @__PURE__ */ jsx(
-      RadixGroup,
-      {
-        className: clsx(styles.group, consumerClassName),
-        ref: forwardedRef,
-        "aria-label": ariaLabel,
-        "aria-labelledby": ariaLabelledBy,
-        "aria-describedby": ariaDescribedBy,
-        "aria-details": ariaDetails,
-        "data-testid": dataTestId,
-        style: consumerStyle,
-        children
-      }
-    ) : null;
+    const hasExplicitName = ariaLabel !== void 0 || ariaLabelledBy !== void 0;
+    const inferredLabelledBy = hasLabelProp ? generatedLabelId : registeredLabelIds[0];
+    return hasChildren ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      hasLabelProp ? /* @__PURE__ */ jsx(Label, { id: generatedLabelId, children: label }) : null,
+      /* @__PURE__ */ jsx(MenuGroupContext.Provider, { value: groupContext, children: /* @__PURE__ */ jsx(
+        RadixGroup,
+        {
+          className: clsx(styles.group, consumerClassName),
+          ref: forwardedRef,
+          "aria-label": ariaLabel,
+          "aria-labelledby": hasExplicitName ? ariaLabelledBy : inferredLabelledBy,
+          "aria-describedby": ariaDescribedBy,
+          "aria-details": ariaDetails,
+          "data-testid": dataTestId,
+          style: consumerStyle,
+          children
+        }
+      ) })
+    ] }) : null;
   }
 );
 Group.displayName = "Menu.Group";

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/navigation/menu/Group.tsx"],
-  "sourcesContent": ["import { Group as RadixGroup } from '@radix-ui/react-dropdown-menu';\nimport clsx from 'clsx';\nimport { forwardRef, Children } from 'react';\n\nimport * as styles from './Menu.sty.js';\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';\n\n\n/**\n * @public\n */\nexport interface MenuGroupProps\n  extends WithChildren,\n    AriaLabelingProps,\n    StylingProps,\n    DataTestId {}\n\n/**\n * Used to group multiple items.\n * @public\n */\nexport const Group = /* @__PURE__ */ forwardRef<HTMLDivElement, MenuGroupProps>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      'aria-describedby': ariaDescribedBy,\n      'aria-details': ariaDetails,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n    }: MenuGroupProps = props;\n    const hasChildren = Children.count(children) > 0;\n\n    return hasChildren ? (\n      <RadixGroup\n        className={clsx(styles.group, consumerClassName)}\n        ref={forwardedRef}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-describedby={ariaDescribedBy}\n        aria-details={ariaDetails}\n        data-testid={dataTestId}\n        style={consumerStyle}\n      >\n        {children}\n      </RadixGroup>\n    ) : null;\n  },\n);\n\n(Group as typeof Group & { displayName: string }).displayName = 'Menu.Group';\n"],
-  "mappings": "AAuCM;AAvCN,SAAS,SAAS,kBAAkB;AACpC,OAAO,UAAU;AACjB,SAAS,YAAY,gBAAgB;AAErC,YAAY,YAAY;AAoBjB,MAAM,QAAwB;AAAA,EACnC,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ;AAAA,MACA,cAAc;AAAA,MACd,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,gBAAgB;AAAA,MAChB,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAe;AAAA,IACjB,IAAoB;AACpB,UAAM,cAAc,SAAS,MAAM,QAAQ,IAAI;AAE/C,WAAO,cACL;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,KAAK,OAAO,OAAO,iBAAiB;AAAA,QAC/C,KAAK;AAAA,QACL,cAAY;AAAA,QACZ,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB,gBAAc;AAAA,QACd,eAAa;AAAA,QACb,OAAO;AAAA,QAEN;AAAA;AAAA,IACH,IACE;AAAA,EACN;AACF;AAEC,MAAiD,cAAc;",
+  "sourcesContent": ["import { Group as RadixGroup } from '@radix-ui/react-dropdown-menu';\nimport clsx from 'clsx';\nimport {\n  forwardRef,\n  Children,\n  useCallback,\n  useMemo,\n  useState,\n  type ReactNode,\n} from 'react';\n\nimport { MenuGroupContext } from './contexts/MenuGroupContext.js';\nimport { Label } from './Label.js';\nimport * as styles from './Menu.sty.js';\nimport { useId } from '../../core/hooks/useId.js';\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';\n\n/**\n * React renders `null`, `undefined`, and booleans as nothing, and an empty\n * string leaves the heading blank \u2014 none of those can name the group. Every\n * other value can, including `0`.\n */\nconst isRenderableLabel = (label: ReactNode): boolean =>\n  label !== null &&\n  label !== undefined &&\n  typeof label !== 'boolean' &&\n  label !== '';\n\nconst appendLabelId =\n  (labelId: string) =>\n  (current: readonly string[]): string[] => [...current, labelId];\n\nconst removeLabelId =\n  (labelId: string) =>\n  (current: readonly string[]): string[] =>\n    current.filter((registeredId) => registeredId !== labelId);\n\n/**\n * @public\n */\nexport interface MenuGroupProps\n  extends WithChildren, AriaLabelingProps, StylingProps, DataTestId {\n  /**\n   * A heading rendered above the group that also becomes its accessible name.\n   * Prefer this over wiring a `Menu.Label` and `aria-labelledby` by hand.\n   */\n  label?: ReactNode;\n}\n\n/**\n * Used to group multiple items.\n * @public\n */\nexport const Group = /* @__PURE__ */ forwardRef<HTMLDivElement, MenuGroupProps>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      label,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      'aria-describedby': ariaDescribedBy,\n      'aria-details': ariaDetails,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n    }: MenuGroupProps = props;\n    const generatedLabelId = useId();\n    const [registeredLabelIds, setRegisteredLabelIds] = useState<string[]>([]);\n    const hasLabelProp = isRenderableLabel(label);\n\n    const registerLabel = useCallback((labelId: string) => {\n      setRegisteredLabelIds(appendLabelId(labelId));\n      return () => setRegisteredLabelIds(removeLabelId(labelId));\n    }, []);\n\n    const groupContext = useMemo(() => ({ registerLabel }), [registerLabel]);\n\n    const hasChildren = Children.count(children) > 0;\n\n    // An explicit name from the consumer always wins over an inferred one \u2014\n    // including an empty one, which is a deliberate choice to stay unnamed.\n    const hasExplicitName =\n      ariaLabel !== undefined || ariaLabelledBy !== undefined;\n    // Labels register from their mount effects, which run in tree order, so the\n    // first entry is the topmost label \u2014 a group with section headers between\n    // its items is named by the heading that opens it, not by a later one.\n    const inferredLabelledBy = hasLabelProp\n      ? generatedLabelId\n      : registeredLabelIds[0];\n\n    return hasChildren ? (\n      <>\n        {hasLabelProp ? <Label id={generatedLabelId}>{label}</Label> : null}\n        <MenuGroupContext.Provider value={groupContext}>\n          <RadixGroup\n            className={clsx(styles.group, consumerClassName)}\n            ref={forwardedRef}\n            aria-label={ariaLabel}\n            aria-labelledby={\n              hasExplicitName ? ariaLabelledBy : inferredLabelledBy\n            }\n            aria-describedby={ariaDescribedBy}\n            aria-details={ariaDetails}\n            data-testid={dataTestId}\n            style={consumerStyle}\n          >\n            {children}\n          </RadixGroup>\n        </MenuGroupContext.Provider>\n      </>\n    ) : null;\n  },\n);\n\n(Group as typeof Group & { displayName: string }).displayName = 'Menu.Group';\n"],
+  "mappings": "AA8FM,mBACkB,KADlB;AA9FN,SAAS,SAAS,kBAAkB;AACpC,OAAO,UAAU;AACjB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAEP,SAAS,wBAAwB;AACjC,SAAS,aAAa;AACtB,YAAY,YAAY;AACxB,SAAS,aAAa;AAWtB,MAAM,oBAAoB,CAAC,UACzB,UAAU,QACV,UAAU,UACV,OAAO,UAAU,aACjB,UAAU;AAEZ,MAAM,gBACJ,CAAC,YACD,CAAC,YAAyC,CAAC,GAAG,SAAS,OAAO;AAEhE,MAAM,gBACJ,CAAC,YACD,CAAC,YACC,QAAQ,OAAO,CAAC,iBAAiB,iBAAiB,OAAO;AAkBtD,MAAM,QAAwB;AAAA,EACnC,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,gBAAgB;AAAA,MAChB,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAe;AAAA,IACjB,IAAoB;AACpB,UAAM,mBAAmB,MAAM;AAC/B,UAAM,CAAC,oBAAoB,qBAAqB,IAAI,SAAmB,CAAC,CAAC;AACzE,UAAM,eAAe,kBAAkB,KAAK;AAE5C,UAAM,gBAAgB,YAAY,CAAC,YAAoB;AACrD,4BAAsB,cAAc,OAAO,CAAC;AAC5C,aAAO,MAAM,sBAAsB,cAAc,OAAO,CAAC;AAAA,IAC3D,GAAG,CAAC,CAAC;AAEL,UAAM,eAAe,QAAQ,OAAO,EAAE,cAAc,IAAI,CAAC,aAAa,CAAC;AAEvE,UAAM,cAAc,SAAS,MAAM,QAAQ,IAAI;AAI/C,UAAM,kBACJ,cAAc,UAAa,mBAAmB;AAIhD,UAAM,qBAAqB,eACvB,mBACA,mBAAmB,CAAC;AAExB,WAAO,cACL,iCACG;AAAA,qBAAe,oBAAC,SAAM,IAAI,kBAAmB,iBAAM,IAAW;AAAA,MAC/D,oBAAC,iBAAiB,UAAjB,EAA0B,OAAO,cAChC;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,KAAK,OAAO,OAAO,iBAAiB;AAAA,UAC/C,KAAK;AAAA,UACL,cAAY;AAAA,UACZ,mBACE,kBAAkB,iBAAiB;AAAA,UAErC,oBAAkB;AAAA,UAClB,gBAAc;AAAA,UACd,eAAa;AAAA,UACb,OAAO;AAAA,UAEN;AAAA;AAAA,MACH,GACF;AAAA,OACF,IACE;AAAA,EACN;AACF;AAEC,MAAiD,cAAc;",
   "names": []
 }

package/esm/navigation/menu/Item.js

@@ -18,6 +18,7 @@ import * as styles from "./Menu.sty.js";
 import { useFocusRing } from "../../core/hooks/useFocusRing.js";
 import { useMergeRefs } from "../../core/hooks/useMergeRefs.js";
 import { mergeProps as _mergeProps } from "../../core/utils/merge-props.js";
+import { parseBoolean } from "../../core/utils/parse-boolean.js";
 import { Flex } from "../../layouts/flex/Flex.js";
 import { useTooltipState } from "../../overlays/hooks/useTooltipState.js";
 import { textStyle as textStyleCSS } from "../../styles/textStyle.sty.js";
@@ -25,6 +26,7 @@ const Item = /* @__PURE__ */ forwardRef(
   ({
     children,
     disabled = false,
+    "aria-disabled": ariaDisabledProp,
     onSelect,
     textValue,
     as = "div",
@@ -40,6 +42,8 @@ const Item = /* @__PURE__ */ forwardRef(
     const isMobile = useContext(MobileMenuModeContext);
     const { setIsOpen } = useMenuContext();
     const slots = getItemSlots(children);
+    const isSoftDisabled = !disabled && parseBoolean(ariaDisabledProp) === true;
+    const isDisabled = disabled || isSoftDisabled;
     const {
       isOpen,
       open: openTooltip,
@@ -68,7 +72,7 @@ const Item = /* @__PURE__ */ forwardRef(
           {
             ref: mobileRef,
             role: "menuitem",
-            "aria-disabled": disabled,
+            "aria-disabled": isDisabled,
             "aria-label": ariaLabel,
             "aria-labelledby": ariaLabelledBy,
             "aria-describedby": ariaDescribedBy,
@@ -77,7 +81,7 @@ const Item = /* @__PURE__ */ forwardRef(
             className: clsx(
               textStyleCSS({ textStyle: "base-emphasized" }),
               !isItemHovered && focusClassName,
-              styles.item({ disabled }),
+              styles.item({ disabled: isDisabled }),
               consumerClassName
             ),
             style: consumerStyle,
@@ -92,7 +96,7 @@ const Item = /* @__PURE__ */ forwardRef(
                   return;
                 }
                 onSelect(event);
-                if (!event.defaultPrevented) {
+                if (!isSoftDisabled && !event.defaultPrevented) {
                   setIsOpen(false);
                 }
               },
@@ -141,6 +145,7 @@ const Item = /* @__PURE__ */ forwardRef(
           disabled,
           textValue,
           ref: forwardedRef,
+          onSelect: isSoftDisabled ? (event) => event.preventDefault() : void 0,
           ..._mergeProps(focusProps, hoverProps, {
             onClick: (event) => {
               if (disabled) {
@@ -178,11 +183,11 @@ const Item = /* @__PURE__ */ forwardRef(
               className: clsx(
                 textStyleCSS({ textStyle: "base-emphasized" }),
                 !isItemHovered && focusClassName,
-                styles.item({ disabled })
+                styles.item({ disabled: isDisabled })
               ),
               disabled,
               role: "menuitem",
-              "aria-disabled": disabled,
+              "aria-disabled": isDisabled,
               ref: setTooltipTriggerRef,
               as,
               children: [