@dynatrace/strato-components 0.84.21 → 0.84.42

package/core/components/app-root/AppRoot.d.ts

@@ -2,16 +2,21 @@ import React, { type PropsWithChildren } from 'react';
 import 'wicg-inert';
 import './AppRoot.css.js';
 import { type DataTestId } from '../../types/data-props.js';
+import { type MaskingProps } from '../../types/masking-props.js';
 import { type StylingProps } from '../../types/styling-props.js';
-/** AppRoot component props. */
-export type AppRootProps = PropsWithChildren<DataTestId & StylingProps>;
 /**
+ * @public
+ * AppRoot component props.
+ */
+export type AppRootProps = PropsWithChildren<DataTestId & StylingProps & MaskingProps>;
+/**
+ * @public
  * In order to have all the providers in place for rendering overlays, applying
  * global styles or internationalization, you need to wrap your app in the
  * `AppRoot`. If you're using the `dt-app` to create your app, this is
  * automatically taken care of and you can start working on your app without
  * further ado.
  */
-export declare const AppRoot: React.ForwardRefExoticComponent<DataTestId & StylingProps & {
+export declare const AppRoot: (props: DataTestId & StylingProps & MaskingProps & {
     children?: React.ReactNode;
-} & React.RefAttributes<HTMLDivElement>>;
+} & React.RefAttributes<HTMLDivElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;

package/core/components/app-root/AppRoot.js

@@ -49,7 +49,9 @@ const AppRoot = /* @__PURE__ */ (0, import_react.forwardRef)(
     const {
       style: consumerStyle,
       className: consumerClassName,
-      "data-testid": dataTestId = "app-root"
+      "data-testid": dataTestId = "app-root",
+      "data-dtrum-mask": dataDtrumMask,
+      "data-dtrum-allow": dataDtrumAllow
     } = props;
     const [messages, setMessages] = (0, import_react.useState)({});
     const { children } = props;
@@ -94,7 +96,9 @@ const AppRoot = /* @__PURE__ */ (0, import_react.forwardRef)(
         "data-testid": dataTestId,
         className: consumerClassName,
         style: consumerStyle,
-        "data-theme": theme
+        "data-theme": theme,
+        "data-dtrum-mask": dataDtrumMask,
+        "data-dtrum-allow": dataDtrumAllow
       },
       /* @__PURE__ */ import_react.default.createElement(
         import_react_intl.IntlProvider,

package/core/contexts/FocusContext.d.ts

@@ -1,4 +1,4 @@
-import { Modality } from '../providers/FocusProvider.js';
+import type { Modality } from '../providers/FocusProvider.js';
 /**
  * Defines the contents of the FocusContext.
  * @internal

package/core/hooks/useCurrentTheme.d.ts

@@ -1,2 +1,5 @@
-/** Returns the current theme based on sdk-setting or browsers preferred color-scheme */
+/**
+ * @public
+ * Returns the current theme based on sdk-setting or browsers preferred color-scheme
+ */
 export declare function useCurrentTheme(): 'light' | 'dark';

package/core/hooks/useFontsUpdated.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Hook that checks if the initially loaded fonts were updated.
+ * Used to trigger remeasuring in the DataTable (autoWidth) and TextEllipsis once all fonts are loaded.
+ *
+ * @param callback - optionally pass a function to be executed once when the fonts were updated
+ * @returns boolean whether the fonts have changed
+ * @internal
+ */
+export declare function _useFontsUpdated(callback?: () => void): boolean;

package/core/hooks/useFontsUpdated.js

@@ -0,0 +1,51 @@
+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 useFontsUpdated_exports = {};
+__export(useFontsUpdated_exports, {
+  _useFontsUpdated: () => _useFontsUpdated
+});
+module.exports = __toCommonJS(useFontsUpdated_exports);
+var import_lodash_es = require("lodash");
+var import_react = require("react");
+function _useFontsUpdated(callback) {
+  const [fontsUpdated, setFontsUpdated] = (0, import_react.useState)(false);
+  const prevFontFamilies = (0, import_react.useRef)();
+  const fontFamilies = [];
+  const firstRender = (0, import_react.useRef)(true);
+  if (document.fonts) {
+    if (firstRender.current) {
+      const loadedFontFamilies = [];
+      document.fonts.forEach(
+        (fontFace) => loadedFontFamilies.push(`${fontFace.family} ${fontFace.weight}`)
+      );
+      prevFontFamilies.current = loadedFontFamilies;
+      firstRender.current = false;
+    }
+    document.fonts.ready.then((fontFaceSet) => {
+      fontFaceSet.forEach(
+        (fontFace) => fontFamilies.push(`${fontFace.family} ${fontFace.weight}`)
+      );
+      if (!(0, import_lodash_es.isEqual)(prevFontFamilies.current, fontFamilies)) {
+        prevFontFamilies.current = fontFamilies;
+        callback?.();
+        setFontsUpdated(true);
+      }
+    });
+  }
+  return fontsUpdated;
+}

package/core/hooks/useMergeRefs.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+/**
+ * If you have multiple references (e.g. from different hooks) you need to apply to
+ * the same element, you can use the `useMergeRefs` hook to combine them into one
+ * reference.
+ */
+export declare function useMergeRefs<T = unknown>(refs: Array<React.MutableRefObject<T> | React.LegacyRef<T> | React.Dispatch<React.SetStateAction<T | null>> | undefined>): React.RefCallback<T>;

package/core/hooks/useMergeRefs.js

@@ -0,0 +1,34 @@
+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 useMergeRefs_exports = {};
+__export(useMergeRefs_exports, {
+  useMergeRefs: () => useMergeRefs
+});
+module.exports = __toCommonJS(useMergeRefs_exports);
+var import_react = require("react");
+function useMergeRefs(refs) {
+  return (0, import_react.useCallback)((value) => {
+    for (const ref of refs) {
+      if (typeof ref === "function") {
+        ref(value);
+      } else if (ref !== void 0 && ref !== null) {
+        ref.current = value;
+      }
+    }
+  }, refs);
+}

package/core/index.d.ts

@@ -4,6 +4,7 @@ export { type FocusContextProps as _FocusContextProps } from './contexts/FocusCo
 export { useCurrentTheme } from './hooks/useCurrentTheme.js';
 export { useFocusContext as _useFocusContext } from './hooks/useFocusContext.js';
 export { FocusProvider as _FocusProvider, type Modality as _Modality, } 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';
 export type { WithChildren } from './types/with-children.js';
@@ -14,3 +15,7 @@ export { getLastFocusableChild as _getLastFocusableChild } from './utils/focus-m
 export { isFocusable as _isFocusable } from './utils/focus-management/is-focusable.js';
 export { isBrowser as _isBrowser } from './utils/isBrowser.js';
 export { mergeProps as _mergeProps, type NullToObject as _NullToObject, type TupleTypes as _TupleTypes, type UnionToIntersection as _UnionToIntersection, } from './utils/merge-props.js';
+export type { AriaLabelingProps } from './types/a11y-props.js';
+export type { DOMProps } from './types/dom.js';
+export type { PolymorphicComponentProps, PolymorphProps, PolymorphOwnProps, } from './types/polymorph.js';
+export { type _HeadingLevel, type _HeadingTag } from './types/heading.js';

package/core/styles/focusRing.css

@@ -0,0 +1,88 @@
+.focusRing_focusRingCSS__z2r50s3 {
+  outline: none;
+}
+.focusRing_focusRingCSS__z2r50s3:focus-visible {
+  outline: none;
+}
+.focusRing_focusRingCSS_minimal_true__z2r50s4 {
+  border-radius: calc(var(--dt-borders-radius-field-subdued, 4px) / 2);
+  box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--outerShadow__z2r50s0);
+  background-color: var(--backgroundColor__z2r50s2);
+}
+.focusRing_focusRingCSS_minimal_false__z2r50s5.focusRing_focusRingCSS_minimal_false__z2r50s5 {
+  box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--outerShadow__z2r50s0), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--innerShadow__z2r50s1);
+}
+.focusRing_focusRingCSS_variant_neutral__z2r50s6 {
+  --outerShadow__z2r50s0: var(--dt-colors-border-neutral-accent, #545587);
+  --innerShadow__z2r50s1: var(--dt-colors-border-neutral-default, #d2d3e1);
+  --backgroundColor__z2r50s2: var(--dt-colors-background-field-neutral-emphasized, #dadbe7);
+}
+.focusRing_focusRingCSS_variant_primary__z2r50s7 {
+  --outerShadow__z2r50s0: var(--dt-colors-border-primary-accent, #454cc9);
+  --innerShadow__z2r50s1: var(--dt-colors-border-primary-default, #ccd3f3);
+  --backgroundColor__z2r50s2: var(--dt-colors-background-field-primary-emphasized, #d6dbf4);
+}
+.focusRing_focusRingCSS_variant_success__z2r50s8 {
+  --outerShadow__z2r50s0: var(--dt-colors-border-success-accent, #2c6360);
+  --innerShadow__z2r50s1: var(--dt-colors-border-success-default, #cad6d7);
+  --backgroundColor__z2r50s2: var(--dt-colors-background-field-success-emphasized, #d4dddf);
+}
+.focusRing_focusRingCSS_variant_warning__z2r50s9 {
+  --outerShadow__z2r50s0: var(--dt-colors-border-warning-accent, #805100);
+  --innerShadow__z2r50s1: var(--dt-colors-border-warning-default, #f4e5d5);
+  --backgroundColor__z2r50s2: var(--dt-colors-background-field-warning-emphasized, #f4e8de);
+}
+.focusRing_focusRingCSS_variant_critical__z2r50sa {
+  --outerShadow__z2r50s0: var(--dt-colors-border-critical-accent, #b80031);
+  --innerShadow__z2r50s1: var(--dt-colors-border-critical-default, #f1cdcf);
+  --backgroundColor__z2r50s2: var(--dt-colors-background-field-critical-emphasized, #f2d7d9);
+}
+.focusRing_focusRingCSS_variant_onAccent__z2r50sb {
+  --outerShadow__z2r50s0: var(--dt-colors-border-on-accent-default, #f3f3f7);
+  --innerShadow__z2r50s1: var(--dt-colors-border-on-accent-default, #f3f3f7);
+  --backgroundColor__z2r50s2: var(--dt-colors-background-field-on-accent-emphasized, #f3f3f733);
+}
+.focusRing_focusRingFocusWithinCSS__z2r50sc:focus-within {
+  outline: none;
+  :focus-visible {
+    outline: none;
+  }
+}
+.focusRing_focusRingFocusWithinCSS_minimal_true__z2r50sd:focus-within {
+  border-radius: calc(var(--dt-borders-radius-field-subdued, 4px) / 2);
+  box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--outerShadow__z2r50s0);
+  background-color: var(--backgroundColor__z2r50s2);
+}
+.focusRing_focusRingFocusWithinCSS_minimal_false__z2r50se:focus-within {
+  box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--outerShadow__z2r50s0), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--innerShadow__z2r50s1);
+}
+.focusRing_focusRingFocusWithinCSS_variant_neutral__z2r50sf {
+  --outerShadow__z2r50s0: var(--dt-colors-border-neutral-accent, #545587);
+  --innerShadow__z2r50s1: var(--dt-colors-border-neutral-default, #d2d3e1);
+  --backgroundColor__z2r50s2: var(--dt-colors-background-field-neutral-emphasized, #dadbe7);
+}
+.focusRing_focusRingFocusWithinCSS_variant_primary__z2r50sg {
+  --outerShadow__z2r50s0: var(--dt-colors-border-primary-accent, #454cc9);
+  --innerShadow__z2r50s1: var(--dt-colors-border-primary-default, #ccd3f3);
+  --backgroundColor__z2r50s2: var(--dt-colors-background-field-primary-emphasized, #d6dbf4);
+}
+.focusRing_focusRingFocusWithinCSS_variant_success__z2r50sh {
+  --outerShadow__z2r50s0: var(--dt-colors-border-success-accent, #2c6360);
+  --innerShadow__z2r50s1: var(--dt-colors-border-success-default, #cad6d7);
+  --backgroundColor__z2r50s2: var(--dt-colors-background-field-success-emphasized, #d4dddf);
+}
+.focusRing_focusRingFocusWithinCSS_variant_warning__z2r50si {
+  --outerShadow__z2r50s0: var(--dt-colors-border-warning-accent, #805100);
+  --innerShadow__z2r50s1: var(--dt-colors-border-warning-default, #f4e5d5);
+  --backgroundColor__z2r50s2: var(--dt-colors-background-field-warning-emphasized, #f4e8de);
+}
+.focusRing_focusRingFocusWithinCSS_variant_critical__z2r50sj {
+  --outerShadow__z2r50s0: var(--dt-colors-border-critical-accent, #b80031);
+  --innerShadow__z2r50s1: var(--dt-colors-border-critical-default, #f1cdcf);
+  --backgroundColor__z2r50s2: var(--dt-colors-background-field-critical-emphasized, #f2d7d9);
+}
+.focusRing_focusRingFocusWithinCSS_variant_onAccent__z2r50sk {
+  --outerShadow__z2r50s0: var(--dt-colors-border-on-accent-default, #f3f3f7);
+  --innerShadow__z2r50s1: var(--dt-colors-border-on-accent-default, #f3f3f7);
+  --backgroundColor__z2r50s2: var(--dt-colors-background-field-on-accent-emphasized, #f3f3f733);
+}

package/core/styles/focusRing.sty.d.ts

@@ -0,0 +1,96 @@
+export declare const focusRingCSS: import("@vanilla-extract/recipes").RuntimeFn<{
+    minimal: {
+        true: {
+            borderRadius: string;
+            boxShadow: string;
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        false: {
+            selectors: {
+                '&&': {
+                    boxShadow: string;
+                };
+            };
+        };
+    };
+    variant: {
+        neutral: {
+            vars: {
+                [x: string]: string;
+            };
+        };
+        primary: {
+            vars: {
+                [x: string]: string;
+            };
+        };
+        success: {
+            vars: {
+                [x: string]: string;
+            };
+        };
+        warning: {
+            vars: {
+                [x: string]: string;
+            };
+        };
+        critical: {
+            vars: {
+                [x: string]: string;
+            };
+        };
+        onAccent: {
+            vars: {
+                [x: string]: string;
+            };
+        };
+    };
+}>;
+export declare const focusRingFocusWithinCSS: import("@vanilla-extract/recipes").RuntimeFn<{
+    minimal: {
+        true: {
+            ':focus-within': {
+                borderRadius: string;
+                boxShadow: string;
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+        };
+        false: {
+            ':focus-within': {
+                boxShadow: string;
+            };
+        };
+    };
+    variant: {
+        neutral: {
+            vars: {
+                [x: string]: string;
+            };
+        };
+        primary: {
+            vars: {
+                [x: string]: string;
+            };
+        };
+        success: {
+            vars: {
+                [x: string]: string;
+            };
+        };
+        warning: {
+            vars: {
+                [x: string]: string;
+            };
+        };
+        critical: {
+            vars: {
+                [x: string]: string;
+            };
+        };
+        onAccent: {
+            vars: {
+                [x: string]: string;
+            };
+        };
+    };
+}>;

package/core/styles/focusRing.sty.js

@@ -0,0 +1,27 @@
+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 focusRing_css_exports = {};
+__export(focusRing_css_exports, {
+  focusRingCSS: () => focusRingCSS,
+  focusRingFocusWithinCSS: () => focusRingFocusWithinCSS
+});
+module.exports = __toCommonJS(focusRing_css_exports);
+var import_focusRing_css_ts_vanilla = require("./focusRing.css");
+var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
+var focusRingCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "focusRing_focusRingCSS__z2r50s3", variantClassNames: { minimal: { true: "focusRing_focusRingCSS_minimal_true__z2r50s4", false: "focusRing_focusRingCSS_minimal_false__z2r50s5" }, variant: { neutral: "focusRing_focusRingCSS_variant_neutral__z2r50s6", primary: "focusRing_focusRingCSS_variant_primary__z2r50s7", success: "focusRing_focusRingCSS_variant_success__z2r50s8", warning: "focusRing_focusRingCSS_variant_warning__z2r50s9", critical: "focusRing_focusRingCSS_variant_critical__z2r50sa", onAccent: "focusRing_focusRingCSS_variant_onAccent__z2r50sb" } }, defaultVariants: {}, compoundVariants: [] });
+var focusRingFocusWithinCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "focusRing_focusRingFocusWithinCSS__z2r50sc", variantClassNames: { minimal: { true: "focusRing_focusRingFocusWithinCSS_minimal_true__z2r50sd", false: "focusRing_focusRingFocusWithinCSS_minimal_false__z2r50se" }, variant: { neutral: "focusRing_focusRingFocusWithinCSS_variant_neutral__z2r50sf", primary: "focusRing_focusRingFocusWithinCSS_variant_primary__z2r50sg", success: "focusRing_focusRingFocusWithinCSS_variant_success__z2r50sh", warning: "focusRing_focusRingFocusWithinCSS_variant_warning__z2r50si", critical: "focusRing_focusRingFocusWithinCSS_variant_critical__z2r50sj", onAccent: "focusRing_focusRingFocusWithinCSS_variant_onAccent__z2r50sk" } }, defaultVariants: {}, compoundVariants: [] });

package/core/styles/useFocusRing.d.ts

@@ -0,0 +1,49 @@
+import { FocusEvent } from 'react';
+export type Modality = 'keyboard' | 'pointer' | 'touch' | 'unknown';
+/** @internal */
+export declare const variants: readonly ["neutral", "primary", "success", "warning", "critical", "onAccent"];
+/** @internal */
+export type VariantType = (typeof variants)[number];
+/** @internal */
+export type UseFocusRingProps = {
+    /**
+     * A minimal focus outline is available for smaller content elements like links. This variant is applied when set to true.
+     * @defaultValue false
+     */
+    isMinimal?: boolean;
+    /**
+     * Whether or not the modality should be ignored, so that the focus ring is also present if users clicks the element (not just by tabbing to it).
+     * @defaultValue false
+     */
+    ignoreModality?: boolean;
+    /**
+     * The styling variant of the element.
+     * @defaultValue neutral
+     */
+    variant?: VariantType;
+    /**
+     * Apply the focus ring styling if an embedded element gains the focus
+     */
+    focusWithin?: boolean;
+    /**
+     * Whether the element is disabled. If disabled changes to true, the focus will be removed.
+     */
+    disabled?: boolean;
+};
+export type FocusRingProps = {
+    /** The focus styles that depend on modality. */
+    focusClassName: string;
+    /** Focus handlers used to manage the focus state. Must be applied to the element that receives the focus.*/
+    focusProps: {
+        onFocus: (e: FocusEvent) => void;
+        onBlur: (e: FocusEvent) => void;
+    };
+    /** Whether or not the element got focus via keyboard. */
+    isFocusVisible: boolean;
+};
+/**
+ * Custom hook used to determine focus styling depending on modality.
+ * Returns the css classes (vanilla) that can be applied to the component in order to show the correct focus outline.
+ * @internal
+ */
+export declare function useFocusRing(props?: UseFocusRingProps): FocusRingProps;

package/core/styles/useFocusRing.js

@@ -0,0 +1,83 @@
+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 useFocusRing_exports = {};
+__export(useFocusRing_exports, {
+  useFocusRing: () => useFocusRing,
+  variants: () => variants
+});
+module.exports = __toCommonJS(useFocusRing_exports);
+var import_react = require("react");
+var import_focusRing_css = require("./focusRing.sty.js");
+var import__ = require("../index.js");
+const variants = [
+  "neutral",
+  "primary",
+  "success",
+  "warning",
+  "critical",
+  "onAccent"
+];
+function useFocusRing(props = {}) {
+  const {
+    variant = "neutral",
+    ignoreModality = false,
+    isMinimal = false,
+    focusWithin = false,
+    disabled = false
+  } = props;
+  const [isFocused, setIsFocused] = (0, import_react.useState)(false);
+  const { modality } = (0, import__._useFocusContext)();
+  (0, import_react.useEffect)(() => {
+    if (disabled) {
+      setIsFocused(false);
+    }
+  }, [disabled]);
+  const onBlur = (0, import_react.useCallback)((e) => {
+    if (e.currentTarget === e.target) {
+      setIsFocused(false);
+    }
+  }, []);
+  const onFocus = (0, import_react.useCallback)((e) => {
+    if (e.currentTarget === e.target) {
+      setIsFocused(true);
+    }
+  }, []);
+  const focusProps = {
+    onFocus,
+    onBlur
+  };
+  if ((ignoreModality || modality === "keyboard") && isFocused || focusWithin) {
+    if (isMinimal) {
+      return {
+        focusClassName: focusWithin ? (0, import_focusRing_css.focusRingFocusWithinCSS)({ minimal: true, variant }) : (0, import_focusRing_css.focusRingCSS)({ minimal: true, variant }),
+        isFocusVisible: !focusWithin,
+        focusProps
+      };
+    }
+    return {
+      focusClassName: focusWithin ? (0, import_focusRing_css.focusRingFocusWithinCSS)({ minimal: false, variant }) : (0, import_focusRing_css.focusRingCSS)({ minimal: false, variant }),
+      isFocusVisible: !focusWithin,
+      focusProps
+    };
+  }
+  return {
+    focusClassName: focusWithin ? (0, import_focusRing_css.focusRingFocusWithinCSS)() : (0, import_focusRing_css.focusRingCSS)(),
+    isFocusVisible: false,
+    focusProps
+  };
+}

package/core/types/a11y-props.d.ts

@@ -0,0 +1,19 @@
+import type { AriaAttributes } from 'react';
+/** @public */
+export interface AriaLabelingProps {
+    /** Labels the current element. */
+    'aria-label'?: string;
+    /** Identifies the element (or elements) that label(s) the current element. */
+    'aria-labelledby'?: string;
+    /** Identifies the element (or elements) that describe(s) the object. */
+    'aria-describedby'?: string;
+    /** Identifies the element (or elements) that provide(s) a detailed, extended description for the object. */
+    'aria-details'?: string;
+}
+export type AriaDisabledProps = {
+    /**
+     * Whether the element and all focusable descendants are disabled.
+     * `aria-disabled="true"` only semantically exposes these elements as being disabled.
+     */
+    'aria-disabled'?: AriaAttributes['aria-disabled'];
+};

package/core/types/a11y-props.js

@@ -0,0 +1,15 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 a11y_props_exports = {};
+module.exports = __toCommonJS(a11y_props_exports);

package/core/types/data-props.d.ts

@@ -1,4 +1,5 @@
 /**
+ * @public
  * Type defining the data-testid prop that is mapped to the rendered components root node.
  */
 export type DataTestId = {

package/core/types/dom.d.ts

@@ -0,0 +1,19 @@
+import type { AriaAttributes, AriaRole, CSSProperties, DOMAttributes as ReactDOMAttributes } from 'react';
+import type { FocusableElement } from './focusable-element.js';
+export interface DOMAttributes<T = FocusableElement> extends AriaAttributes, ReactDOMAttributes<T> {
+    id?: string | undefined;
+    role?: AriaRole | undefined;
+    tabIndex?: number | undefined;
+    style?: CSSProperties | undefined;
+    className?: string | undefined;
+}
+/**
+ * The props of a DOM Element.
+ * @public
+ *  */
+export interface DOMProps {
+    /**
+     * The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
+     */
+    id?: string;
+}

package/core/types/dom.js

@@ -0,0 +1,15 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 dom_exports = {};
+module.exports = __toCommonJS(dom_exports);

package/core/types/focusable-element.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @public
+ * Any focusable element, including both HTML and SVG elements. */
+export interface FocusableElement extends Element, HTMLOrSVGElement {
+}

package/core/types/focusable-element.js

@@ -0,0 +1,15 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 focusable_element_exports = {};
+module.exports = __toCommonJS(focusable_element_exports);

package/core/types/heading.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Type for heading levels
+ * @internal
+ */
+export type _HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+/** Type for all correct semantic html tags
+ * @internal
+ */
+export type _HeadingTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';