@dynatrace/strato-components 1.9.1 → 1.11.0

package/content/skeleton/Skeleton.css

@@ -1,4 +1,4 @@
-@keyframes _1a1ozfd0-1-9-1 {
+@keyframes _1a1ozfd0-1-11-0 {
   0% {
     transform: translateX(-100%) scaleX(0);
   }
@@ -6,12 +6,12 @@
     transform: translateX(100%) scaleX(1.5);
   }
 }
-._1a1ozfd1-1-9-1 {
+._1a1ozfd1-1-11-0 {
   position: relative;
   overflow: hidden;
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._1a1ozfd1-1-9-1:after {
+._1a1ozfd1-1-11-0:after {
   content: "";
   position: absolute;
   top: 0;
@@ -21,13 +21,13 @@
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   animation-iteration-count: infinite;
   transform-origin: left center;
-  animation-name: _1a1ozfd0-1-9-1;
+  animation-name: _1a1ozfd0-1-11-0;
   animation-duration: var(--dt-timings-slow-gentle, 800ms);
   animation-timing-function: var(--dt-easings-fast-in-slow-out, cubic-bezier(0.4, 0, 0.2, 1));
 }
-._1a1ozfd2-1-9-1 {
-  border-radius: var(--dt-borders-radius-container-subdued, 8px);
+._1a1ozfd2-1-11-0 {
+  border-radius: var(--dt-borders-radius-container-subdued, 6px);
 }
-._1a1ozfd3-1-9-1 {
+._1a1ozfd3-1-11-0 {
   border-radius: 9999px;
 }

package/content/skeleton/Skeleton.sty.js

@@ -23,4 +23,4 @@ __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: "_1a1ozfd1-1-9-1", variantClassNames: { variant: { "default": "_1a1ozfd2-1-9-1", rounded: "_1a1ozfd3-1-9-1" } }, defaultVariants: {}, compoundVariants: [] });
+var skeletonPlaceholderCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1a1ozfd1-1-11-0", variantClassNames: { variant: { "default": "_1a1ozfd2-1-11-0", rounded: "_1a1ozfd3-1-11-0" } }, defaultVariants: {}, compoundVariants: [] });

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

@@ -59,15 +59,7 @@
   font-weight: 400;
   font-display: swap;
   src: url(https://dt-cdn.net/fonts/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.woff2) format('woff2');
-  unicode-range: U+0100-024F;
-  unicode-range: U+0259;
-  unicode-range: U+1E00-1EFF;
-  unicode-range: U+2020;
-  unicode-range: U+20A0-20AB;
-  unicode-range: U+20AD-20CF;
-  unicode-range: U+2113;
-  unicode-range: U+2C60-2C7F;
-  unicode-range: U+A720-A7FF;
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
   font-family: Roboto;
 }
 @font-face {
@@ -75,23 +67,7 @@
   font-weight: 400;
   font-display: swap;
   src: url(https://dt-cdn.net/fonts/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
-  unicode-range: U+0000-00FF;
-  unicode-range: U+0131;
-  unicode-range: U+0152-0153;
-  unicode-range: U+02BB-02BC;
-  unicode-range: U+02C6;
-  unicode-range: U+02DA;
-  unicode-range: U+02DC;
-  unicode-range: U+2000-206F;
-  unicode-range: U+2074;
-  unicode-range: U+20AC;
-  unicode-range: U+2122;
-  unicode-range: U+2191;
-  unicode-range: U+2193;
-  unicode-range: U+2212;
-  unicode-range: U+2215;
-  unicode-range: U+FEFF;
-  unicode-range: U+FFFD;
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
   font-family: Roboto;
 }
 @font-face {
@@ -99,15 +75,7 @@
   font-weight: 500;
   font-display: swap;
   src: url(https://dt-cdn.net/fonts/KFOlCnqEu92Fr1MmEU9fChc4AMP6lbBP.woff2) format('woff2');
-  unicode-range: U+0100-024F;
-  unicode-range: U+0259;
-  unicode-range: U+1E00-1EFF;
-  unicode-range: U+2020;
-  unicode-range: U+20A0-20AB;
-  unicode-range: U+20AD-20CF;
-  unicode-range: U+2113;
-  unicode-range: U+2C60-2C7F;
-  unicode-range: U+A720-A7FF;
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
   font-family: Roboto;
 }
 @font-face {
@@ -115,23 +83,7 @@
   font-weight: 500;
   font-display: swap;
   src: url(https://dt-cdn.net/fonts/KFOlCnqEu92Fr1MmEU9fBBc4AMP6lQ.woff2) format('woff2');
-  unicode-range: U+0000-00FF;
-  unicode-range: U+0131;
-  unicode-range: U+0152-0153;
-  unicode-range: U+02BB-02BC;
-  unicode-range: U+02C6;
-  unicode-range: U+02DA;
-  unicode-range: U+02DC;
-  unicode-range: U+2000-206F;
-  unicode-range: U+2074;
-  unicode-range: U+20AC;
-  unicode-range: U+2122;
-  unicode-range: U+2191;
-  unicode-range: U+2193;
-  unicode-range: U+2212;
-  unicode-range: U+2215;
-  unicode-range: U+FEFF;
-  unicode-range: U+FFFD;
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
   font-family: Roboto;
 }
 @font-face {
@@ -139,15 +91,7 @@
   font-weight: 400;
   font-display: swap;
   src: url(https://dt-cdn.net/fonts/L0xTDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vrtSM1J-gEPT5Ese6hmHSZ0me8iUI0lkQ.woff2) format('woff2');
-  unicode-range: U+0100-024F;
-  unicode-range: U+0259;
-  unicode-range: U+1E00-1EFF;
-  unicode-range: U+2020;
-  unicode-range: U+20A0-20AB;
-  unicode-range: U+20AD-20CF;
-  unicode-range: U+2113;
-  unicode-range: U+2C60-2C7F;
-  unicode-range: U+A720-A7FF;
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
   font-family: Roboto Mono;
 }
 @font-face {
@@ -155,23 +99,7 @@
   font-weight: 400;
   font-display: swap;
   src: url(https://dt-cdn.net/fonts/L0xTDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vrtSM1J-gEPT5Ese6hmHSh0me8iUI0.woff2) format('woff2');
-  unicode-range: U+0000-00FF;
-  unicode-range: U+0131;
-  unicode-range: U+0152-0153;
-  unicode-range: U+02BB-02BC;
-  unicode-range: U+02C6;
-  unicode-range: U+02DA;
-  unicode-range: U+02DC;
-  unicode-range: U+2000-206F;
-  unicode-range: U+2074;
-  unicode-range: U+20AC;
-  unicode-range: U+2122;
-  unicode-range: U+2191;
-  unicode-range: U+2193;
-  unicode-range: U+2212;
-  unicode-range: U+2215;
-  unicode-range: U+FEFF;
-  unicode-range: U+FFFD;
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
   font-family: Roboto Mono;
 }
 @font-face {
@@ -179,15 +107,7 @@
   font-weight: 500;
   font-display: swap;
   src: url(https://dt-cdn.net/fonts/L0xTDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vrtSM1J-gEPT5Ese6hmHSZ0me8iUI0lkQ.woff2) format('woff2');
-  unicode-range: U+0100-024F;
-  unicode-range: U+0259;
-  unicode-range: U+1E00-1EFF;
-  unicode-range: U+2020;
-  unicode-range: U+20A0-20AB;
-  unicode-range: U+20AD-20CF;
-  unicode-range: U+2113;
-  unicode-range: U+2C60-2C7F;
-  unicode-range: U+A720-A7FF;
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
   font-family: Roboto Mono;
 }
 @font-face {
@@ -195,23 +115,7 @@
   font-weight: 500;
   font-display: swap;
   src: url(https://dt-cdn.net/fonts/L0xTDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vrtSM1J-gEPT5Ese6hmHSh0me8iUI0.woff2) format('woff2');
-  unicode-range: U+0000-00FF;
-  unicode-range: U+0131;
-  unicode-range: U+0152-0153;
-  unicode-range: U+02BB-02BC;
-  unicode-range: U+02C6;
-  unicode-range: U+02DA;
-  unicode-range: U+02DC;
-  unicode-range: U+2000-206F;
-  unicode-range: U+2074;
-  unicode-range: U+20AC;
-  unicode-range: U+2122;
-  unicode-range: U+2191;
-  unicode-range: U+2193;
-  unicode-range: U+2212;
-  unicode-range: U+2215;
-  unicode-range: U+FEFF;
-  unicode-range: U+FFFD;
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
   font-family: Roboto Mono;
 }
 :root {
@@ -219,12 +123,12 @@
   --dt-borders-style-dashed: dashed;
   --dt-borders-width-default: 1px;
   --dt-borders-width-emphasized: 2px;
-  --dt-borders-radius-surface-subdued: 12px;
-  --dt-borders-radius-surface-default: 16px;
-  --dt-borders-radius-container-subdued: 8px;
-  --dt-borders-radius-container-default: 12px;
-  --dt-borders-radius-field-subdued: 4px;
-  --dt-borders-radius-field-default: 8px;
+  --dt-borders-radius-surface-subdued: 9px;
+  --dt-borders-radius-surface-default: 12px;
+  --dt-borders-radius-container-subdued: 6px;
+  --dt-borders-radius-container-default: 9px;
+  --dt-borders-radius-field-subdued: 3px;
+  --dt-borders-radius-field-default: 6px;
   --dt-borders-radius-field-emphasized: 9999px;
   --dt-box-shadows-surface-flat-rest: 0px 0px 0px 1px #2d2e4e0d;
   --dt-box-shadows-surface-flat-hover: 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 4px 8px -2px #2d2e4e12;
@@ -1048,12 +952,12 @@
   --dt-borders-style-dashed: dashed;
   --dt-borders-width-default: 1px;
   --dt-borders-width-emphasized: 2px;
-  --dt-borders-radius-surface-subdued: 12px;
-  --dt-borders-radius-surface-default: 16px;
-  --dt-borders-radius-container-subdued: 8px;
-  --dt-borders-radius-container-default: 12px;
-  --dt-borders-radius-field-subdued: 4px;
-  --dt-borders-radius-field-default: 8px;
+  --dt-borders-radius-surface-subdued: 9px;
+  --dt-borders-radius-surface-default: 12px;
+  --dt-borders-radius-container-subdued: 6px;
+  --dt-borders-radius-container-default: 9px;
+  --dt-borders-radius-field-subdued: 3px;
+  --dt-borders-radius-field-default: 6px;
   --dt-borders-radius-field-emphasized: 9999px;
   --dt-box-shadows-surface-flat-rest: 0px 0px 0px 1px #f0f0f514;
   --dt-box-shadows-surface-flat-hover: 0px 0px 0px 1px #f0f0f514, 0px 1px 2px #112, 0px 4px 8px #112c;
@@ -1912,12 +1816,12 @@ body {
     --dt-borders-style-dashed: dashed;
     --dt-borders-width-default: 1px;
     --dt-borders-width-emphasized: 2px;
-    --dt-borders-radius-surface-subdued: 12px;
-    --dt-borders-radius-surface-default: 16px;
-    --dt-borders-radius-container-subdued: 8px;
-    --dt-borders-radius-container-default: 12px;
-    --dt-borders-radius-field-subdued: 4px;
-    --dt-borders-radius-field-default: 8px;
+    --dt-borders-radius-surface-subdued: 9px;
+    --dt-borders-radius-surface-default: 12px;
+    --dt-borders-radius-container-subdued: 6px;
+    --dt-borders-radius-container-default: 9px;
+    --dt-borders-radius-field-subdued: 3px;
+    --dt-borders-radius-field-default: 6px;
     --dt-borders-radius-field-emphasized: 9999px;
     --dt-box-shadows-surface-flat-rest: 0px 0px 0px 1px #2d2e4e0d;
     --dt-box-shadows-surface-flat-hover: 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 4px 8px -2px #2d2e4e12;
@@ -2737,8 +2641,7 @@ body {
   }
 }
 @supports (-moz-appearance:none) {
-  html, body {
-    scrollbar-color: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb) var(--dt-colors-background-base-default, #f9f9fa);
-    scrollbar-width: thin;
+  * {
+    scrollbar-color: var(--dt-colors-border-neutral-default, #dadbe4) transparent;
   }
 }

package/core/hooks/useId.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Custom hook to generate a sanitized react useId for use in DOM selectors.
+ *
+ * React's `useId()` may return IDs containing colons (e.g., `:r1:`), which are valid in HTML
+ * but **not valid CSS identifiers**. This can cause issues when using `querySelector` or when
+ * libraries like `nwsapi` attempt to parse selectors, especially in test environments like jest
+ * with jsdom.
+ *
+ * This hook replaces colons with a safe, reversible encoding (`«` and `»`) to ensure the ID
+ * remains unique and usable in CSS selectors. The characters are chosen to be the same as in the
+ * react 19.2+ implementation.
+ *
+ * Background:
+ * - React previously used colons in generated IDs to avoid collisions.
+ * - This caused parsing errors in selector engines like `nwsapi` when used in test environments.
+ * - React addressed this in [facebook/react#32001](https://github.com/facebook/react/pull/32001) in React 19.2+.
+ *
+ * This hook provides a workaround for environments still using older React versions or needing
+ * compatibility with selector engines that strictly enforce CSS syntax.
+ *
+ * @returns A sanitized ID string safe for use in `querySelector` and CSS selectors.
+ * @public
+ */
+export declare function useId(): string;

package/core/hooks/useId.js

@@ -0,0 +1,31 @@
+"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 useId_exports = {};
+__export(useId_exports, {
+  useId: () => useId
+});
+module.exports = __toCommonJS(useId_exports);
+var import_react = require("react");
+function useId() {
+  const id = (0, import_react.useId)();
+  const sanitizedId = (0, import_react.useMemo)(() => {
+    return id.replace(":", "\xAB").replace(":", "\xBB");
+  }, [id]);
+  return sanitizedId;
+}

package/core/index.d.ts

@@ -18,6 +18,7 @@ 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 _HeadingLevel, type _HeadingTag } from './types/heading.js';
 export { useAriaLabelingProps as _useAriaLabelingProps } from './hooks/useAriaLabelingProps.js';
+export { useId } from './hooks/useId.js';
 export { useSafeForwardProps as _useSafeForwardProps } from './hooks/useSafeForwardProps.js';
 export type { UseSafeForwardReturnProps as _UseSafeForwardReturnProps } from './hooks/useSafeForwardProps.js';
 export type { AriaDisabledProps, AriaLabelingProps, } from './types/a11y-props.js';

package/core/index.js

@@ -33,7 +33,8 @@ __export(core_exports, {
   _useAriaLabelingProps: () => import_useAriaLabelingProps.useAriaLabelingProps,
   _useFocusContext: () => import_useFocusContext.useFocusContext,
   _useSafeForwardProps: () => import_useSafeForwardProps.useSafeForwardProps,
-  useCurrentTheme: () => import_useCurrentTheme.useCurrentTheme
+  useCurrentTheme: () => import_useCurrentTheme.useCurrentTheme,
+  useId: () => import_useId.useId
 });
 module.exports = __toCommonJS(core_exports);
 var import_AppRoot = require("./components/app-root/AppRoot.js");
@@ -49,6 +50,7 @@ var import_is_focusable = require("./utils/focus-management/is-focusable.js");
 var import_isBrowser = require("./utils/isBrowser.js");
 var import_merge_props = require("./utils/merge-props.js");
 var import_useAriaLabelingProps = require("./hooks/useAriaLabelingProps.js");
+var import_useId = require("./hooks/useId.js");
 var import_useSafeForwardProps = require("./hooks/useSafeForwardProps.js");
 var import_can_receive_default_text_format = require("./utils/can-receive-default-text-format.js");
 var import_parse_boolean = require("./utils/parse-boolean.js");

package/core/styles/focusRing.css

@@ -1,75 +1,75 @@
-._z2r50s3-1-9-1 {
+._z2r50s3-1-11-0 {
   outline: none;
 }
-._z2r50s3-1-9-1:focus-visible {
+._z2r50s3-1-11-0:focus-visible {
   outline: none;
 }
-._z2r50s4-1-9-1 {
-  border-radius: var(--dt-borders-radius-field-subdued, 4px);
-  box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--_z2r50s0-1-9-1);
-  background-color: var(--_z2r50s2-1-9-1);
+._z2r50s4-1-11-0 {
+  border-radius: var(--dt-borders-radius-field-subdued, 3px);
+  box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--_z2r50s0-1-11-0);
+  background-color: var(--_z2r50s2-1-11-0);
 }
-._z2r50s5-1-9-1._z2r50s5-1-9-1 {
-  box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--_z2r50s0-1-9-1), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--_z2r50s1-1-9-1);
+._z2r50s5-1-11-0._z2r50s5-1-11-0 {
+  box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--_z2r50s0-1-11-0), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--_z2r50s1-1-11-0);
 }
-._z2r50s6-1-9-1 {
-  --_z2r50s0-1-9-1: var(--dt-colors-border-neutral-accent, #595a7d);
-  --_z2r50s1-1-9-1: var(--dt-colors-border-neutral-default, #dadbe4);
-  --_z2r50s2-1-9-1: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+._z2r50s6-1-11-0 {
+  --_z2r50s0-1-11-0: var(--dt-colors-border-neutral-accent, #595a7d);
+  --_z2r50s1-1-11-0: var(--dt-colors-border-neutral-default, #dadbe4);
+  --_z2r50s2-1-11-0: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
 }
-._z2r50s7-1-9-1 {
-  --_z2r50s0-1-9-1: var(--dt-colors-border-primary-accent, #464cce);
-  --_z2r50s1-1-9-1: var(--dt-colors-border-primary-default, #d5dbf6);
-  --_z2r50s2-1-9-1: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
+._z2r50s7-1-11-0 {
+  --_z2r50s0-1-11-0: var(--dt-colors-border-primary-accent, #464cce);
+  --_z2r50s1-1-11-0: var(--dt-colors-border-primary-default, #d5dbf6);
+  --_z2r50s2-1-11-0: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
 }
-._z2r50s8-1-9-1 {
-  --_z2r50s0-1-9-1: var(--dt-colors-border-success-accent, #2d6761);
-  --_z2r50s1-1-9-1: var(--dt-colors-border-success-default, #d3dedd);
-  --_z2r50s2-1-9-1: var(--dt-colors-background-field-success-emphasized, #e0e7e6);
+._z2r50s8-1-11-0 {
+  --_z2r50s0-1-11-0: var(--dt-colors-border-success-accent, #2d6761);
+  --_z2r50s1-1-11-0: var(--dt-colors-border-success-default, #d3dedd);
+  --_z2r50s2-1-11-0: var(--dt-colors-background-field-success-emphasized, #e0e7e6);
 }
-._z2r50s9-1-9-1 {
-  --_z2r50s0-1-9-1: var(--dt-colors-border-warning-accent, #855400);
-  --_z2r50s1-1-9-1: var(--dt-colors-border-warning-default, #f9ebdb);
-  --_z2r50s2-1-9-1: var(--dt-colors-background-field-warning-emphasized, #f9f0e5);
+._z2r50s9-1-11-0 {
+  --_z2r50s0-1-11-0: var(--dt-colors-border-warning-accent, #855400);
+  --_z2r50s1-1-11-0: var(--dt-colors-border-warning-default, #f9ebdb);
+  --_z2r50s2-1-11-0: var(--dt-colors-background-field-warning-emphasized, #f9f0e5);
 }
-._z2r50sa-1-9-1 {
-  --_z2r50s0-1-9-1: var(--dt-colors-border-critical-accent, #bb0731);
-  --_z2r50s1-1-9-1: var(--dt-colors-border-critical-default, #f6d6d5);
-  --_z2r50s2-1-9-1: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
+._z2r50sa-1-11-0 {
+  --_z2r50s0-1-11-0: var(--dt-colors-border-critical-accent, #bb0731);
+  --_z2r50s1-1-11-0: var(--dt-colors-border-critical-default, #f6d6d5);
+  --_z2r50s2-1-11-0: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._z2r50sb-1-9-1:focus-within {
+._z2r50sb-1-11-0:focus-within {
   outline: none;
 }
-._z2r50sc-1-9-1:focus-within {
-  border-radius: var(--dt-borders-radius-field-subdued, 4px);
-  box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--_z2r50s0-1-9-1);
-  background-color: var(--_z2r50s2-1-9-1);
-}
-._z2r50sd-1-9-1:focus-within {
-  box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--_z2r50s0-1-9-1), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--_z2r50s1-1-9-1);
-}
-._z2r50se-1-9-1 {
-  --_z2r50s0-1-9-1: var(--dt-colors-border-neutral-accent, #595a7d);
-  --_z2r50s1-1-9-1: var(--dt-colors-border-neutral-default, #dadbe4);
-  --_z2r50s2-1-9-1: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
-}
-._z2r50sf-1-9-1 {
-  --_z2r50s0-1-9-1: var(--dt-colors-border-primary-accent, #464cce);
-  --_z2r50s1-1-9-1: var(--dt-colors-border-primary-default, #d5dbf6);
-  --_z2r50s2-1-9-1: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
-}
-._z2r50sg-1-9-1 {
-  --_z2r50s0-1-9-1: var(--dt-colors-border-success-accent, #2d6761);
-  --_z2r50s1-1-9-1: var(--dt-colors-border-success-default, #d3dedd);
-  --_z2r50s2-1-9-1: var(--dt-colors-background-field-success-emphasized, #e0e7e6);
-}
-._z2r50sh-1-9-1 {
-  --_z2r50s0-1-9-1: var(--dt-colors-border-warning-accent, #855400);
-  --_z2r50s1-1-9-1: var(--dt-colors-border-warning-default, #f9ebdb);
-  --_z2r50s2-1-9-1: var(--dt-colors-background-field-warning-emphasized, #f9f0e5);
-}
-._z2r50si-1-9-1 {
-  --_z2r50s0-1-9-1: var(--dt-colors-border-critical-accent, #bb0731);
-  --_z2r50s1-1-9-1: var(--dt-colors-border-critical-default, #f6d6d5);
-  --_z2r50s2-1-9-1: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
+._z2r50sc-1-11-0:focus-within {
+  border-radius: var(--dt-borders-radius-field-subdued, 3px);
+  box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--_z2r50s0-1-11-0);
+  background-color: var(--_z2r50s2-1-11-0);
+}
+._z2r50sd-1-11-0:focus-within {
+  box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--_z2r50s0-1-11-0), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--_z2r50s1-1-11-0);
+}
+._z2r50se-1-11-0 {
+  --_z2r50s0-1-11-0: var(--dt-colors-border-neutral-accent, #595a7d);
+  --_z2r50s1-1-11-0: var(--dt-colors-border-neutral-default, #dadbe4);
+  --_z2r50s2-1-11-0: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+}
+._z2r50sf-1-11-0 {
+  --_z2r50s0-1-11-0: var(--dt-colors-border-primary-accent, #464cce);
+  --_z2r50s1-1-11-0: var(--dt-colors-border-primary-default, #d5dbf6);
+  --_z2r50s2-1-11-0: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
+}
+._z2r50sg-1-11-0 {
+  --_z2r50s0-1-11-0: var(--dt-colors-border-success-accent, #2d6761);
+  --_z2r50s1-1-11-0: var(--dt-colors-border-success-default, #d3dedd);
+  --_z2r50s2-1-11-0: var(--dt-colors-background-field-success-emphasized, #e0e7e6);
+}
+._z2r50sh-1-11-0 {
+  --_z2r50s0-1-11-0: var(--dt-colors-border-warning-accent, #855400);
+  --_z2r50s1-1-11-0: var(--dt-colors-border-warning-default, #f9ebdb);
+  --_z2r50s2-1-11-0: var(--dt-colors-background-field-warning-emphasized, #f9f0e5);
+}
+._z2r50si-1-11-0 {
+  --_z2r50s0-1-11-0: var(--dt-colors-border-critical-accent, #bb0731);
+  --_z2r50s1-1-11-0: var(--dt-colors-border-critical-default, #f6d6d5);
+  --_z2r50s2-1-11-0: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }

package/core/styles/focusRing.sty.js

@@ -24,5 +24,5 @@ __export(focusRing_css_exports, {
 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: "_z2r50s3-1-9-1", variantClassNames: { minimal: { true: "_z2r50s4-1-9-1", false: "_z2r50s5-1-9-1" }, variant: { neutral: "_z2r50s6-1-9-1", primary: "_z2r50s7-1-9-1", success: "_z2r50s8-1-9-1", warning: "_z2r50s9-1-9-1", critical: "_z2r50sa-1-9-1" } }, defaultVariants: {}, compoundVariants: [] });
-var focusRingFocusWithinCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_z2r50sb-1-9-1", variantClassNames: { minimal: { true: "_z2r50sc-1-9-1", false: "_z2r50sd-1-9-1" }, variant: { neutral: "_z2r50se-1-9-1", primary: "_z2r50sf-1-9-1", success: "_z2r50sg-1-9-1", warning: "_z2r50sh-1-9-1", critical: "_z2r50si-1-9-1" } }, defaultVariants: {}, compoundVariants: [] });
+var focusRingCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_z2r50s3-1-11-0", variantClassNames: { minimal: { true: "_z2r50s4-1-11-0", false: "_z2r50s5-1-11-0" }, variant: { neutral: "_z2r50s6-1-11-0", primary: "_z2r50s7-1-11-0", success: "_z2r50s8-1-11-0", warning: "_z2r50s9-1-11-0", critical: "_z2r50sa-1-11-0" } }, defaultVariants: {}, compoundVariants: [] });
+var focusRingFocusWithinCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_z2r50sb-1-11-0", variantClassNames: { minimal: { true: "_z2r50sc-1-11-0", false: "_z2r50sd-1-11-0" }, variant: { neutral: "_z2r50se-1-11-0", primary: "_z2r50sf-1-11-0", success: "_z2r50sg-1-11-0", warning: "_z2r50sh-1-11-0", critical: "_z2r50si-1-11-0" } }, defaultVariants: {}, compoundVariants: [] });

package/core/styles/useFocusRing.js

@@ -23,7 +23,7 @@ __export(useFocusRing_exports, {
 module.exports = __toCommonJS(useFocusRing_exports);
 var import_react = require("react");
 var import_focusRing_css = require("./focusRing.sty.js");
-var import__ = require("../index.js");
+var import_useFocusContext = require("../hooks/useFocusContext.js");
 function useFocusRing(props = {}) {
   const {
     variant = "neutral",
@@ -33,7 +33,7 @@ function useFocusRing(props = {}) {
     disabled = false
   } = props;
   const [isFocused, setIsFocused] = (0, import_react.useState)(false);
-  const { modality } = (0, import__._useFocusContext)();
+  const { modality } = (0, import_useFocusContext.useFocusContext)();
   (0, import_react.useEffect)(() => {
     if (disabled) {
       setIsFocused(false);