@dynatrace/strato-components 3.8.0 → 3.9.0

package/content/progress/ProgressCircle.sty.js

@@ -26,8 +26,8 @@ __export(ProgressCircle_css_exports, {
 module.exports = __toCommonJS(ProgressCircle_css_exports);
 var import_ProgressCircle_css_ts_vanilla = require("./ProgressCircle.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var progressCircleBackgroundCSS = "_kvldjh9-3-8-0";
-var progressCircleCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_kvldjh6-3-8-0", variantClassNames: { indeterminate: { true: "_kvldjh7-3-8-0", false: "_kvldjh8-3-8-0" } }, defaultVariants: {}, compoundVariants: [] });
-var progressCircleContainerCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_kvldjha-3-8-0", variantClassNames: { size: { small: "_kvldjhb-3-8-0", large: "_kvldjhc-3-8-0" }, color: { critical: "_kvldjhd-3-8-0", neutral: "_kvldjhe-3-8-0", primary: "_kvldjhf-3-8-0", success: "_kvldjhg-3-8-0", warning: "_kvldjhh-3-8-0" }, variant: { "default": "_kvldjhi-3-8-0", accent: "_kvldjhj-3-8-0" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", variant: "accent" }, "_kvldjhk-3-8-0"], [{ color: "success", variant: "accent" }, "_kvldjhl-3-8-0"], [{ color: "warning", variant: "accent" }, "_kvldjhm-3-8-0"], [{ color: "critical", variant: "accent" }, "_kvldjhn-3-8-0"], [{ color: "neutral", variant: "accent" }, "_kvldjho-3-8-0"]] });
-var progressCircleRootCSS = "_kvldjh4-3-8-0";
-var progressCircleSvgCss = "_kvldjh5-3-8-0";
+var progressCircleBackgroundCSS = "_kvldjh9-3-9-0";
+var progressCircleCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_kvldjh6-3-9-0", variantClassNames: { indeterminate: { true: "_kvldjh7-3-9-0", false: "_kvldjh8-3-9-0" } }, defaultVariants: {}, compoundVariants: [] });
+var progressCircleContainerCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_kvldjha-3-9-0", variantClassNames: { size: { small: "_kvldjhb-3-9-0", large: "_kvldjhc-3-9-0" }, color: { critical: "_kvldjhd-3-9-0", neutral: "_kvldjhe-3-9-0", primary: "_kvldjhf-3-9-0", success: "_kvldjhg-3-9-0", warning: "_kvldjhh-3-9-0" }, variant: { "default": "_kvldjhi-3-9-0", accent: "_kvldjhj-3-9-0" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", variant: "accent" }, "_kvldjhk-3-9-0"], [{ color: "success", variant: "accent" }, "_kvldjhl-3-9-0"], [{ color: "warning", variant: "accent" }, "_kvldjhm-3-9-0"], [{ color: "critical", variant: "accent" }, "_kvldjhn-3-9-0"], [{ color: "neutral", variant: "accent" }, "_kvldjho-3-9-0"]] });
+var progressCircleRootCSS = "_kvldjh4-3-9-0";
+var progressCircleSvgCss = "_kvldjh5-3-9-0";

package/content/shared-components/Visual.css

@@ -1,4 +1,4 @@
-._9w5efw0-3-8-0 {
+._9w5efw0-3-9-0 {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -11,13 +11,13 @@
   max-width: 100%;
   aspect-ratio: 8 / 5;
 }
-._9w5efw0-3-8-0 img, ._9w5efw0-3-8-0 picture, ._9w5efw0-3-8-0 video {
+._9w5efw0-3-9-0 img, ._9w5efw0-3-9-0 picture, ._9w5efw0-3-9-0 video {
   max-width: 100%;
   max-height: 100%;
   object-fit: contain;
   object-position: center;
 }
-._9w5efw0-3-8-0 figure {
+._9w5efw0-3-9-0 figure {
   margin: 0;
   max-width: 100%;
   max-height: 100%;

package/content/shared-components/Visual.sty.js

@@ -21,4 +21,4 @@ __export(Visual_css_exports, {
 });
 module.exports = __toCommonJS(Visual_css_exports);
 var import_Visual_css_ts_vanilla = require("./Visual.css");
-var VisualOverlayCSS = "_9w5efw0-3-8-0";
+var VisualOverlayCSS = "_9w5efw0-3-9-0";

package/content/skeleton/Skeleton.css

@@ -1,27 +1,27 @@
-._1a1ozfd0-3-8-0 {
+._1a1ozfd0-3-9-0 {
   position: relative;
   overflow: hidden;
 }
-._1a1ozfd1-3-8-0 {
+._1a1ozfd1-3-9-0 {
   border-radius: var(--dt-borders-radius-container-subdued, 6px);
 }
-._1a1ozfd2-3-8-0 {
+._1a1ozfd2-3-9-0 {
   border-radius: 9999px;
 }
-._1a1ozfd3-3-8-0 {
+._1a1ozfd3-3-9-0 {
   width: 100%;
   height: 100%;
 }
-._1a1ozfd4-3-8-0 stop {
+._1a1ozfd4-3-9-0 stop {
   stop-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._1a1ozfd5-3-8-0 {
+._1a1ozfd5-3-9-0 {
   width: 100%;
   height: 100%;
   fill: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
 @media (prefers-reduced-motion) {
-  ._1a1ozfd6-3-8-0 {
+  ._1a1ozfd6-3-9-0 {
     display: contents;
   }
 }

package/content/skeleton/Skeleton.sty.js

@@ -26,8 +26,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-8-0", variantClassNames: { variant: { "default": "_1a1ozfd1-3-8-0", rounded: "_1a1ozfd2-3-8-0" } }, defaultVariants: {}, compoundVariants: [] });
-var skeletonSvgBackgroundFillCSS = "_1a1ozfd5-3-8-0";
-var skeletonSvgCSS = "_1a1ozfd3-3-8-0";
-var skeletonSvgGradientCSS = "_1a1ozfd4-3-8-0";
-var skeletonSvgGradientRectCSS = "_1a1ozfd6-3-8-0";
+var skeletonPlaceholderCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1a1ozfd0-3-9-0", variantClassNames: { variant: { "default": "_1a1ozfd1-3-9-0", rounded: "_1a1ozfd2-3-9-0" } }, defaultVariants: {}, compoundVariants: [] });
+var skeletonSvgBackgroundFillCSS = "_1a1ozfd5-3-9-0";
+var skeletonSvgCSS = "_1a1ozfd3-3-9-0";
+var skeletonSvgGradientCSS = "_1a1ozfd4-3-9-0";
+var skeletonSvgGradientRectCSS = "_1a1ozfd6-3-9-0";

package/content/terminology-overlay/TerminologyOverlay.css

@@ -1,4 +1,4 @@
-._1dd8zuz0-3-8-0 {
+._1dd8zuz0-3-9-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-8-0:hover {
+._1dd8zuz0-3-9-0:hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._1dd8zuz0-3-8-0:active {
+._1dd8zuz0-3-9-0:active {
   background: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
 }
-._1dd8zuz0-3-8-0:not(.strato-focus-visible) {
+._1dd8zuz0-3-9-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.sty.js

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

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

@@ -118,7 +118,7 @@
   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[data-theme="light"]._1jgl8s50-3-8-0 {
+:root[data-theme="light"]._1jgl8s50-3-9-0 {
   --dt-box-shadows-surface-flat-rest: var(--_vr-10);
   --dt-box-shadows-surface-flat-hover: var(--_vr-20);
   --dt-box-shadows-surface-flat-active: var(--_vr-10);
@@ -453,7 +453,7 @@
   --_vr-40: var(--_vr-shadow-1), var(--_vr-shadow-2-40), var(--_vr-shadow-0);
   --_vr-50: var(--_vr-shadow-1), var(--_vr-shadow-2-50), var(--_vr-shadow-0);
 }
-:root[data-theme="dark"]._1jgl8s50-3-8-0 {
+:root[data-theme="dark"]._1jgl8s50-3-9-0 {
   --dt-box-shadows-surface-flat-hover: var(--_vr-20);
   --dt-box-shadows-surface-flat-active: var(--_vr-10);
   --dt-box-shadows-surface-flat-drag: var(--_vr-50);

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

@@ -21,4 +21,4 @@ __export(AppRoot_css_exports, {
 });
 module.exports = __toCommonJS(AppRoot_css_exports);
 var import_AppRoot_css_ts_vanilla = require("./AppRoot.css");
-var dtVisualRefreshEnabled = "_1jgl8s50-3-8-0";
+var dtVisualRefreshEnabled = "_1jgl8s50-3-9-0";

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

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

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

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

package/core/hooks/useResizeObserver.d.ts

@@ -0,0 +1,26 @@
+import { type RefCallback, type RefObject } from 'react';
+/** @internal */
+export type ObservedSize = {
+    width: number | undefined;
+    height: number | undefined;
+};
+type UseResizeObserverOptions<T extends Element> = {
+    ref?: RefObject<T | null> | T | null;
+    onResize?: (size: ObservedSize) => void;
+    box?: ResizeObserverBoxOptions;
+};
+type UseResizeObserverResult<T extends Element> = ObservedSize & {
+    ref: RefCallback<T | null>;
+};
+/**
+ * Observes an element's size using the native `ResizeObserver` API and returns
+ * its dimensions. Accepts either a React ref or a direct element reference via
+ * options; when neither is provided the returned `ref` callback should be
+ * attached to the target element.
+ *
+ * Behaviour matches the `use-resize-observer` npm package: when `onResize` is
+ * provided the hook skips state updates to avoid unnecessary re-renders.
+ * @internal
+ */
+export declare function useResizeObserver<T extends Element = HTMLElement>(options?: UseResizeObserverOptions<T>): UseResizeObserverResult<T>;
+export {};

package/core/hooks/useResizeObserver.js

@@ -0,0 +1,136 @@
+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 useResizeObserver_exports = {};
+__export(useResizeObserver_exports, {
+  useResizeObserver: () => useResizeObserver
+});
+module.exports = __toCommonJS(useResizeObserver_exports);
+var import_react = require("react");
+function resolveElement(cbElement, refOrElement) {
+  if (cbElement) {
+    return cbElement;
+  }
+  if (!refOrElement) {
+    return null;
+  }
+  if (refOrElement instanceof Element) {
+    return refOrElement;
+  }
+  return refOrElement.current;
+}
+function extractSize(entry, boxProp, sizeType) {
+  if (!entry[boxProp]) {
+    if (boxProp === "contentBoxSize") {
+      return entry.contentRect[sizeType === "inlineSize" ? "width" : "height"];
+    }
+    return void 0;
+  }
+  const sizes = entry[boxProp];
+  return Array.isArray(sizes) ? sizes[0]?.[sizeType] : sizes[sizeType];
+}
+function useResizeObserver(options = {}) {
+  const onResizeRef = (0, import_react.useRef)(options.onResize);
+  onResizeRef.current = options.onResize;
+  const [size, setSize] = (0, import_react.useState)({
+    width: void 0,
+    height: void 0
+  });
+  const didUnmount = (0, import_react.useRef)(false);
+  (0, import_react.useEffect)(() => {
+    didUnmount.current = false;
+    return () => {
+      didUnmount.current = true;
+    };
+  }, []);
+  const previous = (0, import_react.useRef)({
+    width: void 0,
+    height: void 0
+  });
+  const lastReport = (0, import_react.useRef)(null);
+  const cbElementRef = (0, import_react.useRef)(null);
+  const refOrElementRef = (0, import_react.useRef)(options.ref);
+  refOrElementRef.current = options.ref;
+  const subscriber = (0, import_react.useCallback)(
+    (element) => {
+      let boxProp = "contentBoxSize";
+      if (options.box === "border-box") {
+        boxProp = "borderBoxSize";
+      } else if (options.box === "device-pixel-content-box") {
+        boxProp = "devicePixelContentBoxSize";
+      }
+      const ro = new ResizeObserver((entries) => {
+        const entry = entries[0];
+        const newWidth = extractSize(entry, boxProp, "inlineSize");
+        const newHeight = extractSize(entry, boxProp, "blockSize");
+        const roundedWidth = newWidth === void 0 ? void 0 : Math.round(newWidth);
+        const roundedHeight = newHeight === void 0 ? void 0 : Math.round(newHeight);
+        if (previous.current.width !== roundedWidth || previous.current.height !== roundedHeight) {
+          const newSize = { width: roundedWidth, height: roundedHeight };
+          previous.current = newSize;
+          if (onResizeRef.current) {
+            onResizeRef.current(newSize);
+          } else if (!didUnmount.current) {
+            setSize(newSize);
+          }
+        }
+      });
+      ro.observe(element, { box: options.box });
+      return () => ro.unobserve(element);
+    },
+    [options.box]
+  );
+  const evaluateSubscription = (0, import_react.useCallback)(() => {
+    const element = resolveElement(
+      cbElementRef.current,
+      refOrElementRef.current
+    );
+    if (lastReport?.current?.element === element && lastReport?.current?.subscriber === subscriber) {
+      return;
+    }
+    lastReport.current?.cleanup?.();
+    lastReport.current = {
+      element,
+      subscriber,
+      cleanup: element ? subscriber(element) : void 0
+    };
+  }, [subscriber]);
+  (0, import_react.useEffect)(() => {
+    evaluateSubscription();
+  });
+  (0, import_react.useEffect)(() => {
+    return () => {
+      lastReport.current?.cleanup?.();
+      lastReport.current = null;
+    };
+  }, []);
+  const refCallback = (0, import_react.useCallback)(
+    (element) => {
+      cbElementRef.current = element;
+      evaluateSubscription();
+    },
+    [evaluateSubscription]
+  );
+  return (0, import_react.useMemo)(
+    () => ({
+      ref: refCallback,
+      width: size.width,
+      height: size.height
+    }),
+    [refCallback, size.width, size.height]
+  );
+}

package/core/sdk/sdk-logger.js

@@ -40,7 +40,7 @@ const LOGGER_FACTORY = /* @__PURE__ */ (() => {
         context: {
           id: "@dynatrace/strato-design-system",
           // @ts-expect-error Global variable injected at package build time
-          version: "3.8.0"
+          version: "3.9.0"
         }
       });
     } else if (supportsLoggerV1()) {
@@ -48,7 +48,7 @@ const LOGGER_FACTORY = /* @__PURE__ */ (() => {
         context: {
           id: "@dynatrace/strato-design-system",
           // @ts-expect-error Global variable injected at package build time
-          version: "3.8.0"
+          version: "3.9.0"
         }
       });
     }

package/core/styles/defaultChartValues.css

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

package/core/styles/defaultChartValues.sty.js

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

package/core/styles/focusRing.css

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

package/core/styles/focusRing.sty.js

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

package/core/styles/focusRingStatic.css

@@ -1,49 +1,49 @@
-._z0fq9b4-3-8-0 {
+._z0fq9b4-3-9-0 {
   outline: none;
 }
-._z0fq9b5-3-8-0 {
-  --_z0fq9b3-3-8-0: var(--dt-borders-width-default, 1px);
-  --_z0fq9b2-3-8-0: 0 0 0 var(--_z0fq9b3-3-8-0) var(--_z0fq9b0-3-8-0) inset;
+._z0fq9b5-3-9-0 {
+  --_z0fq9b3-3-9-0: var(--dt-borders-width-default, 1px);
+  --_z0fq9b2-3-9-0: 0 0 0 var(--_z0fq9b3-3-9-0) var(--_z0fq9b0-3-9-0) inset;
 }
-._z0fq9b6-3-8-0 {
-  --_z0fq9b3-3-8-0: var(--dt-borders-width-emphasized, 2px);
-  --_z0fq9b2-3-8-0: 0 0 0 var(--_z0fq9b3-3-8-0) var(--_z0fq9b0-3-8-0) inset, 0 0 0 calc(var(--_z0fq9b3-3-8-0) + 1px) var(--_z0fq9b1-3-8-0) inset;
+._z0fq9b6-3-9-0 {
+  --_z0fq9b3-3-9-0: var(--dt-borders-width-emphasized, 2px);
+  --_z0fq9b2-3-9-0: 0 0 0 var(--_z0fq9b3-3-9-0) var(--_z0fq9b0-3-9-0) inset, 0 0 0 calc(var(--_z0fq9b3-3-9-0) + 1px) var(--_z0fq9b1-3-9-0) inset;
 }
-._z0fq9b7-3-8-0 {
-  --_z0fq9b2-3-8-0: none;
+._z0fq9b7-3-9-0 {
+  --_z0fq9b2-3-9-0: none;
 }
-._z0fq9b8-3-8-0._z0fq9b8-3-8-0 {
-  box-shadow: var(--_z0fq9b2-3-8-0);
+._z0fq9b8-3-9-0._z0fq9b8-3-9-0 {
+  box-shadow: var(--_z0fq9b2-3-9-0);
 }
-._z0fq9b9-3-8-0:focus-visible {
-  box-shadow: var(--_z0fq9b2-3-8-0);
+._z0fq9b9-3-9-0:focus-visible {
+  box-shadow: var(--_z0fq9b2-3-9-0);
 }
-._z0fq9ba-3-8-0:focus-within {
-  box-shadow: var(--_z0fq9b2-3-8-0);
+._z0fq9ba-3-9-0:focus-within {
+  box-shadow: var(--_z0fq9b2-3-9-0);
 }
-._z0fq9bb-3-8-0:has(:focus-visible) {
-  box-shadow: var(--_z0fq9b2-3-8-0);
+._z0fq9bb-3-9-0:has(:focus-visible) {
+  box-shadow: var(--_z0fq9b2-3-9-0);
 }
-._z0fq9bc-3-8-0:focus {
-  box-shadow: var(--_z0fq9b2-3-8-0);
+._z0fq9bc-3-9-0:focus {
+  box-shadow: var(--_z0fq9b2-3-9-0);
 }
-._z0fq9bd-3-8-0 {
-  --_z0fq9b0-3-8-0: var(--dt-colors-border-neutral-accent, #595a7d);
-  --_z0fq9b1-3-8-0: var(--dt-colors-border-neutral-default, #dadbe4);
+._z0fq9bd-3-9-0 {
+  --_z0fq9b0-3-9-0: var(--dt-colors-border-neutral-accent, #595a7d);
+  --_z0fq9b1-3-9-0: var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._z0fq9be-3-8-0 {
-  --_z0fq9b0-3-8-0: var(--dt-colors-border-primary-accent, #464cce);
-  --_z0fq9b1-3-8-0: var(--dt-colors-border-primary-default, #d5dbf6);
+._z0fq9be-3-9-0 {
+  --_z0fq9b0-3-9-0: var(--dt-colors-border-primary-accent, #464cce);
+  --_z0fq9b1-3-9-0: var(--dt-colors-border-primary-default, #d5dbf6);
 }
-._z0fq9bf-3-8-0 {
-  --_z0fq9b0-3-8-0: var(--dt-colors-border-success-accent, #2d6761);
-  --_z0fq9b1-3-8-0: var(--dt-colors-border-success-default, #d3dedd);
+._z0fq9bf-3-9-0 {
+  --_z0fq9b0-3-9-0: var(--dt-colors-border-success-accent, #2d6761);
+  --_z0fq9b1-3-9-0: var(--dt-colors-border-success-default, #d3dedd);
 }
-._z0fq9bg-3-8-0 {
-  --_z0fq9b0-3-8-0: var(--dt-colors-border-warning-accent, #855400);
-  --_z0fq9b1-3-8-0: var(--dt-colors-border-warning-default, #f9ebdb);
+._z0fq9bg-3-9-0 {
+  --_z0fq9b0-3-9-0: var(--dt-colors-border-warning-accent, #855400);
+  --_z0fq9b1-3-9-0: var(--dt-colors-border-warning-default, #f9ebdb);
 }
-._z0fq9bh-3-8-0 {
-  --_z0fq9b0-3-8-0: var(--dt-colors-border-critical-accent, #bb0731);
-  --_z0fq9b1-3-8-0: var(--dt-colors-border-critical-default, #f6d6d5);
+._z0fq9bh-3-9-0 {
+  --_z0fq9b0-3-9-0: var(--dt-colors-border-critical-accent, #bb0731);
+  --_z0fq9b1-3-9-0: var(--dt-colors-border-critical-default, #f6d6d5);
 }

package/core/styles/focusRingStatic.sty.js

@@ -22,4 +22,4 @@ __export(focusRingStatic_css_exports, {
 module.exports = __toCommonJS(focusRingStatic_css_exports);
 var import_focusRingStatic_css_ts_vanilla = require("./focusRingStatic.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var focusRingStatic = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_z0fq9b4-3-8-0", variantClassNames: { minimal: { true: "_z0fq9b5-3-8-0", false: "_z0fq9b6-3-8-0" }, disabled: { true: "_z0fq9b7-3-8-0" }, when: { always: "_z0fq9b8-3-8-0", "focus-visible": "_z0fq9b9-3-8-0", "focus-within": "_z0fq9ba-3-8-0", "focus-within-visible": "_z0fq9bb-3-8-0", focus: "_z0fq9bc-3-8-0" }, color: { neutral: "_z0fq9bd-3-8-0", primary: "_z0fq9be-3-8-0", success: "_z0fq9bf-3-8-0", warning: "_z0fq9bg-3-8-0", critical: "_z0fq9bh-3-8-0" } }, defaultVariants: { color: "neutral", minimal: false, when: "focus", disabled: false }, compoundVariants: [] });
+var focusRingStatic = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_z0fq9b4-3-9-0", variantClassNames: { minimal: { true: "_z0fq9b5-3-9-0", false: "_z0fq9b6-3-9-0" }, disabled: { true: "_z0fq9b7-3-9-0" }, when: { always: "_z0fq9b8-3-9-0", "focus-visible": "_z0fq9b9-3-9-0", "focus-within": "_z0fq9ba-3-9-0", "focus-within-visible": "_z0fq9bb-3-9-0", focus: "_z0fq9bc-3-9-0" }, color: { neutral: "_z0fq9bd-3-9-0", primary: "_z0fq9be-3-9-0", success: "_z0fq9bf-3-9-0", warning: "_z0fq9bg-3-9-0", critical: "_z0fq9bh-3-9-0" } }, defaultVariants: { color: "neutral", minimal: false, when: "focus", disabled: false }, compoundVariants: [] });

package/core/styles/virtualFocus.css

@@ -1,10 +1,10 @@
-._9mvxlq0-3-8-0 {
+._9mvxlq0-3-9-0 {
   transition: none;
   border-radius: var(--dt-borders-radius-field-default, 6px);
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-accent, #595a7d);
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._9mvxlq1-3-8-0 {
+._9mvxlq1-3-9-0 {
   transition: none;
   border-radius: var(--dt-borders-radius-field-default, 6px);
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-primary-accent, #464cce);

package/core/styles/virtualFocus.sty.js

@@ -21,4 +21,4 @@ __export(virtualFocus_css_exports, {
 });
 module.exports = __toCommonJS(virtualFocus_css_exports);
 var import_virtualFocus_css_ts_vanilla = require("./virtualFocus.css");
-var virtualFocus = { neutral: "_9mvxlq0-3-8-0", primary: "_9mvxlq1-3-8-0" };
+var virtualFocus = { neutral: "_9mvxlq0-3-9-0", primary: "_9mvxlq1-3-9-0" };