@dynatrace/strato-components 3.11.3 → 3.12.0

package/esm/forms/toggle-button-group/styles.css

@@ -1,14 +1,14 @@
-._w5wkeh1-3-11-3 {
-  --_w5wkeh0-3-11-3: var(--dt-box-shadows-surface-flat-rest, 0px 0px 0px 1px #2d2e4e0d) inset;
+._w5wkeh1-3-12-0 {
+  --_w5wkeh0-3-12-0: var(--dt-box-shadows-surface-flat-rest, 0px 0px 0px 1px #2d2e4e0d) inset;
 }
-._w5wkeh5-3-11-3:not(._w5wkeh4-3-11-3) {
+._w5wkeh5-3-12-0:not(._w5wkeh4-3-12-0) {
   cursor: not-allowed;
 }
-._w5wkeh6-3-11-3 {
+._w5wkeh6-3-12-0 {
   visibility: hidden;
   height: 0;
 }
-._w5wkeh7-3-11-3 {
+._w5wkeh7-3-12-0 {
   position: relative;
   z-index: var(--dt-elevations-default, 1);
   display: inline-flex;
@@ -23,40 +23,40 @@
   overflow: hidden;
   flex-wrap: nowrap;
 }
-._1jgl8s50-3-11-3 ._w5wkeh7-3-11-3 {
+._1jgl8s50-3-12-0 ._w5wkeh7-3-12-0 {
   background-color: var(--dt-colors-background-container-neutral-emphasized, #ebecf0);
 }
-._w5wkeh7-3-11-3._w5wkeh2-3-11-3 {
+._w5wkeh7-3-12-0._w5wkeh2-3-12-0 {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._w5wkeh7-3-11-3._w5wkeh5-3-11-3 {
+._w5wkeh7-3-12-0._w5wkeh5-3-12-0 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._w5wkeh7-3-11-3._w5wkeh4-3-11-3 {
+._w5wkeh7-3-12-0._w5wkeh4-3-12-0 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._w5wkeh7-3-11-3._w5wkeh4-3-11-3._w5wkeh2-3-11-3 {
+._w5wkeh7-3-12-0._w5wkeh4-3-12-0._w5wkeh2-3-12-0 {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._w5wkeh8-3-11-3 {
+._w5wkeh8-3-12-0 {
   margin-top: var(--dt-spacings-size-4, 4px);
   margin-bottom: var(--dt-spacings-size-4, 4px);
   background-color: var(--dt-colors-border-neutral-default-active, #c6c7d5);
 }
-._w5wkeh2-3-11-3:not(._w5wkeh5-3-11-3) ._w5wkeh8-3-11-3 {
+._w5wkeh2-3-12-0:not(._w5wkeh5-3-12-0) ._w5wkeh8-3-12-0 {
   background-color: var(--dt-colors-border-critical-default-active, #f3bebd);
 }
-._w5wkeh9-3-11-3 {
+._w5wkeh9-3-12-0 {
   width: 100%;
 }
-._w5wkeha-3-11-3 {
+._w5wkeha-3-12-0 {
   width: fit-content;
 }
-._w5wkehb-3-11-3 {
+._w5wkehb-3-12-0 {
   min-width: 0;
   width: 100%;
   overflow-x: auto;
@@ -64,36 +64,36 @@
   scrollbar-width: none;
   scroll-behavior: smooth;
 }
-._w5wkehb-3-11-3::-webkit-scrollbar {
+._w5wkehb-3-12-0::-webkit-scrollbar {
   display: none;
 }
-._w5wkehc-3-11-3 {
+._w5wkehc-3-12-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;
 }
-._w5wkehd-3-11-3 {
+._w5wkehd-3-12-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;
 }
-._w5wkehe-3-11-3 {
+._w5wkehe-3-12-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;
 }
-._w5wkehf-3-11-3 {
+._w5wkehf-3-12-0 {
   position: absolute;
   top: 0;
   z-index: var(--dt-elevations-overlay, 20);
 }
-._1jgl8s50-3-11-3 ._w5wkehf-3-11-3:hover:not(._w5wkeh2-3-11-3 ._w5wkehf-3-11-3) {
-  --_bx32h3-3-11-3: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
+._1jgl8s50-3-12-0 ._w5wkehf-3-12-0:hover:not(._w5wkeh2-3-12-0 ._w5wkehf-3-12-0) {
+  --_bx32h3-3-12-0: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._1jgl8s50-3-11-3 ._w5wkehf-3-11-3:active:not(._w5wkeh2-3-11-3 ._w5wkehf-3-11-3) {
-  --_bx32h3-3-11-3: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
+._1jgl8s50-3-12-0 ._w5wkehf-3-12-0:active:not(._w5wkeh2-3-12-0 ._w5wkehf-3-12-0) {
+  --_bx32h3-3-12-0: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
 }
-._w5wkehg-3-11-3 {
+._w5wkehg-3-12-0 {
   justify-content: center;
   min-width: fit-content;
   width: 100%;
@@ -109,93 +109,93 @@
   line-height: var(--dt-typography-text-base-emphasized-line-height, 1.4285714286);
   cursor: pointer;
   scroll-margin: var(--dt-spacings-size-64, 64px);
-  box-shadow: var(--_w5wkeh0-3-11-3);
+  box-shadow: var(--_w5wkeh0-3-12-0);
 }
-._w5wkehg-3-11-3:hover {
+._w5wkehg-3-12-0:hover {
   background-color: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._w5wkehg-3-11-3:active {
+._w5wkehg-3-12-0:active {
   background-color: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
 }
-._1jgl8s50-3-11-3 ._w5wkehg-3-11-3 {
+._1jgl8s50-3-12-0 ._w5wkehg-3-12-0 {
   margin: 0;
   padding: 5px var(--dt-spacings-size-6, 6px);
   border-radius: 5px;
 }
-._w5wkeh2-3-11-3 ._w5wkehg-3-11-3 {
+._w5wkeh2-3-12-0 ._w5wkehg-3-12-0 {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._w5wkeh2-3-11-3 ._w5wkehg-3-11-3:hover {
+._w5wkeh2-3-12-0 ._w5wkehg-3-12-0:hover {
   background-color: var(--dt-colors-background-field-critical-default-hover, #f6d6d5);
 }
-._w5wkeh2-3-11-3 ._w5wkehg-3-11-3:active {
+._w5wkeh2-3-12-0 ._w5wkehg-3-12-0:active {
   background-color: var(--dt-colors-background-field-critical-default-active, #f5cac9);
 }
-._w5wkehg-3-11-3._w5wkeh3-3-11-3 {
+._w5wkehg-3-12-0._w5wkeh3-3-12-0 {
   cursor: not-allowed;
   background-color: transparent;
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._w5wkehg-3-11-3._w5wkeh3-3-11-3:hover {
+._w5wkehg-3-12-0._w5wkeh3-3-12-0:hover {
   background-color: transparent;
 }
-._w5wkehg-3-11-3._w5wkeh3-3-11-3:active {
+._w5wkehg-3-12-0._w5wkeh3-3-12-0:active {
   background-color: transparent;
 }
-._w5wkeh2-3-11-3 ._w5wkehg-3-11-3._w5wkeh3-3-11-3 {
+._w5wkeh2-3-12-0 ._w5wkehg-3-12-0._w5wkeh3-3-12-0 {
   color: var(--dt-colors-text-critical-disabled, #595a7d80);
 }
-._w5wkehg-3-11-3._w5wkeh4-3-11-3 {
+._w5wkehg-3-12-0._w5wkeh4-3-12-0 {
   cursor: default;
   background-color: var(--dt-colors-background-field-neutral-default, #e4e5eb00);
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._w5wkehg-3-11-3._w5wkeh4-3-11-3:hover {
+._w5wkehg-3-12-0._w5wkeh4-3-12-0:hover {
   background-color: var(--dt-colors-background-field-neutral-default, #e4e5eb00);
 }
-._w5wkehg-3-11-3._w5wkeh4-3-11-3:active {
+._w5wkehg-3-12-0._w5wkeh4-3-12-0:active {
   background-color: var(--dt-colors-background-field-neutral-default, #e4e5eb00);
 }
-._w5wkeh2-3-11-3 ._w5wkehg-3-11-3._w5wkeh4-3-11-3 {
+._w5wkeh2-3-12-0 ._w5wkehg-3-12-0._w5wkeh4-3-12-0 {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._w5wkehg-3-11-3._w5wkeh1-3-11-3 {
+._w5wkehg-3-12-0._w5wkeh1-3-12-0 {
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._w5wkehg-3-11-3._w5wkeh1-3-11-3:hover {
+._w5wkehg-3-12-0._w5wkeh1-3-12-0:hover {
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._w5wkehg-3-11-3._w5wkeh1-3-11-3:active {
+._w5wkehg-3-12-0._w5wkeh1-3-12-0:active {
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._w5wkehg-3-11-3._w5wkeh4-3-11-3._w5wkeh1-3-11-3:not(._w5wkeh2-3-11-3 ._w5wkehg-3-11-3) {
+._w5wkehg-3-12-0._w5wkeh4-3-12-0._w5wkeh1-3-12-0:not(._w5wkeh2-3-12-0 ._w5wkehg-3-12-0) {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._1jgl8s50-3-11-3 ._w5wkehg-3-11-3._w5wkeh1-3-11-3 {
-  --_w5wkeh0-3-11-3: var(--dt-box-shadows-field-neutral-emphasized-rest, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #fff);
+._1jgl8s50-3-12-0 ._w5wkehg-3-12-0._w5wkeh1-3-12-0 {
+  --_w5wkeh0-3-12-0: var(--dt-box-shadows-field-neutral-emphasized-rest, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #fff);
 }
-._1jgl8s50-3-11-3 ._w5wkehg-3-11-3._w5wkeh1-3-11-3._w5wkeh3-3-11-3 {
-  --_w5wkeh0-3-11-3: var(--dt-box-shadows-field-neutral-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
+._1jgl8s50-3-12-0 ._w5wkehg-3-12-0._w5wkeh1-3-12-0._w5wkeh3-3-12-0 {
+  --_w5wkeh0-3-12-0: var(--dt-box-shadows-field-neutral-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
 }
-._1jgl8s50-3-11-3 ._w5wkeh2-3-11-3 ._w5wkehg-3-11-3._w5wkeh1-3-11-3 {
-  --_w5wkeh0-3-11-3: var(--dt-box-shadows-field-critical-emphasized-rest, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f8e1e1);
+._1jgl8s50-3-12-0 ._w5wkeh2-3-12-0 ._w5wkehg-3-12-0._w5wkeh1-3-12-0 {
+  --_w5wkeh0-3-12-0: var(--dt-box-shadows-field-critical-emphasized-rest, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f8e1e1);
 }
-._1jgl8s50-3-11-3 ._w5wkeh2-3-11-3 ._w5wkehg-3-11-3._w5wkeh1-3-11-3._w5wkeh3-3-11-3 {
-  --_w5wkeh0-3-11-3: var(--dt-box-shadows-field-critical-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
+._1jgl8s50-3-12-0 ._w5wkeh2-3-12-0 ._w5wkehg-3-12-0._w5wkeh1-3-12-0._w5wkeh3-3-12-0 {
+  --_w5wkeh0-3-12-0: var(--dt-box-shadows-field-critical-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
 }
-._w5wkehg-3-11-3:first-child {
+._w5wkehg-3-12-0:first-child {
   margin-left: 1px;
 }
-._w5wkehg-3-11-3:last-child {
+._w5wkehg-3-12-0:last-child {
   margin-right: 1px;
 }
-._1jgl8s50-3-11-3 ._w5wkehg-3-11-3:first-child {
+._1jgl8s50-3-12-0 ._w5wkehg-3-12-0:first-child {
   margin-left: 0;
 }
-._1jgl8s50-3-11-3 ._w5wkehg-3-11-3:last-child {
+._1jgl8s50-3-12-0 ._w5wkehg-3-12-0:last-child {
   margin-right: 0;
 }
-._w5wkehh-3-11-3 {
+._w5wkehh-3-12-0 {
   padding-left: var(--dt-spacings-size-4, 4px);
   padding-right: var(--dt-spacings-size-4, 4px);
   overflow: hidden;
@@ -203,7 +203,7 @@
   white-space: nowrap;
   max-width: 100%;
 }
-._w5wkehi-3-11-3 {
+._w5wkehi-3-12-0 {
   min-width: 0;
   align-items: center;
 }

package/esm/forms/toggle-button-group/styles.sty.js

@@ -1,21 +1,21 @@
 import "../../core/components/app-root/AppRoot.css";
 import "../../styles/field.css";
 import "./styles.css";
-var checked = "_w5wkeh1-3-11-3";
-var container = "_w5wkeh7-3-11-3";
-var containerWidths = { full: "_w5wkeh9-3-11-3", content: "_w5wkeha-3-11-3" };
-var disabled = "_w5wkeh3-3-11-3";
-var disabledGroup = "_w5wkeh5-3-11-3";
-var divider = "_w5wkeh8-3-11-3";
-var error = "_w5wkeh2-3-11-3";
-var hidden = "_w5wkeh6-3-11-3";
-var item = "_w5wkehg-3-11-3";
-var readOnly = "_w5wkeh4-3-11-3";
-var scrollButton = "_w5wkehf-3-11-3";
-var scrollContainer = "_w5wkehb-3-11-3";
-var scrollVariants = { both: "_w5wkehc-3-11-3", left: "_w5wkehd-3-11-3", right: "_w5wkehe-3-11-3" };
-var text = "_w5wkehh-3-11-3";
-var textContainer = "_w5wkehi-3-11-3";
+var checked = "_w5wkeh1-3-12-0";
+var container = "_w5wkeh7-3-12-0";
+var containerWidths = { full: "_w5wkeh9-3-12-0", content: "_w5wkeha-3-12-0" };
+var disabled = "_w5wkeh3-3-12-0";
+var disabledGroup = "_w5wkeh5-3-12-0";
+var divider = "_w5wkeh8-3-12-0";
+var error = "_w5wkeh2-3-12-0";
+var hidden = "_w5wkeh6-3-12-0";
+var item = "_w5wkehg-3-12-0";
+var readOnly = "_w5wkeh4-3-12-0";
+var scrollButton = "_w5wkehf-3-12-0";
+var scrollContainer = "_w5wkehb-3-12-0";
+var scrollVariants = { both: "_w5wkehc-3-12-0", left: "_w5wkehd-3-12-0", right: "_w5wkehe-3-12-0" };
+var text = "_w5wkehh-3-12-0";
+var textContainer = "_w5wkehi-3-12-0";
 export {
   checked,
   container,

package/esm/forms/toggle-button-group/styles.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/toggle-button-group/styles.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport './styles.css';\nexport var checked = '_w5wkeh1-3-11-3';\nexport var container = '_w5wkeh7-3-11-3';\nexport var containerWidths = {full:'_w5wkeh9-3-11-3',content:'_w5wkeha-3-11-3'};\nexport var disabled = '_w5wkeh3-3-11-3';\nexport var disabledGroup = '_w5wkeh5-3-11-3';\nexport var divider = '_w5wkeh8-3-11-3';\nexport var error = '_w5wkeh2-3-11-3';\nexport var hidden = '_w5wkeh6-3-11-3';\nexport var item = '_w5wkehg-3-11-3';\nexport var readOnly = '_w5wkeh4-3-11-3';\nexport var scrollButton = '_w5wkehf-3-11-3';\nexport var scrollContainer = '_w5wkehb-3-11-3';\nexport var scrollVariants = {both:'_w5wkehc-3-11-3',left:'_w5wkehd-3-11-3',right:'_w5wkehe-3-11-3'};\nexport var text = '_w5wkehh-3-11-3';\nexport var textContainer = '_w5wkehi-3-11-3';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport './styles.css';\nexport var checked = '_w5wkeh1-3-12-0';\nexport var container = '_w5wkeh7-3-12-0';\nexport var containerWidths = {full:'_w5wkeh9-3-12-0',content:'_w5wkeha-3-12-0'};\nexport var disabled = '_w5wkeh3-3-12-0';\nexport var disabledGroup = '_w5wkeh5-3-12-0';\nexport var divider = '_w5wkeh8-3-12-0';\nexport var error = '_w5wkeh2-3-12-0';\nexport var hidden = '_w5wkeh6-3-12-0';\nexport var item = '_w5wkehg-3-12-0';\nexport var readOnly = '_w5wkeh4-3-12-0';\nexport var scrollButton = '_w5wkehf-3-12-0';\nexport var scrollContainer = '_w5wkehb-3-12-0';\nexport var scrollVariants = {both:'_w5wkehc-3-12-0',left:'_w5wkehd-3-12-0',right:'_w5wkehe-3-12-0'};\nexport var text = '_w5wkehh-3-12-0';\nexport var textContainer = '_w5wkehi-3-12-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,UAAU;AACd,IAAI,YAAY;AAChB,IAAI,kBAAkB,EAAC,MAAK,mBAAkB,SAAQ,kBAAiB;AACvE,IAAI,WAAW;AACf,IAAI,gBAAgB;AACpB,IAAI,UAAU;AACd,IAAI,QAAQ;AACZ,IAAI,SAAS;AACb,IAAI,OAAO;AACX,IAAI,WAAW;AACf,IAAI,eAAe;AACnB,IAAI,kBAAkB;AACtB,IAAI,iBAAiB,EAAC,MAAK,mBAAkB,MAAK,mBAAkB,OAAM,kBAAiB;AAC3F,IAAI,OAAO;AACX,IAAI,gBAAgB;",
   "names": []
 }

package/esm/forms/validation/validation-builders.js

@@ -41,11 +41,12 @@ function getValidationState(input, trigger, message, formControlId) {
     return { status: "done", trigger, errors: [] };
   }
   const resolvedMessage = message ?? element.validationMessage;
+  const resolvedFormControlId = (formControlId ?? element.id) || void 0;
   const errors = Object.values(NativeValidityStateKeys).filter((key) => element.validity[key.value]).map(
     (key) => new ValidationError(resolvedMessage, {
       source: "native",
       validityStateKey: key,
-      formControlId: element.id || void 0
+      formControlId: resolvedFormControlId
     })
   );
   return { status: "done", trigger, errors };

package/esm/forms/validation/validation-builders.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/validation/validation-builders.ts"],
-  "sourcesContent": ["import {\n  NativeValidityStateKeys,\n  StratoValidityStateKeys,\n  ValidationError,\n  ValidityStateKey,\n} from './types.js';\nimport type {\n  ValidationErrorSource,\n  ValidationState,\n  ValidationTrigger,\n} from './types.js';\n\ntype NativeValidationElement =\n  | HTMLInputElement\n  | HTMLSelectElement\n  | HTMLTextAreaElement\n  | null\n  | undefined;\n\ntype ValidationStateInput = NativeValidationElement | ValidityStateKey;\n\nfunction getValidityStateKeySource(\n  validityStateKey: ValidityStateKey,\n): ValidationErrorSource {\n  if (\n    Object.values(StratoValidityStateKeys).some((key) =>\n      key.equals(validityStateKey),\n    )\n  ) {\n    return 'strato';\n  }\n\n  if (\n    Object.values(NativeValidityStateKeys).some((key) =>\n      key.equals(validityStateKey),\n    )\n  ) {\n    return 'native';\n  }\n\n  return 'custom';\n}\n\n/**\n * Creates a {@link ValidationState} from a source-specific validation result.\n *\n * @remarks\n * When passing a native element, the caller is responsible for triggering\n * validation (e.g. `checkValidity()`) before calling this. Validity keys are\n * classified by comparing against the exported Native and Strato key registries;\n * unknown keys are treated as custom validation errors.\n *\n * @internal\n */\nexport function getValidationState(\n  input: ValidationStateInput,\n  trigger: ValidationTrigger,\n  message?: string,\n  formControlId?: string | string[],\n): ValidationState {\n  if (!input) {\n    return { status: 'done', trigger, errors: [] };\n  }\n\n  if (input instanceof ValidityStateKey) {\n    const validityStateKey = input;\n    const source = getValidityStateKeySource(validityStateKey);\n\n    return {\n      status: 'done',\n      trigger,\n      errors: [\n        new ValidationError(message ?? validityStateKey.value, {\n          source,\n          validityStateKey,\n          formControlId,\n        }),\n      ],\n    };\n  }\n\n  const element = input;\n\n  if (element.validity.valid) {\n    return { status: 'done', trigger, errors: [] };\n  }\n\n  const resolvedMessage = message ?? element.validationMessage;\n  const errors = Object.values(NativeValidityStateKeys)\n    .filter((key) => element.validity[key.value])\n    .map(\n      (key) =>\n        new ValidationError(resolvedMessage, {\n          source: 'native',\n          validityStateKey: key,\n          formControlId: element.id || undefined,\n        }),\n    );\n\n  return { status: 'done', trigger, errors };\n}\n"],
-  "mappings": "AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAgBP,SAAS,0BACP,kBACuB;AACvB,MACE,OAAO,OAAO,uBAAuB,EAAE;AAAA,IAAK,CAAC,QAC3C,IAAI,OAAO,gBAAgB;AAAA,EAC7B,GACA;AACA,WAAO;AAAA,EACT;AAEA,MACE,OAAO,OAAO,uBAAuB,EAAE;AAAA,IAAK,CAAC,QAC3C,IAAI,OAAO,gBAAgB;AAAA,EAC7B,GACA;AACA,WAAO;AAAA,EACT;AAEA,SAAO;AACT;AAaO,SAAS,mBACd,OACA,SACA,SACA,eACiB;AACjB,MAAI,CAAC,OAAO;AACV,WAAO,EAAE,QAAQ,QAAQ,SAAS,QAAQ,CAAC,EAAE;AAAA,EAC/C;AAEA,MAAI,iBAAiB,kBAAkB;AACrC,UAAM,mBAAmB;AACzB,UAAM,SAAS,0BAA0B,gBAAgB;AAEzD,WAAO;AAAA,MACL,QAAQ;AAAA,MACR;AAAA,MACA,QAAQ;AAAA,QACN,IAAI,gBAAgB,WAAW,iBAAiB,OAAO;AAAA,UACrD;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACH;AAAA,IACF;AAAA,EACF;AAEA,QAAM,UAAU;AAEhB,MAAI,QAAQ,SAAS,OAAO;AAC1B,WAAO,EAAE,QAAQ,QAAQ,SAAS,QAAQ,CAAC,EAAE;AAAA,EAC/C;AAEA,QAAM,kBAAkB,WAAW,QAAQ;AAC3C,QAAM,SAAS,OAAO,OAAO,uBAAuB,EACjD,OAAO,CAAC,QAAQ,QAAQ,SAAS,IAAI,KAAK,CAAC,EAC3C;AAAA,IACC,CAAC,QACC,IAAI,gBAAgB,iBAAiB;AAAA,MACnC,QAAQ;AAAA,MACR,kBAAkB;AAAA,MAClB,eAAe,QAAQ,MAAM;AAAA,IAC/B,CAAC;AAAA,EACL;AAEF,SAAO,EAAE,QAAQ,QAAQ,SAAS,OAAO;AAC3C;",
+  "sourcesContent": ["import {\n  NativeValidityStateKeys,\n  StratoValidityStateKeys,\n  ValidationError,\n  ValidityStateKey,\n} from './types.js';\nimport type {\n  ValidationErrorSource,\n  ValidationState,\n  ValidationTrigger,\n} from './types.js';\n\ntype NativeValidationElement =\n  | HTMLInputElement\n  | HTMLSelectElement\n  | HTMLTextAreaElement\n  | null\n  | undefined;\n\ntype ValidationStateInput = NativeValidationElement | ValidityStateKey;\n\nfunction getValidityStateKeySource(\n  validityStateKey: ValidityStateKey,\n): ValidationErrorSource {\n  if (\n    Object.values(StratoValidityStateKeys).some((key) =>\n      key.equals(validityStateKey),\n    )\n  ) {\n    return 'strato';\n  }\n\n  if (\n    Object.values(NativeValidityStateKeys).some((key) =>\n      key.equals(validityStateKey),\n    )\n  ) {\n    return 'native';\n  }\n\n  return 'custom';\n}\n\n/**\n * Creates a {@link ValidationState} from a source-specific validation result.\n *\n * @remarks\n * When passing a native element, the caller is responsible for triggering\n * validation (e.g. `checkValidity()`) before calling this. Validity keys are\n * classified by comparing against the exported Native and Strato key registries;\n * unknown keys are treated as custom validation errors.\n *\n * @internal\n */\nexport function getValidationState(\n  input: ValidationStateInput,\n  trigger: ValidationTrigger,\n  message?: string,\n  formControlId?: string | string[],\n): ValidationState {\n  if (!input) {\n    return { status: 'done', trigger, errors: [] };\n  }\n\n  if (input instanceof ValidityStateKey) {\n    const validityStateKey = input;\n    const source = getValidityStateKeySource(validityStateKey);\n\n    return {\n      status: 'done',\n      trigger,\n      errors: [\n        new ValidationError(message ?? validityStateKey.value, {\n          source,\n          validityStateKey,\n          formControlId,\n        }),\n      ],\n    };\n  }\n\n  const element = input;\n\n  if (element.validity.valid) {\n    return { status: 'done', trigger, errors: [] };\n  }\n\n  const resolvedMessage = message ?? element.validationMessage;\n  const resolvedFormControlId = (formControlId ?? element.id) || undefined;\n  const errors = Object.values(NativeValidityStateKeys)\n    .filter((key) => element.validity[key.value])\n    .map(\n      (key) =>\n        new ValidationError(resolvedMessage, {\n          source: 'native',\n          validityStateKey: key,\n          formControlId: resolvedFormControlId,\n        }),\n    );\n\n  return { status: 'done', trigger, errors };\n}\n"],
+  "mappings": "AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAgBP,SAAS,0BACP,kBACuB;AACvB,MACE,OAAO,OAAO,uBAAuB,EAAE;AAAA,IAAK,CAAC,QAC3C,IAAI,OAAO,gBAAgB;AAAA,EAC7B,GACA;AACA,WAAO;AAAA,EACT;AAEA,MACE,OAAO,OAAO,uBAAuB,EAAE;AAAA,IAAK,CAAC,QAC3C,IAAI,OAAO,gBAAgB;AAAA,EAC7B,GACA;AACA,WAAO;AAAA,EACT;AAEA,SAAO;AACT;AAaO,SAAS,mBACd,OACA,SACA,SACA,eACiB;AACjB,MAAI,CAAC,OAAO;AACV,WAAO,EAAE,QAAQ,QAAQ,SAAS,QAAQ,CAAC,EAAE;AAAA,EAC/C;AAEA,MAAI,iBAAiB,kBAAkB;AACrC,UAAM,mBAAmB;AACzB,UAAM,SAAS,0BAA0B,gBAAgB;AAEzD,WAAO;AAAA,MACL,QAAQ;AAAA,MACR;AAAA,MACA,QAAQ;AAAA,QACN,IAAI,gBAAgB,WAAW,iBAAiB,OAAO;AAAA,UACrD;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACH;AAAA,IACF;AAAA,EACF;AAEA,QAAM,UAAU;AAEhB,MAAI,QAAQ,SAAS,OAAO;AAC1B,WAAO,EAAE,QAAQ,QAAQ,SAAS,QAAQ,CAAC,EAAE;AAAA,EAC/C;AAEA,QAAM,kBAAkB,WAAW,QAAQ;AAC3C,QAAM,yBAAyB,iBAAiB,QAAQ,OAAO;AAC/D,QAAM,SAAS,OAAO,OAAO,uBAAuB,EACjD,OAAO,CAAC,QAAQ,QAAQ,SAAS,IAAI,KAAK,CAAC,EAC3C;AAAA,IACC,CAAC,QACC,IAAI,gBAAgB,iBAAiB;AAAA,MACnC,QAAQ;AAAA,MACR,kBAAkB;AAAA,MAClB,eAAe;AAAA,IACjB,CAAC;AAAA,EACL;AAEF,SAAO,EAAE,QAAQ,QAAQ,SAAS,OAAO;AAC3C;",
   "names": []
 }

package/esm/layouts/app-header/ActionItems.js

@@ -125,7 +125,8 @@ const ActionItems = forwardRef(({ children, className, style, "data-testid": dat
                     {
                       orientation: "vertical",
                       flexItem: false,
-                      style: { height: 20 }
+                      style: { height: 20 },
+                      "aria-hidden": true
                     }
                   ) : null,
                   Object.entries(slots.actionGroups).map(
@@ -135,7 +136,8 @@ const ActionItems = forwardRef(({ children, className, style, "data-testid": dat
                         {
                           orientation: "vertical",
                           flexItem: false,
-                          style: { height: 20 }
+                          style: { height: 20 },
+                          "aria-hidden": true
                         }
                       ),
                       actions.map((action) => {

package/esm/layouts/app-header/ActionItems.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/app-header/ActionItems.tsx"],
-  "sourcesContent": ["import {\n  forwardRef,\n  isValidElement,\n  useMemo,\n  useRef,\n  type ReactElement,\n  type ReactNode,\n  Children,\n  Fragment,\n  cloneElement,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { DotMenuIcon } from '@dynatrace/strato-icons';\n\nimport {\n  ActionButton,\n  isAppHeaderActionButton,\n  type AppHeaderActionButtonOwnProps,\n} from './ActionButton.js';\nimport { ActionItemGroup } from './ActionItemGroup.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useContainerSize } from '../../core/hooks/useContainerSize.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 { isSlot } from '../../core/utils/is-slot.js';\nimport { Menu } from '../../navigation/menu/Menu.js';\nimport { Tooltip } from '../../overlays/tooltip/Tooltip.js';\nimport type { TooltipProps } from '../../overlays/tooltip/tooltip.types.js';\nimport { Divider } from '../divider/Divider.js';\nimport { Flex } from '../flex/Flex.js';\n\nfunction getSlots(children: ReactNode) {\n  const actions: ReactElement<AppHeaderActionButtonOwnProps | TooltipProps>[] =\n    [];\n  const actionGroups: {\n    [groupId: string]: ReactElement<\n      AppHeaderActionButtonOwnProps | TooltipProps\n    >[];\n  } = {};\n  const custom: ReactNode[] = [];\n\n  let groupCounter = 0;\n\n  for (const child of Children.toArray(children)) {\n    if (!isValidElement(child)) {\n      continue;\n    }\n\n    if (isSlot(child, ActionItemGroup)) {\n      groupCounter++;\n      actionGroups[groupCounter] = [];\n      const actionGroup = actionGroups[groupCounter];\n\n      const validChildren = Children.toArray(child.props.children).filter(\n        (\n          validChild,\n        ): validChild is ReactElement<\n          AppHeaderActionButtonOwnProps | TooltipProps\n        > =>\n          (isSlot(validChild, Tooltip) &&\n            isSlot(validChild.props.children, ActionButton)) ||\n          isSlot(validChild, ActionButton),\n      );\n\n      validChildren.forEach((validChild) => actionGroup.push(validChild));\n    } else if (isAppHeaderActionButton(child)) {\n      const childWithKey = cloneElement<AppHeaderActionButtonOwnProps>(child, {\n        key: child.key ?? crypto.randomUUID(),\n      });\n      actions.push(childWithKey);\n    } else if (\n      isSlot(child, Tooltip) &&\n      isSlot(child.props.children, ActionButton)\n    ) {\n      actions.push(child);\n    } else {\n      const childWithKey = cloneElement(child, {\n        key: child.key ?? crypto.randomUUID(),\n      });\n      custom.push(childWithKey);\n    }\n  }\n  return { actions, actionGroups, custom };\n}\n\nfunction useCollapse() {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n  const containerSize = useContainerSize(containerRef);\n  const contentSize = useContainerSize(contentRef);\n\n  return {\n    isOverflowing: contentSize.width > containerSize.width,\n    containerRef,\n    contentRef,\n  };\n}\n\n/**\n * @public\n */\nexport interface AppHeaderActionItemsProps\n  extends WithChildren, StylingProps, DataTestId {}\n\n/**\n * The action items section of the AppHeader, which collapses into an overlay on small screen sizes.\n * @public\n */\nexport const ActionItems = forwardRef<\n  HTMLDivElement,\n  AppHeaderActionItemsProps\n>(({ children, className, style, 'data-testid': dataTestId, ...rest }, ref) => {\n  const slots = useMemo(() => getSlots(children), [children]);\n  const collapse = useCollapse();\n  const intl = useIntl();\n\n  const hasActions = slots.actions.length > 0;\n  const hasGroups = Object.entries(slots.actionGroups).length > 0;\n\n  const isCollapsedIntoMenu =\n    collapse.isOverflowing && (hasActions || hasGroups);\n\n  return (\n    <>\n      <Flex\n        ref={ref}\n        alignItems=\"center\"\n        justifyContent=\"flex-end\"\n        flexGrow={1}\n        flexShrink={0}\n        flexBasis={hasActions || hasGroups ? 0 : 'auto'}\n        minWidth={0}\n        style={style}\n        className={className}\n        data-testid={dataTestId}\n      >\n        <Flex\n          {...rest}\n          ref={collapse.containerRef}\n          justifyContent=\"flex-end\"\n          alignItems=\"center\"\n          flexGrow={1}\n          minWidth={0}\n          hidden={collapse.isOverflowing}\n          style={{\n            visibility: collapse.isOverflowing ? 'hidden' : undefined,\n            flexBasis: collapse.isOverflowing ? 0 : undefined,\n          }}\n        >\n          <Flex\n            gap={4}\n            style={{ minWidth: 'max-content' }}\n            ref={collapse.contentRef}\n            alignItems=\"center\"\n          >\n            {/**\n             * `slots.custom` is intentionally rendered conditionally even if the parent is hidden.\n             * This ensures correct flex sizing calculations to determine whether the actions can fit or need to collapse.\n             */}\n            {collapse.isOverflowing ? null : slots.custom}\n            {slots.actions.map((action) => {\n              if (isSlot(action, ActionButton)) {\n                const { prefixIcon, children, showLabel, ...rest } =\n                  action.props;\n\n                return (\n                  <Button {...rest} key={action.key} variant=\"emphasized\">\n                    {prefixIcon ? (\n                      <Button.Prefix>{prefixIcon}</Button.Prefix>\n                    ) : null}\n                    {children}\n                  </Button>\n                );\n              } else if (\n                isSlot(action, Tooltip) &&\n                isSlot(action.props.children, ActionButton)\n              ) {\n                return action;\n              }\n\n              return null;\n            })}\n\n            {hasActions && hasGroups ? (\n              <Divider\n                orientation=\"vertical\"\n                flexItem={false}\n                style={{ height: 20 }}\n              />\n            ) : null}\n\n            {Object.entries(slots.actionGroups).map(\n              ([key, actions], actionGroupIndex) => (\n                <Fragment key={key}>\n                  {actionGroupIndex !== 0 && (\n                    <Divider\n                      orientation=\"vertical\"\n                      flexItem={false}\n                      style={{ height: 20 }}\n                    />\n                  )}\n                  {actions.map((action) => {\n                    if (isSlot(action, ActionButton)) {\n                      const { prefixIcon, children, showLabel, ...rest } =\n                        action.props;\n\n                      return (\n                        <Button {...rest} key={action.key} variant=\"emphasized\">\n                          {prefixIcon ? (\n                            <Button.Prefix>{prefixIcon}</Button.Prefix>\n                          ) : null}\n                          {children}\n                        </Button>\n                      );\n                    } else if (\n                      isSlot(action, Tooltip) &&\n                      isSlot(action.props.children, ActionButton)\n                    ) {\n                      return action;\n                    }\n\n                    return null;\n                  })}\n                </Fragment>\n              ),\n            )}\n          </Flex>\n        </Flex>\n      </Flex>\n      {collapse.isOverflowing ? (\n        <Flex gap={4} alignItems=\"center\">\n          {slots.custom}\n        </Flex>\n      ) : null}\n      {isCollapsedIntoMenu ? (\n        <Menu>\n          <Menu.Trigger>\n            <Button\n              variant=\"default\"\n              aria-label={intl.formatMessage({\n                id: 'L/D6X7Ee5PYWzl3i',\n                defaultMessage: 'Show more actions',\n              })}\n            >\n              <Button.Prefix>\n                <DotMenuIcon />\n              </Button.Prefix>\n            </Button>\n          </Menu.Trigger>\n          <Menu.Content>\n            <Menu.Group>\n              {slots.actions.map((action) => {\n                if (isSlot(action, ActionButton)) {\n                  const { prefixIcon, children, showLabel, onClick, ...rest } =\n                    action.props;\n\n                  return (\n                    <Menu.Item\n                      {...rest}\n                      key={action.key}\n                      onSelect={\n                        (onClick ? onClick : () => undefined) as () => void\n                      } // onClick of ActionButton type expects a MouseEvent at the moment, should maybe be widened\n                    >\n                      {prefixIcon ? (\n                        <Menu.Prefix>{prefixIcon}</Menu.Prefix>\n                      ) : null}\n                      {children}\n                    </Menu.Item>\n                  );\n                } else if (\n                  isSlot(action, Tooltip) &&\n                  isSlot(action.props.children, ActionButton)\n                ) {\n                  return (\n                    <Menu.Item\n                      onSelect={\n                        (action.props.children.props.onClick\n                          ? action.props.children.props.onClick\n                          : () => undefined) as () => void\n                      } // onClick of ActionButton type expects a MouseEvent at the moment, should maybe be widened\n                      {...action.props.children}\n                    >\n                      {action.props.children.props.prefixIcon ? (\n                        <Menu.Prefix>\n                          {action.props.children.props.prefixIcon}\n                        </Menu.Prefix>\n                      ) : null}\n                      {action.props.children.props.children}\n                      <Menu.ItemTooltip>{action.props.text}</Menu.ItemTooltip>\n                    </Menu.Item>\n                  );\n                }\n\n                return null;\n              })}\n            </Menu.Group>\n            {Object.entries(slots.actionGroups).map(([groupId, actions]) => (\n              <Menu.Group key={groupId}>\n                {actions.map((action) => {\n                  if (isSlot(action, ActionButton)) {\n                    const {\n                      prefixIcon,\n                      children,\n                      showLabel,\n                      onClick,\n                      ...rest\n                    } = action.props;\n\n                    return (\n                      <Menu.Item\n                        {...rest}\n                        key={action.key}\n                        onSelect={\n                          (onClick ? onClick : () => undefined) as () => void\n                        } // onClick of ActionButton type expects a MouseEvent at the moment, should maybe be widened\n                      >\n                        {prefixIcon ? (\n                          <Menu.Prefix>{prefixIcon}</Menu.Prefix>\n                        ) : null}\n                        {children}\n                      </Menu.Item>\n                    );\n                  } else if (\n                    isSlot(action, Tooltip) &&\n                    isSlot(action.props.children, ActionButton)\n                  ) {\n                    return (\n                      <Menu.Item\n                        onSelect={\n                          (action.props.children.props.onClick\n                            ? action.props.children.props.onClick\n                            : () => undefined) as () => void\n                        } // onClick of ActionButton type expects a MouseEvent at the moment, should maybe be widened\n                        {...action.props.children}\n                      >\n                        {action.props.children.props.prefixIcon ? (\n                          <Menu.Prefix>\n                            {action.props.children.props.prefixIcon}\n                          </Menu.Prefix>\n                        ) : null}\n                        {action.props.children.props.children}\n                        <Menu.ItemTooltip>{action.props.text}</Menu.ItemTooltip>\n                      </Menu.Item>\n                    );\n                  }\n\n                  return null;\n                })}\n              </Menu.Group>\n            ))}\n          </Menu.Content>\n        </Menu>\n      ) : null}\n    </>\n  );\n});\n\n(ActionItems as typeof ActionItems & { displayName: string }).displayName =\n  'AppHeader.ActionItems';\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  forwardRef,\n  isValidElement,\n  useMemo,\n  useRef,\n  type ReactElement,\n  type ReactNode,\n  Children,\n  Fragment,\n  cloneElement,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { DotMenuIcon } from '@dynatrace/strato-icons';\n\nimport {\n  ActionButton,\n  isAppHeaderActionButton,\n  type AppHeaderActionButtonOwnProps,\n} from './ActionButton.js';\nimport { ActionItemGroup } from './ActionItemGroup.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useContainerSize } from '../../core/hooks/useContainerSize.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 { isSlot } from '../../core/utils/is-slot.js';\nimport { Menu } from '../../navigation/menu/Menu.js';\nimport { Tooltip } from '../../overlays/tooltip/Tooltip.js';\nimport type { TooltipProps } from '../../overlays/tooltip/tooltip.types.js';\nimport { Divider } from '../divider/Divider.js';\nimport { Flex } from '../flex/Flex.js';\n\nfunction getSlots(children: ReactNode) {\n  const actions: ReactElement<AppHeaderActionButtonOwnProps | TooltipProps>[] =\n    [];\n  const actionGroups: {\n    [groupId: string]: ReactElement<\n      AppHeaderActionButtonOwnProps | TooltipProps\n    >[];\n  } = {};\n  const custom: ReactNode[] = [];\n\n  let groupCounter = 0;\n\n  for (const child of Children.toArray(children)) {\n    if (!isValidElement(child)) {\n      continue;\n    }\n\n    if (isSlot(child, ActionItemGroup)) {\n      groupCounter++;\n      actionGroups[groupCounter] = [];\n      const actionGroup = actionGroups[groupCounter];\n\n      const validChildren = Children.toArray(child.props.children).filter(\n        (\n          validChild,\n        ): validChild is ReactElement<\n          AppHeaderActionButtonOwnProps | TooltipProps\n        > =>\n          (isSlot(validChild, Tooltip) &&\n            isSlot(validChild.props.children, ActionButton)) ||\n          isSlot(validChild, ActionButton),\n      );\n\n      validChildren.forEach((validChild) => actionGroup.push(validChild));\n    } else if (isAppHeaderActionButton(child)) {\n      const childWithKey = cloneElement<AppHeaderActionButtonOwnProps>(child, {\n        key: child.key ?? crypto.randomUUID(),\n      });\n      actions.push(childWithKey);\n    } else if (\n      isSlot(child, Tooltip) &&\n      isSlot(child.props.children, ActionButton)\n    ) {\n      actions.push(child);\n    } else {\n      const childWithKey = cloneElement(child, {\n        key: child.key ?? crypto.randomUUID(),\n      });\n      custom.push(childWithKey);\n    }\n  }\n  return { actions, actionGroups, custom };\n}\n\nfunction useCollapse() {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n  const containerSize = useContainerSize(containerRef);\n  const contentSize = useContainerSize(contentRef);\n\n  return {\n    isOverflowing: contentSize.width > containerSize.width,\n    containerRef,\n    contentRef,\n  };\n}\n\n/**\n * @public\n */\nexport interface AppHeaderActionItemsProps\n  extends WithChildren, StylingProps, DataTestId {}\n\n/**\n * The action items section of the AppHeader, which collapses into an overlay on small screen sizes.\n * @public\n */\nexport const ActionItems = forwardRef<\n  HTMLDivElement,\n  AppHeaderActionItemsProps\n>(({ children, className, style, 'data-testid': dataTestId, ...rest }, ref) => {\n  const slots = useMemo(() => getSlots(children), [children]);\n  const collapse = useCollapse();\n  const intl = useIntl();\n\n  const hasActions = slots.actions.length > 0;\n  const hasGroups = Object.entries(slots.actionGroups).length > 0;\n\n  const isCollapsedIntoMenu =\n    collapse.isOverflowing && (hasActions || hasGroups);\n\n  return (\n    <>\n      <Flex\n        ref={ref}\n        alignItems=\"center\"\n        justifyContent=\"flex-end\"\n        flexGrow={1}\n        flexShrink={0}\n        flexBasis={hasActions || hasGroups ? 0 : 'auto'}\n        minWidth={0}\n        style={style}\n        className={className}\n        data-testid={dataTestId}\n      >\n        <Flex\n          {...rest}\n          ref={collapse.containerRef}\n          justifyContent=\"flex-end\"\n          alignItems=\"center\"\n          flexGrow={1}\n          minWidth={0}\n          hidden={collapse.isOverflowing}\n          style={{\n            visibility: collapse.isOverflowing ? 'hidden' : undefined,\n            flexBasis: collapse.isOverflowing ? 0 : undefined,\n          }}\n        >\n          <Flex\n            gap={4}\n            style={{ minWidth: 'max-content' }}\n            ref={collapse.contentRef}\n            alignItems=\"center\"\n          >\n            {/**\n             * `slots.custom` is intentionally rendered conditionally even if the parent is hidden.\n             * This ensures correct flex sizing calculations to determine whether the actions can fit or need to collapse.\n             */}\n            {collapse.isOverflowing ? null : slots.custom}\n            {slots.actions.map((action) => {\n              if (isSlot(action, ActionButton)) {\n                const { prefixIcon, children, showLabel, ...rest } =\n                  action.props;\n\n                return (\n                  <Button {...rest} key={action.key} variant=\"emphasized\">\n                    {prefixIcon ? (\n                      <Button.Prefix>{prefixIcon}</Button.Prefix>\n                    ) : null}\n                    {children}\n                  </Button>\n                );\n              } else if (\n                isSlot(action, Tooltip) &&\n                isSlot(action.props.children, ActionButton)\n              ) {\n                return action;\n              }\n\n              return null;\n            })}\n\n            {hasActions && hasGroups ? (\n              <Divider\n                orientation=\"vertical\"\n                flexItem={false}\n                style={{ height: 20 }}\n                aria-hidden\n              />\n            ) : null}\n\n            {Object.entries(slots.actionGroups).map(\n              ([key, actions], actionGroupIndex) => (\n                <Fragment key={key}>\n                  {actionGroupIndex !== 0 && (\n                    <Divider\n                      orientation=\"vertical\"\n                      flexItem={false}\n                      style={{ height: 20 }}\n                      aria-hidden\n                    />\n                  )}\n                  {actions.map((action) => {\n                    if (isSlot(action, ActionButton)) {\n                      const { prefixIcon, children, showLabel, ...rest } =\n                        action.props;\n\n                      return (\n                        <Button {...rest} key={action.key} variant=\"emphasized\">\n                          {prefixIcon ? (\n                            <Button.Prefix>{prefixIcon}</Button.Prefix>\n                          ) : null}\n                          {children}\n                        </Button>\n                      );\n                    } else if (\n                      isSlot(action, Tooltip) &&\n                      isSlot(action.props.children, ActionButton)\n                    ) {\n                      return action;\n                    }\n\n                    return null;\n                  })}\n                </Fragment>\n              ),\n            )}\n          </Flex>\n        </Flex>\n      </Flex>\n      {collapse.isOverflowing ? (\n        <Flex gap={4} alignItems=\"center\">\n          {slots.custom}\n        </Flex>\n      ) : null}\n      {isCollapsedIntoMenu ? (\n        <Menu>\n          <Menu.Trigger>\n            <Button\n              variant=\"default\"\n              aria-label={intl.formatMessage({\n                id: 'L/D6X7Ee5PYWzl3i',\n                defaultMessage: 'Show more actions',\n              })}\n            >\n              <Button.Prefix>\n                <DotMenuIcon />\n              </Button.Prefix>\n            </Button>\n          </Menu.Trigger>\n          <Menu.Content>\n            <Menu.Group>\n              {slots.actions.map((action) => {\n                if (isSlot(action, ActionButton)) {\n                  const { prefixIcon, children, showLabel, onClick, ...rest } =\n                    action.props;\n\n                  return (\n                    <Menu.Item\n                      {...rest}\n                      key={action.key}\n                      onSelect={\n                        (onClick ? onClick : () => undefined) as () => void\n                      } // onClick of ActionButton type expects a MouseEvent at the moment, should maybe be widened\n                    >\n                      {prefixIcon ? (\n                        <Menu.Prefix>{prefixIcon}</Menu.Prefix>\n                      ) : null}\n                      {children}\n                    </Menu.Item>\n                  );\n                } else if (\n                  isSlot(action, Tooltip) &&\n                  isSlot(action.props.children, ActionButton)\n                ) {\n                  return (\n                    <Menu.Item\n                      onSelect={\n                        (action.props.children.props.onClick\n                          ? action.props.children.props.onClick\n                          : () => undefined) as () => void\n                      } // onClick of ActionButton type expects a MouseEvent at the moment, should maybe be widened\n                      {...action.props.children}\n                    >\n                      {action.props.children.props.prefixIcon ? (\n                        <Menu.Prefix>\n                          {action.props.children.props.prefixIcon}\n                        </Menu.Prefix>\n                      ) : null}\n                      {action.props.children.props.children}\n                      <Menu.ItemTooltip>{action.props.text}</Menu.ItemTooltip>\n                    </Menu.Item>\n                  );\n                }\n\n                return null;\n              })}\n            </Menu.Group>\n            {Object.entries(slots.actionGroups).map(([groupId, actions]) => (\n              <Menu.Group key={groupId}>\n                {actions.map((action) => {\n                  if (isSlot(action, ActionButton)) {\n                    const {\n                      prefixIcon,\n                      children,\n                      showLabel,\n                      onClick,\n                      ...rest\n                    } = action.props;\n\n                    return (\n                      <Menu.Item\n                        {...rest}\n                        key={action.key}\n                        onSelect={\n                          (onClick ? onClick : () => undefined) as () => void\n                        } // onClick of ActionButton type expects a MouseEvent at the moment, should maybe be widened\n                      >\n                        {prefixIcon ? (\n                          <Menu.Prefix>{prefixIcon}</Menu.Prefix>\n                        ) : null}\n                        {children}\n                      </Menu.Item>\n                    );\n                  } else if (\n                    isSlot(action, Tooltip) &&\n                    isSlot(action.props.children, ActionButton)\n                  ) {\n                    return (\n                      <Menu.Item\n                        onSelect={\n                          (action.props.children.props.onClick\n                            ? action.props.children.props.onClick\n                            : () => undefined) as () => void\n                        } // onClick of ActionButton type expects a MouseEvent at the moment, should maybe be widened\n                        {...action.props.children}\n                      >\n                        {action.props.children.props.prefixIcon ? (\n                          <Menu.Prefix>\n                            {action.props.children.props.prefixIcon}\n                          </Menu.Prefix>\n                        ) : null}\n                        {action.props.children.props.children}\n                        <Menu.ItemTooltip>{action.props.text}</Menu.ItemTooltip>\n                      </Menu.Item>\n                    );\n                  }\n\n                  return null;\n                })}\n              </Menu.Group>\n            ))}\n          </Menu.Content>\n        </Menu>\n      ) : null}\n    </>\n  );\n});\n\n(ActionItems as typeof ActionItems & { displayName: string }).displayName =\n  'AppHeader.ActionItems';\n"],
+  "mappings": "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",
   "names": ["Fragment", "children", "rest"]
 }

package/esm/layouts/app-header/AppHeader.css

@@ -1,4 +1,4 @@
-._8j2khp0-3-11-3 {
+._8j2khp0-3-12-0 {
   position: relative;
   display: flex;
   align-items: center;

package/esm/layouts/app-header/AppHeader.js

@@ -82,7 +82,8 @@ const AppHeaderRoot = forwardRef(
             {
               orientation: "vertical",
               flexItem: false,
-              style: { height: 20 }
+              style: { height: 20 },
+              "aria-hidden": true
             }
           ) : null,
           slots.menus

package/esm/layouts/app-header/AppHeader.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/app-header/AppHeader.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { Children, forwardRef, type ReactNode, useMemo } from 'react';\n\nimport { ActionButton } from './ActionButton.js';\nimport { ActionItemGroup } from './ActionItemGroup.js';\nimport { ActionItems } from './ActionItems.js';\nimport { AppIcon } from './app-icon/AppIcon.js';\nimport * as styles from './AppHeader.sty.js';\nimport { Logo } from './Logo.js';\nimport { Menus } from './Menus.js';\nimport { Navigation, NavigationItem } from './Navigation.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { OverlayStackingProvider } from '../../core/providers/OverlayStackingProvider.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { isDev } from '../../core/utils/is-node-environment.js';\nimport { isSlot } from '../../core/utils/is-slot.js';\nimport { Divider } from '../divider/Divider.js';\nimport { HelpMenu } from '../help-menu/HelpMenu.js';\n\nconst COMPONENT_NAME = 'AppHeader';\n\ntype Slots = {\n  actions?: ReactNode;\n  menus?: ReactNode;\n  navigation: ReactNode;\n};\n\nfunction getItemSlots(children: ReactNode) {\n  const slots: Slots = {\n    navigation: <AppHeader.Navigation />,\n  };\n\n  for (const child of Children.toArray(children)) {\n    if (isSlot(child, ActionItems)) {\n      slots.actions = child;\n      continue;\n    }\n\n    if (isSlot(child, HelpMenu)) {\n      slots.menus = (\n        <>\n          {slots.menus}\n          {child}\n        </>\n      );\n      continue;\n    }\n\n    if (isSlot(child, Menus)) {\n      slots.menus = (\n        <>\n          {child}\n          {slots.menus}\n        </>\n      );\n      continue;\n    }\n\n    if (isSlot(child, Navigation)) {\n      slots.navigation = child;\n      continue;\n    }\n\n    if (isDev()) {\n      // eslint-disable-next-line no-console\n      console.warn('The used child is not supported by the AppHeader.');\n    }\n  }\n  return slots;\n}\n\n/**\n * @public\n */\nexport interface AppHeaderProps\n  extends StylingProps,\n    DataTestId,\n    MaskingProps,\n    BehaviorTrackingProps,\n    WithChildren {}\n\nconst AppHeaderRoot = forwardRef<HTMLDivElement, AppHeaderProps>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      ...remainingProps\n    } = props;\n    const slots = useMemo(() => getItemSlots(children), [children]);\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n\n    return (\n      <header\n        {...restProps}\n        {...behavioralTrackingProps}\n        ref={forwardedRef}\n        className={clsx(styles.header, consumerClassName)}\n        style={consumerStyle}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <OverlayStackingProvider>\n          {slots.navigation}\n          {slots.actions}\n          {slots.actions && slots.menus ? (\n            <Divider\n              orientation=\"vertical\"\n              flexItem={false}\n              style={{ height: 20 }}\n            />\n          ) : null}\n          {slots.menus}\n        </OverlayStackingProvider>\n      </header>\n    );\n  },\n);\n\n(AppHeaderRoot as typeof AppHeaderRoot & { displayName: string }).displayName =\n  'AppHeader';\n\n/**\n * Use the `AppHeader` to provide a persistent responsive header with app navigation, home button, and global action items available throughout your app.\n * @public\n */\nexport const AppHeader = Object.assign(AppHeaderRoot, {\n  // DEPRECATION: [APPDEV-14264] BREAKING-CHANGE: AppHeader: Remove old NavItems API.\n  /**\n   * @deprecated use {@link AppHeader.Logo}\n   */\n  AppNavLink: Logo,\n  // DEPRECATION: [APPDEV-14264] BREAKING-CHANGE: AppHeader: Remove old NavItems API.\n  /**\n   * @deprecated use {@link AppHeader.Navigation}\n   */\n  NavItems: Navigation,\n  // DEPRECATION: [APPDEV-14264] BREAKING-CHANGE: AppHeader: Remove old NavItems API.\n  /**\n   * @deprecated use {@link AppHeader.NavigationItem}\n   */\n  NavItem: NavigationItem,\n  AppIcon,\n  ActionItems,\n  ActionItemGroup,\n  ActionButton,\n  Logo,\n  Menus,\n  Navigation,\n  NavigationItem,\n});\n"],
-  "mappings": "AAiCgB,SAWR,UAXQ,KAWR,YAXQ;AAjChB,OAAO,UAAU;AACjB,SAAS,UAAU,YAA4B,eAAe;AAE9D,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,eAAe;AACxB,YAAY,YAAY;AACxB,SAAS,YAAY;AACrB,SAAS,aAAa;AACtB,SAAS,YAAY,sBAAsB;AAC3C,SAAS,kCAAkC;AAC3C,SAAS,+BAA+B;AAMxC,SAAS,aAAa;AACtB,SAAS,cAAc;AACvB,SAAS,eAAe;AACxB,SAAS,gBAAgB;AAEzB,MAAM,iBAAiB;AAQvB,SAAS,aAAa,UAAqB;AACzC,QAAM,QAAe;AAAA,IACnB,YAAY,oBAAC,UAAU,YAAV,EAAqB;AAAA,EACpC;AAEA,aAAW,SAAS,SAAS,QAAQ,QAAQ,GAAG;AAC9C,QAAI,OAAO,OAAO,WAAW,GAAG;AAC9B,YAAM,UAAU;AAChB;AAAA,IACF;AAEA,QAAI,OAAO,OAAO,QAAQ,GAAG;AAC3B,YAAM,QACJ,iCACG;AAAA,cAAM;AAAA,QACN;AAAA,SACH;AAEF;AAAA,IACF;AAEA,QAAI,OAAO,OAAO,KAAK,GAAG;AACxB,YAAM,QACJ,iCACG;AAAA;AAAA,QACA,MAAM;AAAA,SACT;AAEF;AAAA,IACF;AAEA,QAAI,OAAO,OAAO,UAAU,GAAG;AAC7B,YAAM,aAAa;AACnB;AAAA,IACF;AAEA,QAAI,MAAM,GAAG;AAEX,cAAQ,KAAK,mDAAmD;AAAA,IAClE;AAAA,EACF;AACA,SAAO;AACT;AAYA,MAAM,gBAAgB;AAAA,EACpB,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAe;AAAA,MACf,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,GAAG;AAAA,IACL,IAAI;AACJ,UAAM,QAAQ,QAAQ,MAAM,aAAa,QAAQ,GAAG,CAAC,QAAQ,CAAC;AAE9D,UAAM,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAE3C,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACH,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,WAAW,KAAK,OAAO,QAAQ,iBAAiB;AAAA,QAChD,OAAO;AAAA,QACP,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB,qBAAmB;AAAA,QAEnB,+BAAC,2BACE;AAAA,gBAAM;AAAA,UACN,MAAM;AAAA,UACN,MAAM,WAAW,MAAM,QACtB;AAAA,YAAC;AAAA;AAAA,cACC,aAAY;AAAA,cACZ,UAAU;AAAA,cACV,OAAO,EAAE,QAAQ,GAAG;AAAA;AAAA,UACtB,IACE;AAAA,UACH,MAAM;AAAA,WACT;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEC,cAAiE,cAChE;AAMK,MAAM,YAAY,OAAO,OAAO,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA,EAKpD,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,EAKZ,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAKV,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { Children, forwardRef, type ReactNode, useMemo } from 'react';\n\nimport { ActionButton } from './ActionButton.js';\nimport { ActionItemGroup } from './ActionItemGroup.js';\nimport { ActionItems } from './ActionItems.js';\nimport { AppIcon } from './app-icon/AppIcon.js';\nimport * as styles from './AppHeader.sty.js';\nimport { Logo } from './Logo.js';\nimport { Menus } from './Menus.js';\nimport { Navigation, NavigationItem } from './Navigation.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { OverlayStackingProvider } from '../../core/providers/OverlayStackingProvider.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { isDev } from '../../core/utils/is-node-environment.js';\nimport { isSlot } from '../../core/utils/is-slot.js';\nimport { Divider } from '../divider/Divider.js';\nimport { HelpMenu } from '../help-menu/HelpMenu.js';\n\nconst COMPONENT_NAME = 'AppHeader';\n\ntype Slots = {\n  actions?: ReactNode;\n  menus?: ReactNode;\n  navigation: ReactNode;\n};\n\nfunction getItemSlots(children: ReactNode) {\n  const slots: Slots = {\n    navigation: <AppHeader.Navigation />,\n  };\n\n  for (const child of Children.toArray(children)) {\n    if (isSlot(child, ActionItems)) {\n      slots.actions = child;\n      continue;\n    }\n\n    if (isSlot(child, HelpMenu)) {\n      slots.menus = (\n        <>\n          {slots.menus}\n          {child}\n        </>\n      );\n      continue;\n    }\n\n    if (isSlot(child, Menus)) {\n      slots.menus = (\n        <>\n          {child}\n          {slots.menus}\n        </>\n      );\n      continue;\n    }\n\n    if (isSlot(child, Navigation)) {\n      slots.navigation = child;\n      continue;\n    }\n\n    if (isDev()) {\n      // eslint-disable-next-line no-console\n      console.warn('The used child is not supported by the AppHeader.');\n    }\n  }\n  return slots;\n}\n\n/**\n * @public\n */\nexport interface AppHeaderProps\n  extends StylingProps,\n    DataTestId,\n    MaskingProps,\n    BehaviorTrackingProps,\n    WithChildren {}\n\nconst AppHeaderRoot = forwardRef<HTMLDivElement, AppHeaderProps>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      ...remainingProps\n    } = props;\n    const slots = useMemo(() => getItemSlots(children), [children]);\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n\n    return (\n      <header\n        {...restProps}\n        {...behavioralTrackingProps}\n        ref={forwardedRef}\n        className={clsx(styles.header, consumerClassName)}\n        style={consumerStyle}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <OverlayStackingProvider>\n          {slots.navigation}\n          {slots.actions}\n          {slots.actions && slots.menus ? (\n            <Divider\n              orientation=\"vertical\"\n              flexItem={false}\n              style={{ height: 20 }}\n              aria-hidden\n            />\n          ) : null}\n          {slots.menus}\n        </OverlayStackingProvider>\n      </header>\n    );\n  },\n);\n\n(AppHeaderRoot as typeof AppHeaderRoot & { displayName: string }).displayName =\n  'AppHeader';\n\n/**\n * Use the `AppHeader` to provide a persistent responsive header with app navigation, home button, and global action items available throughout your app.\n * @public\n */\nexport const AppHeader = Object.assign(AppHeaderRoot, {\n  // DEPRECATION: [APPDEV-14264] BREAKING-CHANGE: AppHeader: Remove old NavItems API.\n  /**\n   * @deprecated use {@link AppHeader.Logo}\n   */\n  AppNavLink: Logo,\n  // DEPRECATION: [APPDEV-14264] BREAKING-CHANGE: AppHeader: Remove old NavItems API.\n  /**\n   * @deprecated use {@link AppHeader.Navigation}\n   */\n  NavItems: Navigation,\n  // DEPRECATION: [APPDEV-14264] BREAKING-CHANGE: AppHeader: Remove old NavItems API.\n  /**\n   * @deprecated use {@link AppHeader.NavigationItem}\n   */\n  NavItem: NavigationItem,\n  AppIcon,\n  ActionItems,\n  ActionItemGroup,\n  ActionButton,\n  Logo,\n  Menus,\n  Navigation,\n  NavigationItem,\n});\n"],
+  "mappings": "AAiCgB,SAWR,UAXQ,KAWR,YAXQ;AAjChB,OAAO,UAAU;AACjB,SAAS,UAAU,YAA4B,eAAe;AAE9D,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,eAAe;AACxB,YAAY,YAAY;AACxB,SAAS,YAAY;AACrB,SAAS,aAAa;AACtB,SAAS,YAAY,sBAAsB;AAC3C,SAAS,kCAAkC;AAC3C,SAAS,+BAA+B;AAMxC,SAAS,aAAa;AACtB,SAAS,cAAc;AACvB,SAAS,eAAe;AACxB,SAAS,gBAAgB;AAEzB,MAAM,iBAAiB;AAQvB,SAAS,aAAa,UAAqB;AACzC,QAAM,QAAe;AAAA,IACnB,YAAY,oBAAC,UAAU,YAAV,EAAqB;AAAA,EACpC;AAEA,aAAW,SAAS,SAAS,QAAQ,QAAQ,GAAG;AAC9C,QAAI,OAAO,OAAO,WAAW,GAAG;AAC9B,YAAM,UAAU;AAChB;AAAA,IACF;AAEA,QAAI,OAAO,OAAO,QAAQ,GAAG;AAC3B,YAAM,QACJ,iCACG;AAAA,cAAM;AAAA,QACN;AAAA,SACH;AAEF;AAAA,IACF;AAEA,QAAI,OAAO,OAAO,KAAK,GAAG;AACxB,YAAM,QACJ,iCACG;AAAA;AAAA,QACA,MAAM;AAAA,SACT;AAEF;AAAA,IACF;AAEA,QAAI,OAAO,OAAO,UAAU,GAAG;AAC7B,YAAM,aAAa;AACnB;AAAA,IACF;AAEA,QAAI,MAAM,GAAG;AAEX,cAAQ,KAAK,mDAAmD;AAAA,IAClE;AAAA,EACF;AACA,SAAO;AACT;AAYA,MAAM,gBAAgB;AAAA,EACpB,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAe;AAAA,MACf,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,GAAG;AAAA,IACL,IAAI;AACJ,UAAM,QAAQ,QAAQ,MAAM,aAAa,QAAQ,GAAG,CAAC,QAAQ,CAAC;AAE9D,UAAM,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAE3C,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACH,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,WAAW,KAAK,OAAO,QAAQ,iBAAiB;AAAA,QAChD,OAAO;AAAA,QACP,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB,qBAAmB;AAAA,QAEnB,+BAAC,2BACE;AAAA,gBAAM;AAAA,UACN,MAAM;AAAA,UACN,MAAM,WAAW,MAAM,QACtB;AAAA,YAAC;AAAA;AAAA,cACC,aAAY;AAAA,cACZ,UAAU;AAAA,cACV,OAAO,EAAE,QAAQ,GAAG;AAAA,cACpB,eAAW;AAAA;AAAA,UACb,IACE;AAAA,UACH,MAAM;AAAA,WACT;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEC,cAAiE,cAChE;AAMK,MAAM,YAAY,OAAO,OAAO,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA,EAKpD,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,EAKZ,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAKV,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;",
   "names": []
 }

package/esm/layouts/app-header/AppHeader.sty.js

@@ -1,5 +1,5 @@
 import "./AppHeader.css";
-var header = "_8j2khp0-3-11-3";
+var header = "_8j2khp0-3-12-0";
 export {
   header
 };

package/esm/layouts/app-header/AppHeader.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/app-header/AppHeader.css.ts"],
-  "sourcesContent": ["import './AppHeader.css';\nexport var header = '_8j2khp0-3-11-3';"],
+  "sourcesContent": ["import './AppHeader.css';\nexport var header = '_8j2khp0-3-12-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,SAAS;",
   "names": []
 }

package/esm/layouts/app-header/Navigation.css

@@ -1,13 +1,13 @@
-._swz1ff2-3-11-3 {
+._swz1ff2-3-12-0 {
   position: relative;
 }
-._swz1ff2-3-11-3:is(._swz1ff0-3-11-3,.active):not(._swz1ff1-3-11-3) {
+._swz1ff2-3-12-0:is(._swz1ff0-3-12-0,.active):not(._swz1ff1-3-12-0) {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._swz1ff2-3-11-3:is(._swz1ff0-3-11-3,.active):not(._swz1ff1-3-11-3):hover {
+._swz1ff2-3-12-0:is(._swz1ff0-3-12-0,.active):not(._swz1ff1-3-12-0):hover {
   background-color: var(--dt-colors-background-field-primary-default-hover, #d5dbf6);
 }
-._swz1ff2-3-11-3:is(._swz1ff0-3-11-3,.active)::after {
+._swz1ff2-3-12-0:is(._swz1ff0-3-12-0,.active)::after {
   content: "";
   position: absolute;
   width: 20px;
@@ -19,16 +19,16 @@
   transform: translateX(-50%) translateY(calc(var(--dt-spacings-size-2, 2px) * -1));
   transition: width var(--dt-animations-slide-in-duration-fast, 200ms) var(--dt-animations-slide-in-easing, cubic-bezier(0, 0, 0.2, 1)), opacity var(--dt-animations-slide-in-duration-fast, 200ms) var(--dt-animations-slide-in-easing, cubic-bezier(0, 0, 0.2, 1)), transform var(--dt-animations-slide-in-duration-fast, 200ms) var(--dt-animations-slide-in-easing, cubic-bezier(0, 0, 0.2, 1));
 }
-._swz1ff3-3-11-3 {
+._swz1ff3-3-12-0 {
   position: relative;
 }
-._swz1ff3-3-11-3:is(._swz1ff0-3-11-3,.active):not(._swz1ff1-3-11-3) {
+._swz1ff3-3-12-0:is(._swz1ff0-3-12-0,.active):not(._swz1ff1-3-12-0) {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._swz1ff3-3-11-3:is(._swz1ff0-3-11-3,.active):not(._swz1ff1-3-11-3):hover {
+._swz1ff3-3-12-0:is(._swz1ff0-3-12-0,.active):not(._swz1ff1-3-12-0):hover {
   background-color: var(--dt-colors-background-field-primary-default-hover, #d5dbf6);
 }
-._swz1ff3-3-11-3:is(._swz1ff0-3-11-3,.active)::after {
+._swz1ff3-3-12-0:is(._swz1ff0-3-12-0,.active)::after {
   content: "";
   position: absolute;
   width: var(--dt-spacings-size-2, 2px);
@@ -39,6 +39,6 @@
   transform: translate(4px);
   transition: width var(--dt-animations-slide-in-duration-fast, 200ms) var(--dt-animations-slide-in-easing, cubic-bezier(0, 0, 0.2, 1)), opacity var(--dt-animations-slide-in-duration-fast, 200ms) var(--dt-animations-slide-in-easing, cubic-bezier(0, 0, 0.2, 1)), transform var(--dt-animations-slide-in-duration-fast, 200ms) var(--dt-animations-slide-in-easing, cubic-bezier(0, 0, 0.2, 1));
 }
-._swz1ff4-3-11-3 {
+._swz1ff4-3-12-0 {
   min-width: max-content;
 }

package/esm/layouts/app-header/Navigation.sty.js

@@ -1,9 +1,9 @@
 import "./Navigation.css";
-var button = "_swz1ff2-3-11-3";
-var inlineNav = "_swz1ff4-3-11-3";
-var isDisabled = "_swz1ff1-3-11-3";
-var isSelected = "_swz1ff0-3-11-3";
-var menuLink = "_swz1ff3-3-11-3";
+var button = "_swz1ff2-3-12-0";
+var inlineNav = "_swz1ff4-3-12-0";
+var isDisabled = "_swz1ff1-3-12-0";
+var isSelected = "_swz1ff0-3-12-0";
+var menuLink = "_swz1ff3-3-12-0";
 export {
   button,
   inlineNav,

package/esm/layouts/app-header/Navigation.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/app-header/Navigation.css.ts"],
-  "sourcesContent": ["import './Navigation.css';\nexport var button = '_swz1ff2-3-11-3';\nexport var inlineNav = '_swz1ff4-3-11-3';\nexport var isDisabled = '_swz1ff1-3-11-3';\nexport var isSelected = '_swz1ff0-3-11-3';\nexport var menuLink = '_swz1ff3-3-11-3';"],
+  "sourcesContent": ["import './Navigation.css';\nexport var button = '_swz1ff2-3-12-0';\nexport var inlineNav = '_swz1ff4-3-12-0';\nexport var isDisabled = '_swz1ff1-3-12-0';\nexport var isSelected = '_swz1ff0-3-12-0';\nexport var menuLink = '_swz1ff3-3-12-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,SAAS;AACb,IAAI,YAAY;AAChB,IAAI,aAAa;AACjB,IAAI,aAAa;AACjB,IAAI,WAAW;",
   "names": []
 }