@dynatrace/strato-components 3.13.2 → 3.14.0

package/forms/select/components/HiddenSelect.js

@@ -62,11 +62,10 @@ const HiddenSelect = (0, import_react.forwardRef)(
       // to join for a dep key — no risk of BigInt or circular-reference errors.
       { selectedValues: selectedValuesArray.join(",") },
       {},
-      id
+      id,
+      void 0,
+      controlState
     );
-    const handleInvalid = controlState ? (event) => {
-      event.preventDefault();
-    } : onInvalid;
     const value = (0, import_react.useMemo)(() => {
       if (multiple) {
         return selectedValuesArray;
@@ -88,7 +87,7 @@ const HiddenSelect = (0, import_react.forwardRef)(
         value: value && value.length !== 0 ? value : void 0,
         id,
         onChange: () => void 0,
-        onInvalid: handleInvalid,
+        onInvalid,
         ...controlState ? {} : { ...ariaProps, onBlur, onChange },
         children: selectedValuesArray.map((val, key) => {
           return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: `${val}` }, `${key}-${val}`);

package/forms/select/components/Menu.js

@@ -250,8 +250,8 @@ function Menu(props) {
               {
                 value: {
                   state: {
-                    customMessages: [],
-                    formControlMessages: [],
+                    errors: [],
+                    hints: [],
                     showError: false
                   }
                 },

package/forms/select/components/MenuList.js

@@ -38,7 +38,7 @@ var import_react_intl = require("react-intl");
 var import_NoOptionsMessage = require("./NoOptionsMessage.js");
 var import_sort_selected_options_first = require("./sort-selected-options-first.js");
 var import_useMergeRefs = require("../../../core/hooks/useMergeRefs.js");
-var import_screen_reader_only_css = require("../../../styles/screen-reader-only.sty.js");
+var import_use_select_menu_context = require("../hooks/use-select-menu-context.js");
 var styles = __toESM(require("../styles/Select.sty.js"));
 function countSelectableOptions(children) {
   let count = 0;
@@ -109,12 +109,19 @@ function MenuList(props) {
   initialRender.current = false;
   const intl = (0, import_react_intl.useIntl)();
   const isFiltering = selectProps.customFilter !== void 0 && selectProps.inputValue !== void 0 && selectProps.inputValue !== "";
-  const filterAnnouncement = buildFilterAnnouncement(
+  const filterAnnouncement = selectProps.customFilter !== void 0 ? buildFilterAnnouncement(
     intl,
     childrenArray,
     isFiltering,
     isShowingNoOptions
-  );
+  ) : "";
+  const { setAnnouncementText } = (0, import_use_select_menu_context.useSelectMenuContext)();
+  (0, import_react.useEffect)(() => {
+    setAnnouncementText(filterAnnouncement);
+    return () => {
+      setAnnouncementText("");
+    };
+  }, [filterAnnouncement, setAnnouncementText]);
   const optionVirtualizer = (0, import_react_virtual.useVirtualizer)({
     count: childrenArray.length,
     getScrollElement: () => parentRef.current,
@@ -145,67 +152,52 @@ function MenuList(props) {
       });
     });
   }, [notifyParentRefChange, childrenArray.length]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    selectProps.customFilter && // Rendered as a sibling, not a child, of the listbox below — role="listbox"
-    // only permits option/group children, so a nested role="status" trips axe's
-    // aria-required-children rule.
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "div",
-      {
-        role: "status",
-        "aria-live": "polite",
-        "aria-atomic": "true",
-        className: import_screen_reader_only_css.screenReaderOnly,
-        children: filterAnnouncement
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "div",
-      {
-        ...innerProps,
-        ref: menulistref,
-        className: (0, import_clsx.default)(styles.selectMenuListWrapper, "strato-select-menulist"),
-        style: {
-          width: optionVirtualizer.scrollOffset !== null && optionVirtualizer.scrollOffset > 0 && selectProps.contentWidth === "max-content" ? optionVirtualizer.scrollRect?.width : void 0
-        },
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "div",
-          {
-            role: "presentation",
-            style: {
-              height: optionVirtualizer.getTotalSize(),
-              display: "grid",
-              // Array.from is used instead of .map() because measurementsCache can be sparse, causing gaps between options.
-              gridTemplateRows: Array.from(
-                optionVirtualizer.measurementsCache,
-                (el) => `${el?.size ?? 32}px`
-              ).join(" ")
-            },
-            className: styles.selectVirtualizationWrapper,
-            children: optionVirtualizer.getVirtualItems().map((virtualRow) => {
-              const child = childrenArray?.[virtualRow.index];
-              return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                "div",
-                {
-                  className: "strato-select-option",
-                  "data-index": virtualRow.index,
-                  style: {
-                    gridRow: virtualRow.index + 1,
-                    minWidth: 0,
-                    height: "fit-content"
-                  },
-                  ref: (el) => {
-                    optionVirtualizer.measureElement(el);
-                  },
-                  children: child
-                },
-                virtualRow.key
-              );
-            })
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ...innerProps,
+      ref: menulistref,
+      className: (0, import_clsx.default)(styles.selectMenuListWrapper, "strato-select-menulist"),
+      style: {
+        width: optionVirtualizer.scrollOffset !== null && optionVirtualizer.scrollOffset > 0 && selectProps.contentWidth === "max-content" ? optionVirtualizer.scrollRect?.width : void 0
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          role: "presentation",
+          style: {
+            height: optionVirtualizer.getTotalSize(),
+            display: "grid",
+            // Array.from is used instead of .map() because measurementsCache can be sparse, causing gaps between options.
+            gridTemplateRows: Array.from(
+              optionVirtualizer.measurementsCache,
+              (el) => `${el?.size ?? 32}px`
+            ).join(" ")
           },
-          `wrapper-${selectProps.options.length}`
-        )
-      }
-    )
-  ] });
+          className: styles.selectVirtualizationWrapper,
+          children: optionVirtualizer.getVirtualItems().map((virtualRow) => {
+            const child = childrenArray?.[virtualRow.index];
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                className: "strato-select-option",
+                "data-index": virtualRow.index,
+                style: {
+                  gridRow: virtualRow.index + 1,
+                  minWidth: 0,
+                  height: "fit-content"
+                },
+                ref: (el) => {
+                  optionVirtualizer.measureElement(el);
+                },
+                children: child
+              },
+              virtualRow.key
+            );
+          })
+        },
+        `wrapper-${selectProps.options.length}`
+      )
+    }
+  ) });
 }

package/forms/select/components/SelectLiveRegion.d.ts

@@ -0,0 +1,13 @@
+interface SelectLiveRegionProps {
+    loading?: boolean;
+}
+/**
+ * Single persistent live region for all Select announcements. Kept outside
+ * the portal-rendered Menu so it is already in the DOM before the menu opens
+ * — content changes are mutations on an existing node, which is the only
+ * pattern reliably announced by screen readers.
+ * @internal
+ */
+export declare function SelectLiveRegion({ loading }: Readonly<SelectLiveRegionProps>): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=SelectLiveRegion.d.ts.map

package/forms/select/components/SelectLiveRegion.js

@@ -0,0 +1,37 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var SelectLiveRegion_exports = {};
+__export(SelectLiveRegion_exports, {
+  SelectLiveRegion: () => SelectLiveRegion
+});
+module.exports = __toCommonJS(SelectLiveRegion_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react_intl = require("react-intl");
+var import_screen_reader_only_css = require("../../../styles/screen-reader-only.sty.js");
+var import_use_select_menu_context = require("../hooks/use-select-menu-context.js");
+function SelectLiveRegion({ loading }) {
+  const { state: menuOpen, announcementText } = (0, import_use_select_menu_context.useSelectMenuContext)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("output", { className: import_screen_reader_only_css.screenReaderOnly, children: menuOpen && loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_intl.FormattedMessage,
+    {
+      defaultMessage: "Loading",
+      id: "cycz+bYG+VH7Of4e",
+      description: "Label for the loading state."
+    }
+  ) : announcementText || null });
+}

package/forms/select/contexts/SelectMenuContext.d.ts

@@ -3,6 +3,8 @@ import { SelectReducerAction } from '../state/select-menu-state-reducer.js';
 export interface SelectMenuContextProps {
     state: boolean;
     dispatch: Dispatch<SelectReducerAction>;
+    announcementText: string;
+    setAnnouncementText: (text: string) => void;
 }
 export declare const initialState = false;
 /** SelectMenu context, used to access the state and dispatcher in other components. */

package/forms/select/contexts/SelectMenuContext.js

@@ -25,5 +25,7 @@ var import_react = require("react");
 const initialState = false;
 const SelectMenuContext = (0, import_react.createContext)({
   state: initialState,
-  dispatch: () => null
+  dispatch: () => null,
+  announcementText: "",
+  setAnnouncementText: () => null
 });

package/forms/select/styles/Select.css

@@ -1,89 +1,89 @@
-._dlenfc0-3-13-2._dlenfc0-3-13-2 {
+._dlenfc0-3-14-0._dlenfc0-3-14-0 {
   pointer-events: auto;
 }
-._dlenfc1-3-13-2._dlenfc1-3-13-2 {
+._dlenfc1-3-14-0._dlenfc1-3-14-0 {
   min-width: unset;
 }
-._dlenfc3-3-13-2 {
+._dlenfc3-3-14-0 {
   width: 100%;
 }
-._dlenfc4-3-13-2 {
+._dlenfc4-3-14-0 {
   width: auto;
 }
-._dlenfc5-3-13-2 > span {
+._dlenfc5-3-14-0 > span {
   z-index: unset;
 }
-._dlenfc6-3-13-2 {
+._dlenfc6-3-14-0 {
   display: flex;
 }
-._dlenfc7-3-13-2 {
+._dlenfc7-3-14-0 {
   transform: rotate(180deg);
 }
-._dlenfc8-3-13-2 {
+._dlenfc8-3-14-0 {
   color: var(--dt-colors-icon-neutral-disabled, #595a7d80);
   cursor: default;
 }
-._dlenfca-3-13-2 {
+._dlenfca-3-14-0 {
   width: auto;
 }
-._dlenfcc-3-13-2 {
+._dlenfcc-3-14-0 {
   cursor: default;
 }
-:root:not(._1jgl8s50-3-13-2) ._dlenfcc-3-13-2 {
-  --_bx32h3-3-13-2: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
+:root:not(._1jgl8s50-3-14-0) ._dlenfcc-3-14-0 {
+  --_bx32h3-3-14-0: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._dlenfcd-3-13-2 {
+._dlenfcd-3-14-0 {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._1jgl8s50-3-13-2 ._dlenfce-3-13-2, ._1jgl8s50-3-13-2 ._dlenfce-3-13-2:hover, ._1jgl8s50-3-13-2 ._dlenfce-3-13-2:active {
-  --_bx32h3-3-13-2: var(--dt-colors-background-surface-default, #fff);
-  --_bx32h4-3-13-2: 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-14-0 ._dlenfce-3-14-0, ._1jgl8s50-3-14-0 ._dlenfce-3-14-0:hover, ._1jgl8s50-3-14-0 ._dlenfce-3-14-0:active {
+  --_bx32h3-3-14-0: var(--dt-colors-background-surface-default, #fff);
+  --_bx32h4-3-14-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);
 }
-._dlenfcf-3-13-2 {
+._dlenfcf-3-14-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._dlenfcg-3-13-2 {
+._dlenfcg-3-14-0 {
   width: 100%;
   position: relative;
 }
-._dlenfch-3-13-2 {
+._dlenfch-3-14-0 {
   overflow: auto;
 }
-._dlenfci-3-13-2 {
+._dlenfci-3-14-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   padding: var(--dt-spacings-size-6, 6px) var(--dt-spacings-size-12, 12px);
 }
-._dlenfcj-3-13-2 {
+._dlenfcj-3-14-0 {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-._dlenfck-3-13-2 ._dlenfcl-3-13-2 {
+._dlenfck-3-14-0 ._dlenfcl-3-14-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._dlenfcm-3-13-2 {
+._dlenfcm-3-14-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   align-items: center;
 }
-._dlenfcn-3-13-2.strato-select-divider {
+._dlenfcn-3-14-0.strato-select-divider {
   margin: var(--dt-spacings-size-4, 4px) var(--dt-spacings-size-0, 0);
 }
-._dlenfco-3-13-2 {
+._dlenfco-3-14-0 {
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   max-height: 101vh;
 }
-._dlenfcp-3-13-2 {
+._dlenfcp-3-14-0 {
   min-width: 128px;
 }
-._dlenfcq-3-13-2 {
+._dlenfcq-3-14-0 {
   display: inline;
 }
-._dlenfcq-3-13-2 + ._dlenfcq-3-13-2:before {
+._dlenfcq-3-14-0 + ._dlenfcq-3-14-0:before {
   content: ", ";
 }
-._dlenfcr-3-13-2 {
+._dlenfcr-3-14-0 {
   position: relative;
   cursor: pointer;
   border-radius: var(--dt-borders-radius-field-default, 6px);
@@ -93,23 +93,23 @@
   padding-bottom: var(--dt-spacings-size-6, 6px);
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
 }
-._dlenfcr-3-13-2:hover:not(.strato-select-option--disabled) {
+._dlenfcr-3-14-0:hover:not(.strato-select-option--disabled) {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._dlenfcr-3-13-2.strato-select-option--selected {
+._dlenfcr-3-14-0.strato-select-option--selected {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._dlenfcr-3-13-2.strato-select-option--disabled {
+._dlenfcr-3-14-0.strato-select-option--disabled {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
 }
-._dlenfcr-3-13-2.strato-select-option--selected.strato-select-option--disabled:before {
+._dlenfcr-3-14-0.strato-select-option--selected.strato-select-option--disabled:before {
   background-color: var(--dt-colors-border-primary-disabled, #dadbe480);
 }
-._dlenfcr-3-13-2.strato-select-option--selected:hover {
+._dlenfcr-3-14-0.strato-select-option--selected:hover {
   background-color: var(--dt-colors-background-field-primary-default-hover, #d5dbf6);
 }
-._dlenfcr-3-13-2.strato-select-option--selected::before {
+._dlenfcr-3-14-0.strato-select-option--selected::before {
   content: " ";
   position: absolute;
   display: block;
@@ -120,11 +120,11 @@
   left: 0px;
   transform: translate(4px);
 }
-._dlenfcs-3-13-2:focus {
+._dlenfcs-3-14-0:focus {
   outline: none;
   box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--dt-colors-border-neutral-accent, #595a7d), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._dlenfct-3-13-2 {
+._dlenfct-3-14-0 {
   padding-left: var(--dt-spacings-size-8, 8px);
   padding-right: var(--dt-spacings-size-12, 12px);
   padding-top: var(--dt-spacings-size-6, 6px);
@@ -134,14 +134,14 @@
   cursor: pointer;
   border-radius: var(--dt-spacings-size-8, 8px);
 }
-._dlenfct-3-13-2:hover:not(.strato-select-option--disabled) {
+._dlenfct-3-14-0:hover:not(.strato-select-option--disabled) {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._dlenfct-3-13-2.strato-select-option--disabled {
+._dlenfct-3-14-0.strato-select-option--disabled {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
 }
-._dlenfcu-3-13-2 {
+._dlenfcu-3-14-0 {
   display: flex;
   width: var(--dt-spacings-size-20, 20px);
   min-width: var(--dt-spacings-size-20, 20px);
@@ -153,29 +153,29 @@
   border-color: var(--dt-colors-border-neutral-accent, #595a7d);
   box-sizing: border-box;
 }
-.strato-select-option--disabled ._dlenfcu-3-13-2 {
+.strato-select-option--disabled ._dlenfcu-3-14-0 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   border-color: var(--dt-colors-border-neutral-disabled, #dadbe480);
 }
-._dlenfcv-3-13-2 {
+._dlenfcv-3-14-0 {
   border-color: var(--dt-colors-background-field-primary-accent, #474fcf);
   background-color: var(--dt-colors-background-field-primary-accent, #474fcf);
 }
-._dlenfcw-3-13-2 {
+._dlenfcw-3-14-0 {
   fill: var(--dt-colors-icon-primary-on-accent-default, #f4f4fb);
   height: 100%;
   width: 100%;
 }
-.strato-select-option--disabled ._dlenfcw-3-13-2 {
+.strato-select-option--disabled ._dlenfcw-3-14-0 {
   fill: var(--dt-colors-icon-primary-disabled, #595a7d80);
 }
-._dlenfcx-3-13-2 {
+._dlenfcx-3-14-0 {
   display: inline-block;
   width: var(--dt-spacings-size-20, 20px);
   min-width: var(--dt-spacings-size-20, 20px);
   height: var(--dt-spacings-size-20, 20px);
 }
-._dlenfcy-3-13-2 {
+._dlenfcy-3-14-0 {
   display: inline-block;
   width: var(--dt-spacings-size-20, 20px);
   min-width: var(--dt-spacings-size-20, 20px);

package/forms/select/styles/Select.sty.js

@@ -47,27 +47,27 @@ var import_AppRoot_css_ts_vanilla = require("../../../core/components/app-root/A
 var import_field_css_ts_vanilla = require("../../../styles/field.css");
 var import_Select_css_ts_vanilla = require("./Select.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var clearReactSelectZIndex = "_dlenfc5-3-13-2";
-var filter = "_dlenfc1-3-13-2";
-var placeholderColor = "_dlenfcl-3-13-2";
-var select = "_dlenfc0-3-13-2";
-var selectAll = "_dlenfcs-3-13-2";
-var selectGroupHeading = "_dlenfcf-3-13-2";
-var selectMenuDivider = "_dlenfcn-3-13-2";
-var selectMenuListWrapper = "_dlenfch-3-13-2";
-var selectMenuLoadingWrapper = "_dlenfcm-3-13-2";
-var selectMenuOverlay = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_dlenfco-3-13-2", variantClassNames: { isTriggerWidth: { true: "_dlenfcp-3-13-2" } }, defaultVariants: { isTriggerWidth: false }, compoundVariants: [] });
-var selectMultiValue = "_dlenfcq-3-13-2";
-var selectNoOptionsMessage = "_dlenfci-3-13-2";
-var selectOptionMulti = "_dlenfct-3-13-2";
-var selectOptionMultiIndicator = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_dlenfcu-3-13-2", variantClassNames: { selected: { true: "_dlenfcv-3-13-2" } }, defaultVariants: {}, compoundVariants: [] });
-var selectOptionMultiIndicatorIcon = "_dlenfcw-3-13-2";
-var selectOptionPrefix = "_dlenfcx-3-13-2";
-var selectOptionSingle = "_dlenfcr-3-13-2";
-var selectOptionSuffix = "_dlenfcy-3-13-2";
-var selectTrigger = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_dlenfc9-3-13-2", variantClassNames: { fullWidth: { true: "_dlenfca-3-13-2" }, showError: { true: "_dlenfcb-3-13-2" }, readOnly: { true: "_dlenfcc-3-13-2" } }, defaultVariants: { fullWidth: false }, compoundVariants: [[{ showError: true, readOnly: true }, "_dlenfcd-3-13-2"], [{ showError: false, readOnly: true }, "_dlenfce-3-13-2"]] });
-var selectTriggerIconWrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_dlenfc6-3-13-2", variantClassNames: { isOverlayOpen: { true: "_dlenfc7-3-13-2" }, readOnly: { true: "_dlenfc8-3-13-2" } }, defaultVariants: { isOverlayOpen: false }, compoundVariants: [] });
-var selectValueContainerTruncationBox = "_dlenfcj-3-13-2";
-var selectVirtualizationWrapper = "_dlenfcg-3-13-2";
-var selectWrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_dlenfc2-3-13-2", variantClassNames: { fullWidth: { true: "_dlenfc3-3-13-2", false: "_dlenfc4-3-13-2" } }, defaultVariants: { fullWidth: false }, compoundVariants: [] });
-var validAndEnabled = "_dlenfck-3-13-2";
+var clearReactSelectZIndex = "_dlenfc5-3-14-0";
+var filter = "_dlenfc1-3-14-0";
+var placeholderColor = "_dlenfcl-3-14-0";
+var select = "_dlenfc0-3-14-0";
+var selectAll = "_dlenfcs-3-14-0";
+var selectGroupHeading = "_dlenfcf-3-14-0";
+var selectMenuDivider = "_dlenfcn-3-14-0";
+var selectMenuListWrapper = "_dlenfch-3-14-0";
+var selectMenuLoadingWrapper = "_dlenfcm-3-14-0";
+var selectMenuOverlay = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_dlenfco-3-14-0", variantClassNames: { isTriggerWidth: { true: "_dlenfcp-3-14-0" } }, defaultVariants: { isTriggerWidth: false }, compoundVariants: [] });
+var selectMultiValue = "_dlenfcq-3-14-0";
+var selectNoOptionsMessage = "_dlenfci-3-14-0";
+var selectOptionMulti = "_dlenfct-3-14-0";
+var selectOptionMultiIndicator = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_dlenfcu-3-14-0", variantClassNames: { selected: { true: "_dlenfcv-3-14-0" } }, defaultVariants: {}, compoundVariants: [] });
+var selectOptionMultiIndicatorIcon = "_dlenfcw-3-14-0";
+var selectOptionPrefix = "_dlenfcx-3-14-0";
+var selectOptionSingle = "_dlenfcr-3-14-0";
+var selectOptionSuffix = "_dlenfcy-3-14-0";
+var selectTrigger = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_dlenfc9-3-14-0", variantClassNames: { fullWidth: { true: "_dlenfca-3-14-0" }, showError: { true: "_dlenfcb-3-14-0" }, readOnly: { true: "_dlenfcc-3-14-0" } }, defaultVariants: { fullWidth: false }, compoundVariants: [[{ showError: true, readOnly: true }, "_dlenfcd-3-14-0"], [{ showError: false, readOnly: true }, "_dlenfce-3-14-0"]] });
+var selectTriggerIconWrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_dlenfc6-3-14-0", variantClassNames: { isOverlayOpen: { true: "_dlenfc7-3-14-0" }, readOnly: { true: "_dlenfc8-3-14-0" } }, defaultVariants: { isOverlayOpen: false }, compoundVariants: [] });
+var selectValueContainerTruncationBox = "_dlenfcj-3-14-0";
+var selectVirtualizationWrapper = "_dlenfcg-3-14-0";
+var selectWrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_dlenfc2-3-14-0", variantClassNames: { fullWidth: { true: "_dlenfc3-3-14-0", false: "_dlenfc4-3-14-0" } }, defaultVariants: { fullWidth: false }, compoundVariants: [] });
+var validAndEnabled = "_dlenfck-3-14-0";

package/forms/select/types.d.ts

@@ -1,5 +1,5 @@
 import type * as CSS from 'csstype';
-import type { ReactNode } from 'react';
+import type { ReactNode, KeyboardEvent as ReactKeyboardEvent } from 'react';
 import type { GroupBase, OptionsOrGroups } from 'react-select';
 import type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';
 import { DataTestId } from '../../core/types/data-props.js';
@@ -66,4 +66,13 @@ export type SelectTriggerWidthOptionsType = 'content' | 'full' | CSS.Property.Wi
  * @public
  */
 export type SelectContentWidthOptionsType = 'trigger' | CSS.Property.Width<string & {}>;
+/**
+ * @internal
+ */
+export interface InteractiveElement {
+    isAvailable: () => boolean;
+    isCurrent: () => boolean;
+    focus: () => void;
+    handleKeyDown: (event: ReactKeyboardEvent<HTMLDivElement>) => void;
+}
 //# sourceMappingURL=types.d.ts.map

package/forms/spin-buttons/SpinButton.css

@@ -1,28 +1,28 @@
-._r47o0w1-3-13-2 {
+._r47o0w1-3-14-0 {
   display: inline-block;
   outline: none;
   caret-color: transparent;
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._r47o0w1-3-13-2:empty::before {
+._r47o0w1-3-14-0:empty::before {
   content: var(--data-placeholder);
 }
-._r47o0w1-3-13-2:focus:empty {
+._r47o0w1-3-14-0:focus:empty {
   color: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
   background-color: var(--dt-colors-background-field-neutral-accent, #5b5c81);
 }
-._r47o0w2-3-13-2 {
+._r47o0w2-3-14-0 {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._r47o0w2-3-13-2:focus:empty {
+._r47o0w2-3-14-0:focus:empty {
   background-color: var(--dt-colors-background-field-critical-accent, #c62239);
 }
-._r47o0w3-3-13-2 {
+._r47o0w3-3-14-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._r47o0w3-3-13-2:empty::before {
+._r47o0w3-3-14-0:empty::before {
   color: var(--dt-colors-text-critical-on-accent-disabled, #f9f1f380);
 }
-._r47o0w4-3-13-2 {
+._r47o0w4-3-14-0 {
   color: var(--dt-colors-text-critical-disabled, #595a7d80);
 }

package/forms/spin-buttons/SpinButton.sty.js

@@ -23,5 +23,5 @@ __export(SpinButton_css_exports, {
 module.exports = __toCommonJS(SpinButton_css_exports);
 var import_SpinButton_css_ts_vanilla = require("./SpinButton.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var spinButtonCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_r47o0w1-3-13-2", variantClassNames: { error: { true: "_r47o0w2-3-13-2" }, disabled: { true: "_r47o0w3-3-13-2" } }, defaultVariants: {}, compoundVariants: [[{ disabled: true, error: true }, "_r47o0w4-3-13-2"]] });
-var spinButtonGroupCSS = "_r47o0w0-3-13-2";
+var spinButtonCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_r47o0w1-3-14-0", variantClassNames: { error: { true: "_r47o0w2-3-14-0" }, disabled: { true: "_r47o0w3-3-14-0" } }, defaultVariants: {}, compoundVariants: [[{ disabled: true, error: true }, "_r47o0w4-3-14-0"]] });
+var spinButtonGroupCSS = "_r47o0w0-3-14-0";