@dynatrace/strato-components 3.0.1 → 3.1.0

package/content/skeleton/Skeleton.js

@@ -36,7 +36,10 @@ var import_clsx = __toESM(require("clsx"));
 var import_react = require("react");
 var import_Skeleton_css = require("./Skeleton.sty.js");
 var import_utils = require("./utils.js");
+var import_useAriaLabelingProps = require("../../core/hooks/useAriaLabelingProps.js");
+var import_useBehavioralTrackingProps = require("../../core/hooks/useBehavioralTrackingProps.js");
 var import_useId = require("../../core/hooks/useId.js");
+var import_useSafeForwardProps = require("../../core/hooks/useSafeForwardProps.js");
 const COMPONENT_NAME = "Skeleton";
 const Skeleton = (0, import_react.forwardRef)(
   (props, forwardedRef) => {
@@ -50,15 +53,20 @@ const Skeleton = (0, import_react.forwardRef)(
       "data-testid": dataTestId,
       ...remainingProps
     } = props;
+    const [behavioralTrackingProps, restProps] = (0, import_useBehavioralTrackingProps.useBehavioralTrackingProps)(remainingProps);
+    const ariaLabelingProps = (0, import_useAriaLabelingProps.useAriaLabelingProps)(restProps);
+    const forwardProps = (0, import_useSafeForwardProps.useSafeForwardProps)(restProps, ariaLabelingProps);
     const gradientId = (0, import_useId.useId)();
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       "div",
       {
-        "data-testid": dataTestId,
         ref: forwardedRef,
         className: (0, import_clsx.default)((0, import_Skeleton_css.skeletonPlaceholderCSS)({ variant }), consumerClassName),
         style: { width, height, ...consumerStyle },
-        ...remainingProps,
+        "data-testid": dataTestId,
+        ...ariaLabelingProps,
+        ...behavioralTrackingProps,
+        ...forwardProps,
         "data-dt-component": COMPONENT_NAME,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { className: import_Skeleton_css.skeletonSvgCSS, children: [

package/content/skeleton/Skeleton.sty.js

@@ -27,8 +27,8 @@ __export(Skeleton_css_exports, {
 module.exports = __toCommonJS(Skeleton_css_exports);
 var import_Skeleton_css_ts_vanilla = require("./Skeleton.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var skeletonPlaceholderCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1a1ozfd0-3-0-1", variantClassNames: { variant: { "default": "_1a1ozfd1-3-0-1", rounded: "_1a1ozfd2-3-0-1" } }, defaultVariants: {}, compoundVariants: [] });
-var skeletonSvgBackgroundFillCSS = "_1a1ozfd5-3-0-1";
-var skeletonSvgCSS = "_1a1ozfd3-3-0-1";
-var skeletonSvgGradientCSS = "_1a1ozfd4-3-0-1";
-var skeletonSvgGradientRectCSS = "_1a1ozfd6-3-0-1";
+var skeletonPlaceholderCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1a1ozfd0-3-1-0", variantClassNames: { variant: { "default": "_1a1ozfd1-3-1-0", rounded: "_1a1ozfd2-3-1-0" } }, defaultVariants: {}, compoundVariants: [] });
+var skeletonSvgBackgroundFillCSS = "_1a1ozfd5-3-1-0";
+var skeletonSvgCSS = "_1a1ozfd3-3-1-0";
+var skeletonSvgGradientCSS = "_1a1ozfd4-3-1-0";
+var skeletonSvgGradientRectCSS = "_1a1ozfd6-3-1-0";

package/content/skeleton/SkeletonText.d.ts

@@ -1,11 +1,13 @@
 import { type CSSProperties } from 'react';
-import { type DataTestId } from '../../core/types/data-props.js';
-import { type StylingProps } from '../../core/types/styling-props.js';
+import type { AriaLabelingProps } from '../../core/types/a11y-props.js';
+import type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';
+import type { DataTestId } from '../../core/types/data-props.js';
+import type { StylingProps } from '../../core/types/styling-props.js';
 /**
  * Accepted properties for SkeletonText
  * @public
  */
-export interface SkeletonTextProps extends StylingProps, DataTestId {
+export interface SkeletonTextProps extends StylingProps, DataTestId, AriaLabelingProps, BehaviorTrackingProps {
     /**
      * Width of the SkeletonText placeholder.
      * @defaultValue 100%

package/content/skeleton/SkeletonText.js

@@ -25,7 +25,10 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_Skeleton_css = require("./Skeleton.sty.js");
 var import_utils = require("./utils.js");
+var import_useAriaLabelingProps = require("../../core/hooks/useAriaLabelingProps.js");
+var import_useBehavioralTrackingProps = require("../../core/hooks/useBehavioralTrackingProps.js");
 var import_useId = require("../../core/hooks/useId.js");
+var import_useSafeForwardProps = require("../../core/hooks/useSafeForwardProps.js");
 const COMPONENT_NAME = "SkeletonText";
 const lineHeight = 12;
 const linePadding = 8;
@@ -48,12 +51,14 @@ const SkeletonText = (0, import_react.forwardRef)(
       "data-testid": dataTestId,
       ...remainingProps
     } = props;
+    const [behavioralTrackingProps, restProps] = (0, import_useBehavioralTrackingProps.useBehavioralTrackingProps)(remainingProps);
+    const ariaLabelingProps = (0, import_useAriaLabelingProps.useAriaLabelingProps)(restProps);
+    const forwardProps = (0, import_useSafeForwardProps.useSafeForwardProps)(restProps, ariaLabelingProps);
     const maskId = (0, import_useId.useId)();
     const gradientId = (0, import_useId.useId)();
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
       {
-        "data-testid": dataTestId,
         ref: forwardedRef,
         className: consumerClassName,
         style: {
@@ -61,7 +66,10 @@ const SkeletonText = (0, import_react.forwardRef)(
           height: `${lineStep * lines}px`,
           ...consumerStyle
         },
-        ...remainingProps,
+        "data-testid": dataTestId,
+        ...ariaLabelingProps,
+        ...behavioralTrackingProps,
+        ...forwardProps,
         "data-dt-component": COMPONENT_NAME,
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { className: import_Skeleton_css.skeletonSvgCSS, children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_utils.SkeletonGradient, { id: gradientId }) }),

package/content/terminology-overlay/TerminologyOverlay.css

@@ -1,4 +1,4 @@
-._1dd8zuz0-3-0-1 {
+._1dd8zuz0-3-1-0 {
   border: none;
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   padding: var(--dt-spacings-size-0, 0);
@@ -16,13 +16,13 @@
   text-decoration-color: var(--dt-colors-border-neutral-accent, #595a7d);
   transition: background-color var(--dt-animations-hover-duration-base, 150ms) var(--dt-animations-hover-easing, cubic-bezier(0, 0, 0.2, 1));
 }
-._1dd8zuz0-3-0-1:hover {
+._1dd8zuz0-3-1-0:hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._1dd8zuz0-3-0-1:active {
+._1dd8zuz0-3-1-0:active {
   background: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
 }
-._1dd8zuz0-3-0-1:not(.strato-focus-visible) {
+._1dd8zuz0-3-1-0:not(.strato-focus-visible) {
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
   background-color: var(--dt-colors-background-field-neutral-default, #e4e5eb00);
 }

package/content/terminology-overlay/TerminologyOverlay.d.ts

@@ -1,13 +1,14 @@
 import { type ReactNode } from 'react';
-import { AriaLabelingProps } from '../../core/types/a11y-props.js';
-import { DataTestId } from '../../core/types/data-props.js';
-import { MaskingProps } from '../../core/types/masking-props.js';
-/** @internal */
-export declare const COMPONENT_NAME = "TerminologyOverlay";
+import { type TerminologyOverlayTriggerProps } from './Trigger.js';
+import type { AriaLabelingProps } from '../../core/types/a11y-props.js';
+import type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';
+import type { DataTestId } from '../../core/types/data-props.js';
+import type { MaskingProps } from '../../core/types/masking-props.js';
+import type { StylingProps } from '../../core/types/styling-props.js';
 /**
  * @public
  */
-export interface TerminologyOverlayProps extends AriaLabelingProps, DataTestId, MaskingProps {
+export interface TerminologyOverlayProps extends AriaLabelingProps, DataTestId, MaskingProps, StylingProps, BehaviorTrackingProps {
     /**
      * Whether the overlay is open by default
      * @defaultValue false
@@ -27,7 +28,7 @@ export declare const TerminologyOverlay: ((props: TerminologyOverlayProps & impo
         (props: import("./Description.js").TerminologyDescriptionProps): import("react/jsx-runtime.js").JSX.Element;
         displayName: string;
     };
-    Trigger: (props: import("./Trigger.js").TerminologyOverlayTriggerProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
+    Trigger: (props: TerminologyOverlayTriggerProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
     Footer: {
         ({ children }: import("react").PropsWithChildren): import("react/jsx-runtime.js").JSX.Element;
         displayName: string;

package/content/terminology-overlay/TerminologyOverlay.js

@@ -18,7 +18,6 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var TerminologyOverlay_exports = {};
 __export(TerminologyOverlay_exports, {
-  COMPONENT_NAME: () => COMPONENT_NAME,
   TerminologyOverlay: () => TerminologyOverlay
 });
 module.exports = __toCommonJS(TerminologyOverlay_exports);
@@ -26,27 +25,33 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_Description = require("./Description.js");
 var import_Footer = require("./Footer.js");
+var import_terminology_overlay_constants = require("./terminology-overlay-constants.js");
 var import_TerminologyOverlayContext = require("./TerminologyOverlayContext.js");
 var import_Trigger = require("./Trigger.js");
 var import_useAriaLabelingProps = require("../../core/hooks/useAriaLabelingProps.js");
+var import_useBehavioralTrackingProps = require("../../core/hooks/useBehavioralTrackingProps.js");
 var import_useMergeRefs = require("../../core/hooks/useMergeRefs.js");
+var import_useSafeForwardProps = require("../../core/hooks/useSafeForwardProps.js");
 var import_useSlots = require("../../core/hooks/useSlots.js");
 var import_logging = require("../../core/utils/logging.js");
 var import_Flex = require("../../layouts/flex/Flex.js");
 var import_useBreakpoint = require("../../layouts/hooks/useBreakpoint.js");
 var import_useOverlayWithTrigger = require("../../overlays/hooks/useOverlayWithTrigger.js");
 var import_Overlay = require("../../overlays/overlay/Overlay.js");
-const COMPONENT_NAME = "TerminologyOverlay";
 const TerminologyOverlayRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwardedRef) => {
   const {
     children,
     defaultOpen,
+    className: consumerClassName,
+    style: consumerStyle,
     "data-testid": dataTestId,
     "data-dtrum-mask": dataDtrumMask,
     "data-dtrum-allow": dataDtrumAllow,
     ...remainingProps
   } = props;
-  const ariaProps = (0, import_useAriaLabelingProps.useAriaLabelingProps)(remainingProps);
+  const [behavioralTrackingProps, restProps] = (0, import_useBehavioralTrackingProps.useBehavioralTrackingProps)(remainingProps);
+  const ariaLabelingProps = (0, import_useAriaLabelingProps.useAriaLabelingProps)(restProps);
+  const forwardProps = (0, import_useSafeForwardProps.useSafeForwardProps)(restProps, ariaLabelingProps);
   const smallerScreens = (0, import_useBreakpoint.useBreakpoint)("(max-width: 480px)");
   const {
     targetRef,
@@ -70,17 +75,23 @@ const TerminologyOverlayRoot = /* @__PURE__ */ (0, import_react.forwardRef)((pro
     footer: { match: import_Footer.Footer, multiple: true }
   });
   const rootRef = (0, import_useMergeRefs.useMergeRefs)([forwardedRef, triggerRef, targetRef]);
+  const { children: triggerChildren, ...triggerSlotProps } = slots.trigger?.props ?? {};
   if (slots.trigger === void 0) {
     (0, import_logging.devLog)("Trigger element has not been defined!");
   }
+  const triggerProps = slots.trigger?.props ?? {};
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_TerminologyOverlayContext.TerminologyOverlayContext.Provider, { value: overlayTriggerProps, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_Trigger.Trigger,
       {
         ref: rootRef,
-        "data-dtrum-mask": dataDtrumMask,
-        "data-dtrum-allow": dataDtrumAllow,
-        children: slots.trigger?.props.children
+        className: triggerProps.className,
+        style: triggerProps.style,
+        "data-testid": triggerProps["data-testid"],
+        "data-dtrum-mask": triggerProps["data-dtrum-mask"] ?? dataDtrumMask,
+        "data-dtrum-allow": triggerProps["data-dtrum-allow"] ?? dataDtrumAllow,
+        ...triggerSlotProps,
+        children: triggerChildren
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -89,11 +100,15 @@ const TerminologyOverlayRoot = /* @__PURE__ */ (0, import_react.forwardRef)((pro
         ref: overlayRef,
         isOpen: overlayState.isOpen,
         overlayProps,
+        className: consumerClassName,
+        style: consumerStyle,
         "data-testid": dataTestId,
         "data-dtrum-mask": dataDtrumMask,
         "data-dtrum-allow": dataDtrumAllow,
-        ...ariaProps,
-        "data-dt-component": COMPONENT_NAME,
+        ...ariaLabelingProps,
+        ...behavioralTrackingProps,
+        ...forwardProps,
+        "data-dt-component": import_terminology_overlay_constants.COMPONENT_NAME,
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Flex.Flex, { paddingY: 12, paddingX: 16, flexDirection: "column", children: [
           slots.description,
           slots.footer
@@ -102,7 +117,7 @@ const TerminologyOverlayRoot = /* @__PURE__ */ (0, import_react.forwardRef)((pro
     )
   ] });
 });
-TerminologyOverlayRoot.displayName = COMPONENT_NAME;
+TerminologyOverlayRoot.displayName = import_terminology_overlay_constants.COMPONENT_NAME;
 const TerminologyOverlay = Object.assign(TerminologyOverlayRoot, {
   Description: import_Description.Description,
   Trigger: import_Trigger.Trigger,

package/content/terminology-overlay/TerminologyOverlay.sty.js

@@ -22,4 +22,4 @@ __export(TerminologyOverlay_css_exports, {
 });
 module.exports = __toCommonJS(TerminologyOverlay_css_exports);
 var import_TerminologyOverlay_css_ts_vanilla = require("./TerminologyOverlay.css");
-var trigger = "_1dd8zuz0-3-0-1";
+var trigger = "_1dd8zuz0-3-1-0";

package/content/terminology-overlay/Trigger.d.ts

@@ -1,11 +1,13 @@
 import { type ReactNode } from 'react';
-import { DataTestId } from '../../core/types/data-props.js';
-import { DOMProps } from '../../core/types/dom.js';
-import { StylingProps } from '../../core/types/styling-props.js';
+import type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';
+import type { DataTestId } from '../../core/types/data-props.js';
+import type { DOMProps } from '../../core/types/dom.js';
+import type { MaskingProps } from '../../core/types/masking-props.js';
+import type { StylingProps } from '../../core/types/styling-props.js';
 /**
  * @public
  */
-export interface TerminologyOverlayTriggerProps extends DOMProps, StylingProps, DataTestId {
+export interface TerminologyOverlayTriggerProps extends DOMProps, StylingProps, DataTestId, MaskingProps, BehaviorTrackingProps {
     /**
      * Trigger Overlay button must contain children elements.
      */

package/content/terminology-overlay/Trigger.js

@@ -34,9 +34,10 @@ module.exports = __toCommonJS(Trigger_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_clsx = __toESM(require("clsx"));
 var import_react = require("react");
+var import_terminology_overlay_constants = require("./terminology-overlay-constants.js");
 var import_TerminologyOverlay_css = require("./TerminologyOverlay.sty.js");
-var import_TerminologyOverlay = require("./TerminologyOverlay.js");
 var import_TerminologyOverlayContext = require("./TerminologyOverlayContext.js");
+var import_useBehavioralTrackingProps = require("../../core/hooks/useBehavioralTrackingProps.js");
 var import_useFocusRing = require("../../core/styles/useFocusRing.js");
 var import_merge_props = require("../../core/utils/merge-props.js");
 const Trigger = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwardedRef) => {
@@ -44,8 +45,16 @@ const Trigger = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwardedRe
     children,
     className: consumerClassName,
     style: consumerStyle,
-    "data-testid": dataTestId
+    "data-testid": dataTestId,
+    "data-dtrum-mask": dataDtrumMask,
+    "data-dtrum-allow": dataDtrumAllow,
+    ...remainingProps
   } = props;
+  const [behavioralTrackingProps] = (0, import_useBehavioralTrackingProps.useBehavioralTrackingProps)(remainingProps);
+  const {
+    "data-dt-name": dataDtName = "Trigger",
+    ...remainingBehavioralTrackingProps
+  } = behavioralTrackingProps;
   const { focusProps, focusClassName, isFocusVisible } = (0, import_useFocusRing.useFocusRing)({
     isMinimal: true
   });
@@ -53,19 +62,30 @@ const Trigger = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwardedRe
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "button",
     {
-      "data-testid": dataTestId,
-      "data-dt-component": import_TerminologyOverlay.COMPONENT_NAME,
-      "data-dt-name": "Trigger",
-      className: (0, import_clsx.default)(consumerClassName, focusClassName, import_TerminologyOverlay_css.trigger, {
-        "strato-focus-visible": isFocusVisible
-      }),
+      className: (0, import_clsx.default)(
+        focusClassName,
+        import_TerminologyOverlay_css.trigger,
+        {
+          "strato-focus-visible": isFocusVisible
+        },
+        consumerClassName
+      ),
       style: {
         textDecoration: isFocusVisible ? "none" : void 0,
         ...consumerStyle
       },
       ref: forwardedRef,
-      ...(0, import_merge_props.mergeProps)(overlayTriggerProps, focusProps),
+      ...(0, import_merge_props.mergeProps)(
+        overlayTriggerProps,
+        focusProps,
+        remainingBehavioralTrackingProps
+      ),
       "aria-haspopup": "dialog",
+      "data-testid": dataTestId,
+      "data-dtrum-mask": dataDtrumMask,
+      "data-dtrum-allow": dataDtrumAllow,
+      "data-dt-name": dataDtName,
+      "data-dt-component": import_terminology_overlay_constants.COMPONENT_NAME,
       children
     }
   );

package/content/terminology-overlay/terminology-overlay-constants.d.ts

@@ -0,0 +1,2 @@
+/** @internal */
+export declare const COMPONENT_NAME = "TerminologyOverlay";

package/content/terminology-overlay/terminology-overlay-constants.js

@@ -0,0 +1,24 @@
+"use strict";
+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 terminology_overlay_constants_exports = {};
+__export(terminology_overlay_constants_exports, {
+  COMPONENT_NAME: () => COMPONENT_NAME
+});
+module.exports = __toCommonJS(terminology_overlay_constants_exports);
+const COMPONENT_NAME = "TerminologyOverlay";

package/core/components/visually-hidden/VisuallyHidden.css

@@ -1,4 +1,4 @@
-._1xz8nhz0-3-0-1 {
+._1xz8nhz0-3-1-0 {
   width: 0;
   height: 0;
   opacity: 0;

package/core/components/visually-hidden/VisuallyHidden.sty.js

@@ -22,4 +22,4 @@ __export(VisuallyHidden_css_exports, {
 });
 module.exports = __toCommonJS(VisuallyHidden_css_exports);
 var import_VisuallyHidden_css_ts_vanilla = require("./VisuallyHidden.css");
-var visuallyHidden = "_1xz8nhz0-3-0-1";
+var visuallyHidden = "_1xz8nhz0-3-1-0";

package/core/contexts/FocusContext.d.ts

@@ -1,4 +1,8 @@
-import type { Modality } from '../providers/FocusProvider.js';
+/**
+ * Type defining the modality options for the focus handling.
+ * @internal
+ */
+export type Modality = 'keyboard' | 'pointer' | 'touch' | 'unknown';
 /**
  * Defines the contents of the FocusContext.
  * @internal

package/core/hooks/useCallbackRef.js

@@ -28,5 +28,5 @@ function useCallbackRef(fn, deps = []) {
   (0, import_useSafeLayoutEffect.useSafeLayoutEffect)(() => {
     ref.current = fn;
   });
-  return (0, import_react.useCallback)((...args) => ref.current?.(...args), deps);
+  return (0, import_react.useCallback)(((...args) => ref.current?.(...args)), deps);
 }

package/core/index.d.ts

@@ -1,10 +1,10 @@
 export { AppRoot, type AppRootProps } from './components/app-root/AppRoot.js';
 export { FocusScope, type FocusScopeProps, } from './components/focus-scope/FocusScope.js';
-export { type FocusContextProps as _FocusContextProps } from './contexts/FocusContext.js';
+export type { FocusContextProps as _FocusContextProps, Modality as _Modality, } from './contexts/FocusContext.js';
 export { useCurrentTheme } from './hooks/useCurrentTheme.js';
 export { useFocusContext as _useFocusContext } from './hooks/useFocusContext.js';
 export { type UseFocusRingProps, type FocusRingProps, useFocusRing, } from './styles/useFocusRing.js';
-export { FocusProvider as _FocusProvider, type Modality as _Modality, } from './providers/FocusProvider.js';
+export { FocusProvider as _FocusProvider } from './providers/FocusProvider.js';
 export type { MaskingProps } from './types/masking-props.js';
 export type { DataTestId } from './types/data-props.js';
 export type { StylingProps } from './types/styling-props.js';
@@ -81,7 +81,11 @@ export type { PointerType } from './types/pointer.js';
 export type { CombinedThresholds, ThresholdPropsWithBackgroundColorOptional, ThresholdPropsWithColorOptional, SingleThreshold, Threshold, ThresholdColor, ThresholdColors, ThresholdExtended, ThresholdForNumbers, ThresholdForStrings, ThresholdNumbersComparator, ThresholdOptions, ThresholdRule, ThresholdStringsComparator, } from './types/threshold-types.js';
 export type { TimeDetails, Timeframe, TimeValue, } from './types/time.js';
 export { isNumber, isPotentialDateValue } from './types/type-guards.js';
-export { formatDateDefault as _formatDate } from './utils/default-formatters.js';
+export { 
+/**
+ * @deprecated Will be removed in the future.
+ */
+formatDatetimeDefault as _formatDate, } from './utils/default-formatters.js';
 export { _sanitizeSymbol } from './utils/sanitize-symbol.js';
 export { convertToNumberIfPureNumber as _convertToNumberIfPureNumber } from './utils/string-utils.js';
 export { _InteractiveSelector } from './utils/styles/interactiveSelector.js';

package/core/index.js

@@ -42,7 +42,7 @@ __export(core_exports, {
   _downloadCSV: () => import_download.downloadCSV,
   _downloadFromUrl: () => import_download.downloadFromUrl,
   _focusFirstDescendant: () => import_focus_first_descendant.focusFirstDescendant,
-  _formatDate: () => import_default_formatters.formatDateDefault,
+  _formatDate: () => import_default_formatters.formatDatetimeDefault,
   _getFirstFocusableChild: () => import_get_first_focusable_child.getFirstFocusableChild,
   _getLastFocusableChild: () => import_get_last_focusable_child.getLastFocusableChild,
   _isBrowser: () => import_isBrowser.isBrowser,

package/core/providers/FocusProvider.d.ts

@@ -1,9 +1,4 @@
 import type { WithChildren } from '../types/with-children.js';
-/**
- * Type defining the modality options for the focus handling.
- * @internal
- */
-export type Modality = 'keyboard' | 'pointer' | 'touch' | 'unknown';
 /**
  * Provider that can be reused in components for storing the focus context props.
  * Loosely inspired by [what-input-js](https://github.com/ten1seven/what-input/blob/main/src/scripts/what-input.js).

package/core/sdk/sdk-logger.js

@@ -39,17 +39,17 @@ const LOGGER_FACTORY = /* @__PURE__ */ (() => {
     if (supportsLoggerV2()) {
       return dtRuntimeLogger.createLoggerFactoryV2({
         context: {
-          id: "@dynatrace/strato-design-system-preview",
+          id: "@dynatrace/strato-design-system",
           // @ts-expect-error Global variable injected at package build time
-          version: "3.0.1"
+          version: "3.1.0"
         }
       });
     } else if (supportsLoggerV1()) {
       return dtRuntimeLogger.createLoggerFactory({
         context: {
-          id: "@dynatrace/strato-design-system-preview",
+          id: "@dynatrace/strato-design-system",
           // @ts-expect-error Global variable injected at package build time
-          version: "3.0.1"
+          version: "3.1.0"
         }
       });
     }

package/core/styles/defaultChartValues.css

@@ -1,4 +1,4 @@
-._1rtjj3o0-3-0-1 {
+._1rtjj3o0-3-1-0 {
   line-height: normal;
   width: inherit;
 }

package/core/styles/defaultChartValues.sty.js

@@ -22,4 +22,4 @@ __export(defaultChartValues_css_exports, {
 });
 module.exports = __toCommonJS(defaultChartValues_css_exports);
 var import_defaultChartValues_css_ts_vanilla = require("./defaultChartValues.css");
-var defaultChartSize = "_1rtjj3o0-3-0-1";
+var defaultChartSize = "_1rtjj3o0-3-1-0";