@dynatrace/strato-components 3.11.2 → 3.12.0

package/filters/segment-selector/parts/ShowMorePanel/ShowMorePanel.sty.js

@@ -24,7 +24,7 @@ __export(ShowMorePanel_css_exports, {
 });
 module.exports = __toCommonJS(ShowMorePanel_css_exports);
 var import_ShowMorePanel_css_ts_vanilla = require("./ShowMorePanel.css");
-var expandableWrapper = "_7mq3is0-3-11-2";
-var expandableWrapperCollapsed = "_7mq3is1-3-11-2";
-var expandableWrapperExpanded = "_7mq3is2-3-11-2";
-var list = "_7mq3is3-3-11-2";
+var expandableWrapper = "_7mq3is0-3-12-0";
+var expandableWrapperCollapsed = "_7mq3is1-3-12-0";
+var expandableWrapperExpanded = "_7mq3is2-3-12-0";
+var list = "_7mq3is3-3-12-0";

package/filters/segment-selector/parts/segmentsPresets/SegmentsPreset.js

@@ -43,6 +43,7 @@ var import_app_environment = require("@dynatrace-sdk/app-environment");
 var import_segments_presets = require("@dynatrace-sdk/segments-presets");
 var styles = __toESM(require("./SegmentsPresets.sty.js"));
 var import_Button = require("../../../../buttons/button/Button.js");
+var import_VisuallyHidden = require("../../../../core/components/visually-hidden/VisuallyHidden.js");
 var import_useOverlayStacking = require("../../../../core/hooks/useOverlayStacking.js");
 var import_framer_motion_easings = require("../../../../core/utils/framer-motion-easings.js");
 var import_Divider = require("../../../../layouts/divider/Divider.js");
@@ -446,11 +447,13 @@ const SegmentsPreset = (props) => {
                     className: styles.suffixButton,
                     onClick,
                     disabled: isValidationPending || !isFaulty && pinLimitReached && !isPinned,
-                    "aria-label": actionTooltipText,
-                    "aria-describedby": `preset-label-${id}`,
+                    "aria-labelledby": `action-label-${id} preset-label-${id}`,
                     "data-dt-children-name": "PinUnpin",
                     "data-dt-properties": actionButtonDataDtProperties,
-                    children: icon
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Button.Button.Suffix, { children: [
+                      icon,
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_VisuallyHidden.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { id: `action-label-${id}`, children: actionTooltipText }) })
+                    ] })
                   }
                 )
               }

package/filters/segment-selector/parts/segmentsPresets/SegmentsPresets.css

@@ -1,27 +1,27 @@
-._1oehqvw3-3-11-2 {
+._1oehqvw3-3-12-0 {
   all: unset;
   padding-bottom: var(--dt-spacings-size-4, 4px);
 }
-._1oehqvw4-3-11-2 {
+._1oehqvw4-3-12-0 {
   all: unset;
   display: block;
 }
-._1oehqvw5-3-11-2._1oehqvw5-3-11-2 {
-  color: var(--_1oehqvw2-3-11-2);
+._1oehqvw5-3-12-0._1oehqvw5-3-12-0 {
+  color: var(--_1oehqvw2-3-12-0);
 }
-._1oehqvw6-3-11-2 {
+._1oehqvw6-3-12-0 {
   align-items: center;
   display: inline-block;
   text-wrap: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-._1oehqvw7-3-11-2._1oehqvw7-3-11-2 {
+._1oehqvw7-3-12-0._1oehqvw7-3-12-0 {
   padding-left: var(--dt-spacings-size-12, 12px);
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   padding-bottom: var(--dt-spacings-size-4, 4px);
 }
-._1oehqvw8-3-11-2::before {
+._1oehqvw8-3-12-0::before {
   content: " ";
   position: absolute;
   display: block;
@@ -32,54 +32,54 @@
   left: 0px;
   transform: translate(4px);
 }
-._1oehqvw9-3-11-2 {
-  --_1oehqvw0-3-11-2: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
-  --_1oehqvw1-3-11-2: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
-  --_1oehqvw2-3-11-2: var(--dt-colors-text-neutral-subdued, #595a7d);
+._1oehqvw9-3-12-0 {
+  --_1oehqvw0-3-12-0: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+  --_1oehqvw1-3-12-0: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
+  --_1oehqvw2-3-12-0: var(--dt-colors-text-neutral-subdued, #595a7d);
   grid-template-columns: 1fr max-content;
 }
-._1jgl8s50-3-11-2 ._1oehqvw9-3-11-2._1oehqvw9-3-11-2._1oehqvw9-3-11-2 {
+._1jgl8s50-3-12-0 ._1oehqvw9-3-12-0._1oehqvw9-3-12-0._1oehqvw9-3-12-0 {
   gap: 1px;
 }
-._1jgl8s50-3-11-2 ._1oehqvw9-3-11-2 {
-  --_1oehqvw0-3-11-2: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
+._1jgl8s50-3-12-0 ._1oehqvw9-3-12-0 {
+  --_1oehqvw0-3-12-0: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._1oehqvwa-3-11-2 {
-  --_1oehqvw0-3-11-2: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
-  --_1oehqvw1-3-11-2: var(--dt-colors-background-field-primary-emphasized-hover, #d5dbf6);
-  --_1oehqvw2-3-11-2: var(--dt-colors-text-primary-default, #464cce);
+._1oehqvwa-3-12-0 {
+  --_1oehqvw0-3-12-0: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
+  --_1oehqvw1-3-12-0: var(--dt-colors-background-field-primary-emphasized-hover, #d5dbf6);
+  --_1oehqvw2-3-12-0: var(--dt-colors-text-primary-default, #464cce);
 }
-._1jgl8s50-3-11-2 ._1oehqvwa-3-11-2 {
-  --_1oehqvw0-3-11-2: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
+._1jgl8s50-3-12-0 ._1oehqvwa-3-12-0 {
+  --_1oehqvw0-3-12-0: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
 }
-._1oehqvwb-3-11-2:hover._1oehqvwb-3-11-2:hover, ._1oehqvwb-3-11-2:focus-visible._1oehqvwb-3-11-2:focus-visible {
-  background-color: var(--_1oehqvw1-3-11-2);
+._1oehqvwb-3-12-0:hover._1oehqvwb-3-12-0:hover, ._1oehqvwb-3-12-0:focus-visible._1oehqvwb-3-12-0:focus-visible {
+  background-color: var(--_1oehqvw1-3-12-0);
 }
-._1oehqvwb-3-11-2:disabled:hover._1oehqvwb-3-11-2:disabled:hover {
-  background-color: var(--_1oehqvw0-3-11-2);
+._1oehqvwb-3-12-0:disabled:hover._1oehqvwb-3-12-0:disabled:hover {
+  background-color: var(--_1oehqvw0-3-12-0);
   cursor: not-allowed;
 }
-._1oehqvwc-3-11-2._1oehqvwc-3-11-2 {
+._1oehqvwc-3-12-0._1oehqvwc-3-12-0 {
   opacity: 0;
-  background-color: var(--_1oehqvw0-3-11-2);
+  background-color: var(--_1oehqvw0-3-12-0);
 }
-._1oehqvwc-3-11-2:hover._1oehqvwc-3-11-2:hover, ._1oehqvwc-3-11-2:focus-visible._1oehqvwc-3-11-2:focus-visible {
-  background-color: var(--_1oehqvw1-3-11-2);
+._1oehqvwc-3-12-0:hover._1oehqvwc-3-12-0:hover, ._1oehqvwc-3-12-0:focus-visible._1oehqvwc-3-12-0:focus-visible {
+  background-color: var(--_1oehqvw1-3-12-0);
 }
-._1oehqvwc-3-11-2:disabled, ._1oehqvwc-3-11-2:disabled:hover._1oehqvwc-3-11-2:disabled:hover {
+._1oehqvwc-3-12-0:disabled, ._1oehqvwc-3-12-0:disabled:hover._1oehqvwc-3-12-0:disabled:hover {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   cursor: not-allowed;
 }
-._1jgl8s50-3-11-2 ._1oehqvwc-3-11-2._1oehqvwc-3-11-2._1oehqvwc-3-11-2 {
+._1jgl8s50-3-12-0 ._1oehqvwc-3-12-0._1oehqvwc-3-12-0._1oehqvwc-3-12-0 {
   margin-left: var(--dt-spacings-size-0, 0);
 }
-._1oehqvw9-3-11-2:has(button:focus-visible) ._1oehqvwc-3-11-2, ._1oehqvw9-3-11-2:hover ._1oehqvwc-3-11-2 {
+._1oehqvw9-3-12-0:has(button:focus-visible) ._1oehqvwc-3-12-0, ._1oehqvw9-3-12-0:hover ._1oehqvwc-3-12-0 {
   opacity: 1;
 }
-._1oehqvw9-3-11-2:has(._1oehqvwc-3-11-2:focus-visible) ._1oehqvwb-3-11-2, ._1oehqvw9-3-11-2:hover ._1oehqvwb-3-11-2:not(:hover) {
-  background-color: var(--_1oehqvw0-3-11-2);
+._1oehqvw9-3-12-0:has(._1oehqvwc-3-12-0:focus-visible) ._1oehqvwb-3-12-0, ._1oehqvw9-3-12-0:hover ._1oehqvwb-3-12-0:not(:hover) {
+  background-color: var(--_1oehqvw0-3-12-0);
 }
-._1oehqvw9-3-11-2 button, ._1oehqvw9-3-11-2:hover button {
+._1oehqvw9-3-12-0 button, ._1oehqvw9-3-12-0:hover button {
   transition-timing-function: unset;
   transition-duration: 0s;
   transition: none;

package/filters/segment-selector/parts/segmentsPresets/SegmentsPresets.sty.js

@@ -31,13 +31,13 @@ __export(SegmentsPresets_css_exports, {
 module.exports = __toCommonJS(SegmentsPresets_css_exports);
 var import_AppRoot_css_ts_vanilla = require("../../../../core/components/app-root/AppRoot.css");
 var import_SegmentsPresets_css_ts_vanilla = require("./SegmentsPresets.css");
-var and = "_1oehqvw5-3-11-2";
-var buttonLabel = "_1oehqvw6-3-11-2";
-var inputGroup = "_1oehqvw9-3-11-2";
-var inputGroupSelected = "_1oehqvwa-3-11-2";
-var list = "_1oehqvw3-3-11-2";
-var listItem = "_1oehqvw4-3-11-2";
-var presetButton = "_1oehqvwb-3-11-2";
-var sectionHeadline = "_1oehqvw7-3-11-2";
-var selectionMark = "_1oehqvw8-3-11-2";
-var suffixButton = "_1oehqvwc-3-11-2";
+var and = "_1oehqvw5-3-12-0";
+var buttonLabel = "_1oehqvw6-3-12-0";
+var inputGroup = "_1oehqvw9-3-12-0";
+var inputGroupSelected = "_1oehqvwa-3-12-0";
+var list = "_1oehqvw3-3-12-0";
+var listItem = "_1oehqvw4-3-12-0";
+var presetButton = "_1oehqvwb-3-12-0";
+var sectionHeadline = "_1oehqvw7-3-12-0";
+var selectionMark = "_1oehqvw8-3-12-0";
+var suffixButton = "_1oehqvwc-3-12-0";

package/filters/segment-selector/parts/selectionBar/SegmentSelect.css

@@ -1,83 +1,83 @@
-._1fuxi5m0-3-11-2 {
+._1fuxi5m0-3-12-0 {
   grid-area: segment;
 }
-._1jgl8s50-3-11-2 ._1fuxi5m0-3-11-2 {
+._1jgl8s50-3-12-0 ._1fuxi5m0-3-12-0 {
   position: relative;
   z-index: 0;
 }
-._1jgl8s50-3-11-2 ._1fuxi5m0-3-11-2:hover, ._1jgl8s50-3-11-2 ._1fuxi5m0-3-11-2:active, ._1jgl8s50-3-11-2 ._1fuxi5m0-3-11-2:focus-within {
+._1jgl8s50-3-12-0 ._1fuxi5m0-3-12-0:hover, ._1jgl8s50-3-12-0 ._1fuxi5m0-3-12-0:active, ._1jgl8s50-3-12-0 ._1fuxi5m0-3-12-0:focus-within {
   z-index: 1;
 }
-._1fuxi5m2-3-11-2._1fuxi5m2-3-11-2 {
+._1fuxi5m2-3-12-0._1fuxi5m2-3-12-0 {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
-._1fuxi5m3-3-11-2 {
+._1fuxi5m3-3-12-0 {
   grid-area: variables;
 }
-._1jgl8s50-3-11-2 ._1fuxi5m3-3-11-2 {
+._1jgl8s50-3-12-0 ._1fuxi5m3-3-12-0 {
   margin-left: -1px;
   position: relative;
   z-index: 0;
 }
-._1jgl8s50-3-11-2 ._1fuxi5m3-3-11-2:hover, ._1jgl8s50-3-11-2 ._1fuxi5m3-3-11-2:active, ._1jgl8s50-3-11-2 ._1fuxi5m3-3-11-2:focus-within {
+._1jgl8s50-3-12-0 ._1fuxi5m3-3-12-0:hover, ._1jgl8s50-3-12-0 ._1fuxi5m3-3-12-0:active, ._1jgl8s50-3-12-0 ._1fuxi5m3-3-12-0:focus-within {
   z-index: 1;
 }
-._1fuxi5m4-3-11-2 {
+._1fuxi5m4-3-12-0 {
   width: 100%;
   border-top-left-radius: 0;
 }
-._1fuxi5m5-3-11-2 {
+._1fuxi5m5-3-12-0 {
   grid-area: clear;
   grid-row-start: 1;
 }
-._1fuxi5m5-3-11-2._1fuxi5m5-3-11-2 {
+._1fuxi5m5-3-12-0._1fuxi5m5-3-12-0 {
   height: 100%;
   border-radius: 0 var(--dt-borders-radius-field-default, 6px) var(--dt-borders-radius-field-default, 6px) 0;
 }
-._1jgl8s50-3-11-2 ._1fuxi5m5-3-11-2 {
+._1jgl8s50-3-12-0 ._1fuxi5m5-3-12-0 {
   margin-left: -1px;
   position: relative;
   z-index: 0;
 }
-._1jgl8s50-3-11-2 ._1fuxi5m5-3-11-2:hover, ._1jgl8s50-3-11-2 ._1fuxi5m5-3-11-2:active, ._1jgl8s50-3-11-2 ._1fuxi5m5-3-11-2:focus-within {
+._1jgl8s50-3-12-0 ._1fuxi5m5-3-12-0:hover, ._1jgl8s50-3-12-0 ._1fuxi5m5-3-12-0:active, ._1jgl8s50-3-12-0 ._1fuxi5m5-3-12-0:focus-within {
   z-index: 1;
 }
-._1fuxi5m6-3-11-2 {
+._1fuxi5m6-3-12-0 {
   gap: var(--dt-spacings-size-2, 2px);
   width: 100%;
   grid-template-columns: 40% auto max-content;
 }
-._1jgl8s50-3-11-2 ._1fuxi5m6-3-11-2 {
+._1jgl8s50-3-12-0 ._1fuxi5m6-3-12-0 {
   gap: var(--dt-spacings-size-0, 0);
 }
-._1fuxi5m7-3-11-2 {
+._1fuxi5m7-3-12-0 {
   grid-template-areas: "segment variables clear";
 }
-._1fuxi5m8-3-11-2 {
+._1fuxi5m8-3-12-0 {
   grid-template-areas: "segment variables";
   grid-template-columns: 40% auto;
 }
-._1fuxi5m9-3-11-2 {
+._1fuxi5m9-3-12-0 {
   grid-template-areas: "segment segment clear";
 }
-._1fuxi5ma-3-11-2 {
+._1fuxi5ma-3-12-0 {
   grid-template-areas: "segment segment";
 }
 @media screen and (max-width: 640px) {
-  ._1fuxi5m1-3-11-2 {
+  ._1fuxi5m1-3-12-0 {
     border-bottom-left-radius: 0;
   }
-  ._1jgl8s50-3-11-2 ._1fuxi5m3-3-11-2 {
+  ._1jgl8s50-3-12-0 ._1fuxi5m3-3-12-0 {
     margin-left: 0;
     margin-top: -1px;
   }
-  ._1fuxi5m7-3-11-2 {
+  ._1fuxi5m7-3-12-0 {
     grid-template-areas: "segment segment clear" "variables variables clear";
   }
 }
 @media screen and (min-width: 641px) {
-  ._1fuxi5m4-3-11-2 {
+  ._1fuxi5m4-3-12-0 {
     border-bottom-left-radius: 0;
   }
 }

package/filters/segment-selector/parts/selectionBar/SegmentSelect.d.ts

@@ -9,6 +9,7 @@ type SegmentsSelectProps = {
     overlayWidth: string;
     triggerClassName?: string;
     isPlaceholder?: boolean;
+    'aria-describedby'?: string;
 };
 /**
  * SegmentsSelect component

package/filters/segment-selector/parts/selectionBar/SegmentSelect.js

@@ -54,7 +54,8 @@ const SegmentSelect = (0, import_react.forwardRef)((props, forwardedRef) => {
     segment: cachedSegment,
     autoFocus,
     isPlaceholder,
-    id
+    id,
+    "aria-describedby": ariaDescribedBy
   } = props;
   const intl = (0, import_react_intl.useIntl)();
   const segmentSelectRef = (0, import_react.useRef)(null);
@@ -84,6 +85,7 @@ const SegmentSelect = (0, import_react.forwardRef)((props, forwardedRef) => {
       required: !isPlaceholder,
       clearable: false,
       readOnly: readOnly || cachedSegment?.temporarilyApplied,
+      "aria-describedby": ariaDescribedBy,
       onOpenChange: (isOpen) => {
         if (isOpen) {
           return;

package/filters/segment-selector/parts/selectionBar/SegmentSelect.sty.js

@@ -29,10 +29,10 @@ module.exports = __toCommonJS(SegmentSelect_css_exports);
 var import_AppRoot_css_ts_vanilla = require("../../../../core/components/app-root/AppRoot.css");
 var import_SegmentSelect_css_ts_vanilla = require("./SegmentSelect.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var clearButtonCSS = "_1fuxi5m5-3-11-2";
-var noBorderRadiusRight = "_1fuxi5m2-3-11-2";
-var segmentsSelectCSS = "_1fuxi5m0-3-11-2";
-var segmentsSelectGridCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1fuxi5m6-3-11-2", variantClassNames: { layout: { full: "_1fuxi5m7-3-11-2", "full-readonly": "_1fuxi5m8-3-11-2", "no-variables": "_1fuxi5m9-3-11-2", "no-variables-readonly": "_1fuxi5ma-3-11-2" } }, defaultVariants: {}, compoundVariants: [] });
-var segmentsSelectTriggerCSS = "_1fuxi5m1-3-11-2";
-var variablesSelectCSS = "_1fuxi5m3-3-11-2";
-var variablesSelectTriggerCSS = "_1fuxi5m4-3-11-2";
+var clearButtonCSS = "_1fuxi5m5-3-12-0";
+var noBorderRadiusRight = "_1fuxi5m2-3-12-0";
+var segmentsSelectCSS = "_1fuxi5m0-3-12-0";
+var segmentsSelectGridCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1fuxi5m6-3-12-0", variantClassNames: { layout: { full: "_1fuxi5m7-3-12-0", "full-readonly": "_1fuxi5m8-3-12-0", "no-variables": "_1fuxi5m9-3-12-0", "no-variables-readonly": "_1fuxi5ma-3-12-0" } }, defaultVariants: {}, compoundVariants: [] });
+var segmentsSelectTriggerCSS = "_1fuxi5m1-3-12-0";
+var variablesSelectCSS = "_1fuxi5m3-3-12-0";
+var variablesSelectTriggerCSS = "_1fuxi5m4-3-12-0";

package/filters/segment-selector/parts/selectionBar/SegmentSelectorTrigger.css

@@ -1,3 +1,3 @@
-._1e5el1o0-3-11-2 {
+._1e5el1o0-3-12-0 {
   max-width: 400px;
 }

package/filters/segment-selector/parts/selectionBar/SegmentSelectorTrigger.sty.js

@@ -21,4 +21,4 @@ __export(SegmentSelectorTrigger_css_exports, {
 });
 module.exports = __toCommonJS(SegmentSelectorTrigger_css_exports);
 var import_SegmentSelectorTrigger_css_ts_vanilla = require("./SegmentSelectorTrigger.css");
-var trigger = "_1e5el1o0-3-11-2";
+var trigger = "_1e5el1o0-3-12-0";

package/filters/segment-selector/parts/selectionBar/SelectionBar.d.ts

@@ -14,8 +14,9 @@ type SelectionBarProps = {
  * Error messages for the SelectionBar component.
  * @internal
  */
-export declare const ErrorMessages: ({ uiSegment }: {
+export declare const ErrorMessages: ({ uiSegment, errorElementId, }: {
     uiSegment: UISegment;
+    errorElementId: string;
 }) => import("react").JSX.Element | null;
 /**
  * SelectionBar component

package/filters/segment-selector/parts/selectionBar/SelectionBar.js

@@ -41,6 +41,7 @@ var import_SegmentSelect_css = require("./SegmentSelect.sty.js");
 var import_SegmentSelect = require("./SegmentSelect.js");
 var import_ValueSelect = require("./ValueSelect.js");
 var import_Button = require("../../../../buttons/button/Button.js");
+var import_useId = require("../../../../core/hooks/useId.js");
 var import_useOverlayStacking = require("../../../../core/hooks/useOverlayStacking.js");
 var import_FormFieldMessageContextProvider = require("../../../../forms/forms-core/components/form-field/FormFieldMessageContextProvider.js");
 var import_FormFieldMessages = require("../../../../forms/forms-core/components/form-field-messages/FormFieldMessages.js");
@@ -86,7 +87,10 @@ function getErrorMessageFromKey(errorKey) {
   }
   return null;
 }
-const ErrorMessages = ({ uiSegment }) => {
+const ErrorMessages = ({
+  uiSegment,
+  errorElementId
+}) => {
   const { data: errorKey } = (0, import_react_query.useQuery)(
     {
       queryKey: ["errorKey", uiSegment],
@@ -104,7 +108,7 @@ const ErrorMessages = ({ uiSegment }) => {
     return null;
   }
   const errorMessage = getErrorMessageFromKey(errorKey);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_FormFieldMessages.FormFieldMessages, { children: (messages) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_FormFieldMessages.FormFieldMessages, { id: errorElementId, children: (messages) => {
     if (hasArrayIdentifierError) {
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_FormFieldMessages.FormFieldMessages.Item,
@@ -189,6 +193,7 @@ const SelectionBar = (props) => {
   const showDeleteButton = clearable && !readOnly && import_SegmentsCache.segmentsClient.hasAccessRights !== false;
   const stackingContext = (0, import_useOverlayStacking.useOverlayStacking)(void 0, "overlay");
   const hasVariables = !!segment?.segment?.variables;
+  const errorElementId = (0, import_useId.useId)();
   const segmentSelectElement = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_SegmentSelect.SegmentSelect,
     {
@@ -201,7 +206,8 @@ const SelectionBar = (props) => {
         [import_SegmentSelect_css.noBorderRadiusRight]: showDeleteButton || hasVariables
       }),
       isPlaceholder,
-      autoFocus
+      autoFocus,
+      "aria-describedby": state.showError ? errorElementId : void 0
     }
   );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { className: listStyles.segmentSelectorListItem, children: [
@@ -238,7 +244,8 @@ const SelectionBar = (props) => {
                   unavailableVariables: uiSegment.unavailableVariables,
                   triggerClassName: (0, import_clsx.default)({
                     [import_SegmentSelect_css.noBorderRadiusRight]: clearable && !readOnly
-                  })
+                  }),
+                  "aria-describedby": state.showError ? errorElementId : void 0
                 }
               ),
               showDeleteButton && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -263,6 +270,6 @@ const SelectionBar = (props) => {
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ErrorMessages, { uiSegment })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ErrorMessages, { uiSegment, errorElementId })
   ] });
 };

package/filters/segment-selector/parts/selectionBar/ValueSelect.d.ts

@@ -5,6 +5,7 @@ type ValueSelectProps = {
     variables?: string[];
     triggerClassName?: string;
     unavailableVariables?: Set<string>;
+    'aria-describedby'?: string;
 };
 /**
  * ValueSelect component that allows the selection of variables of the segment.

package/filters/segment-selector/parts/selectionBar/ValueSelect.js

@@ -59,7 +59,8 @@ const ValueSelect = (props) => {
     readOnly,
     segment,
     variables = [],
-    unavailableVariables
+    unavailableVariables,
+    "aria-describedby": ariaDescribedBy
   } = props;
   const variableSelectRef = (0, import_react.useRef)(null);
   const { focusedSegmentId, isTouched } = (0, import_react.useContext)(import_SegmentsUIContext.UISegmentsContext);
@@ -304,7 +305,9 @@ const ValueSelect = (props) => {
           });
         }
       },
+      "aria-describedby": ariaDescribedBy,
       "data-dt-name": "segment-variable-select",
+      name: `segment-variable-select${segment.segment.id}`,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_Select.Select.Trigger,

package/filters/timeframe-selector/TimeframeSelector.css

@@ -1,8 +1,8 @@
-._1sqhmjg0-3-11-2 {
+._1sqhmjg0-3-12-0 {
   min-width: 0;
   box-sizing: border-box;
 }
-._1sqhmjg1-3-11-2 {
+._1sqhmjg1-3-12-0 {
   display: inline-flex;
   align-self: start;
 }

package/filters/timeframe-selector/TimeframeSelector.sty.js

@@ -22,5 +22,5 @@ __export(TimeframeSelector_css_exports, {
 });
 module.exports = __toCommonJS(TimeframeSelector_css_exports);
 var import_TimeframeSelector_css_ts_vanilla = require("./TimeframeSelector.css");
-var displayValueParts = "_1sqhmjg0-3-11-2";
-var root = "_1sqhmjg1-3-11-2";
+var displayValueParts = "_1sqhmjg0-3-12-0";
+var root = "_1sqhmjg1-3-12-0";

package/filters/timeframe-selector/TimeframeSelector.types.d.ts

@@ -14,7 +14,7 @@ import type { MessageTarget } from '../../forms/validation/message-routing.js';
 export type TimeframeSelectorProps = FormControlProps<RequireAtLeastOne<{
     from: string;
     to: string;
-}> | RequireAtLeastOne<Timeframe> | null, (value: Timeframe | null) => void> & StylingProps & DataTestId & PropsWithChildren & MaskingProps & BehaviorTrackingProps & {
+}> | RequireAtLeastOne<Timeframe> | null, (value: Timeframe | null) => void, HTMLDivElement> & StylingProps & DataTestId & PropsWithChildren & MaskingProps & BehaviorTrackingProps & {
     /**
      * Shows the "Clear selection" button if set to true.
      * @defaultValue false

package/filters/timeframe-selector/TimeframeSelectorRoot.js

@@ -56,10 +56,12 @@ var import_is_slot = require("../../core/utils/is-slot.js");
 var import_logging = require("../../core/utils/logging.js");
 var import_useInternalFormRegistration = require("../../forms/form/hooks/useInternalFormRegistration.js");
 var import_FormFieldMessageBaseItem = require("../../forms/forms-core/components/form-field-messages/FormFieldMessageBaseItem.js");
+var import_useFormFieldContext = require("../../forms/forms-core/hooks/useFormFieldContext.js");
 var import_useFormFieldValidation = require("../../forms/forms-core/hooks/useFormFieldValidation.js");
 var import_useMinMaxLogger = require("../../forms/forms-core/hooks/useMinMaxLogger.js");
 var import_formfield_messages_state_reducer = require("../../forms/forms-core/state/formfield-messages-state-reducer.js");
 var import_timeParser = require("../../forms/forms-core/time/timeParser.js");
+var import_useContainerFocus = require("../../forms/hooks/useContainerFocus.js");
 var import_types = require("../../forms/validation/types.js");
 var import_useCustomMessageEmitter = require("../../forms/validation/useCustomMessageEmitter.js");
 var import_useValidationStateEmitter = require("../../forms/validation/useValidationStateEmitter.js");
@@ -102,6 +104,7 @@ function getItemSlots(children, precision) {
 }
 const TimeframeSelectorRoot = (0, import_react.forwardRef)((props, forwardedRef) => {
   const intl = (0, import_react_intl.useIntl)();
+  const { formFieldLabelId } = (0, import_useFormFieldContext.useFormFieldContext)();
   const {
     value: propValue,
     defaultValue,
@@ -109,6 +112,8 @@ const TimeframeSelectorRoot = (0, import_react.forwardRef)((props, forwardedRef)
     clearable = false,
     children,
     onChange,
+    onFocus,
+    onBlur,
     className: consumerClassName,
     style: consumerStyle,
     "data-testid": dataTestId,
@@ -156,6 +161,9 @@ const TimeframeSelectorRoot = (0, import_react.forwardRef)((props, forwardedRef)
     id: "W+rTy8UuFKDho3mc",
     description: "Placeholder shown for the timeframe selector."
   });
+  const defaultTriggerLabel = intl.formatMessage(
+    import_timeframeSelectorMessages.TIMEFRAME_SELECTOR_MESSAGES.timeframeLabel
+  );
   (0, import_useMinMaxLogger.useMinMaxLogger)(min, max, "TimeframeSelector");
   const formValidityChangeRef = (0, import_react.useRef)(void 0);
   const _emitValidationState = (0, import_useValidationStateEmitter.useValidationStateEmitter)(
@@ -288,12 +296,13 @@ const TimeframeSelectorRoot = (0, import_react.forwardRef)((props, forwardedRef)
   );
   const triggerErrorId = (0, import_useId.useId)();
   const inputId = (0, import_useId.useId)();
+  const overlayOwnerId = (0, import_useId.useId)();
   const imperativeTriggerRef = (0, import_react.useRef)(null);
   const containerRef = (0, import_react.useRef)(null);
   const fromInputRef = (0, import_react.useRef)(null);
   const toInputRef = (0, import_react.useRef)(null);
   const ariaLabelingProps = {
-    "aria-label": ariaLabelProp,
+    "aria-label": ariaLabelProp ?? (!ariaLabelledByProp && !formFieldLabelId ? defaultTriggerLabel : void 0),
     "aria-labelledby": ariaLabelledByProp,
     "aria-describedby": ariaDescribedByProp,
     "aria-details": ariaDetailsProp
@@ -537,6 +546,17 @@ const TimeframeSelectorRoot = (0, import_react.forwardRef)((props, forwardedRef)
     formatString,
     required
   ]);
+  const { containerClassName, ...containerFocusProps } = (0, import_useContainerFocus.useContainerFocus)({
+    onFocus,
+    onBlur,
+    disabled,
+    overlayOwnerId,
+    // When the overlay is open, autoFocus moves focus into the portal. The browser
+    // fires a blur on the trigger with relatedTarget=null (the portal is outside the
+    // container DOM). Suppress that blur so hasFocusRef stays true and focus
+    // returning to the trigger on close does not re-fire onFocus.
+    shouldSuppressBlur: () => overlayState.isOpen
+  });
   const triggerProps = (0, import_react.useMemo)(
     () => ({
       disabled,
@@ -588,10 +608,11 @@ const TimeframeSelectorRoot = (0, import_react.forwardRef)((props, forwardedRef)
       "data-dtrum-mask": dataDtrumMask,
       "data-dtrum-allow": dataDtrumAllow,
       ref: containerRef,
-      className: (0, import_clsx.default)(consumerClassName, styles.root),
+      className: (0, import_clsx.default)(consumerClassName, containerClassName, styles.root),
       style: consumerStyle,
       ...remainingProps,
       "data-dt-component": "TimeframeSelector",
+      ...containerFocusProps,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_VisuallyHidden.VisuallyHidden, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -686,6 +707,7 @@ const TimeframeSelectorRoot = (0, import_react.forwardRef)((props, forwardedRef)
             ref: overlayRef,
             overlayProps,
             overlayClose: overlayState.close,
+            overlayOwnerId,
             clearable,
             "data-dtrum-mask": dataDtrumMask,
             "data-dtrum-allow": dataDtrumAllow,

package/filters/timeframe-selector/components/custom-timeframe-selector/CustomTimeframeSelector.css

@@ -1,4 +1,4 @@
-._at2xro0-3-11-2 {
+._at2xro0-3-12-0 {
   display: flex;
   flex-direction: column;
   flex: 1;
@@ -7,7 +7,7 @@
   padding: var(--dt-spacings-size-0, 0);
   border: var(--dt-spacings-size-0, 0);
 }
-._at2xro1-3-11-2 {
+._at2xro1-3-12-0 {
   display: flex;
   gap: var(--dt-spacings-size-4, 4px);
   padding-top: var(--dt-spacings-size-8, 8px);
@@ -18,14 +18,14 @@
   width: 100%;
   flex-direction: column;
 }
-._at2xro2-3-11-2 {
+._at2xro2-3-12-0 {
   flex-direction: column;
   flex: 1;
   min-width: var(--dt-spacings-size-0, 0);
   gap: var(--dt-spacings-size-4, 4px);
 }
 @media screen and (min-width: 640px) {
-  ._at2xro1-3-11-2 {
+  ._at2xro1-3-12-0 {
     flex-direction: row;
   }
 }

package/filters/timeframe-selector/components/custom-timeframe-selector/CustomTimeframeSelector.sty.js

@@ -23,6 +23,6 @@ __export(CustomTimeframeSelector_css_exports, {
 });
 module.exports = __toCommonJS(CustomTimeframeSelector_css_exports);
 var import_CustomTimeframeSelector_css_ts_vanilla = require("./CustomTimeframeSelector.css");
-var fieldset = "_at2xro0-3-11-2";
-var overlayRoot = "_at2xro1-3-11-2";
-var wrapper = "_at2xro2-3-11-2";
+var fieldset = "_at2xro0-3-12-0";
+var overlayRoot = "_at2xro1-3-12-0";
+var wrapper = "_at2xro2-3-12-0";