@dynatrace/strato-components 3.12.2 → 3.13.0

package/content/chip/BaseChip.css

@@ -1,12 +1,45 @@
-._1jgl8s50-3-12-2 ._1raebd90-3-12-2 {
+._1jgl8s50-3-13-0 ._1raebd91-3-13-0 {
   gap: 1px;
 }
-._1raebd91-3-12-2 {
+._1raebd92-3-13-0 {
   cursor: not-allowed;
 }
-._1raebd92-3-12-2 {
-  background: var(--_bx32h2-3-12-2);
-  color: var(--_bx32h0-3-12-2);
+._1raebd94-3-13-0 {
+  --_1raebd90-3-13-0: var(--dt-colors-border-neutral-default, #dadbe4);
+}
+._1raebd95-3-13-0 {
+  --_1raebd90-3-13-0: var(--dt-colors-border-primary-default, #d5dbf6);
+}
+._1raebd96-3-13-0 {
+  --_1raebd90-3-13-0: var(--dt-colors-border-success-default, #d3dedd);
+}
+._1raebd97-3-13-0 {
+  --_1raebd90-3-13-0: var(--dt-colors-border-warning-default, #f9ebdb);
+}
+._1raebd98-3-13-0 {
+  --_1raebd90-3-13-0: var(--dt-colors-border-critical-default, #f6d6d5);
+}
+._1jgl8s50-3-13-0 ._1raebd99-3-13-0 {
+  gap: 0;
+}
+._1raebd9b-3-13-0 {
+  --_1raebd90-3-13-0: var(--dt-colors-border-neutral-disabled, #dadbe480);
+}
+._1raebd9c-3-13-0 {
+  --_1raebd90-3-13-0: var(--dt-colors-border-primary-disabled, #dadbe480);
+}
+._1raebd9d-3-13-0 {
+  --_1raebd90-3-13-0: var(--dt-colors-border-success-disabled, #dadbe480);
+}
+._1raebd9e-3-13-0 {
+  --_1raebd90-3-13-0: var(--dt-colors-border-warning-disabled, #dadbe480);
+}
+._1raebd9f-3-13-0 {
+  --_1raebd90-3-13-0: var(--dt-colors-border-critical-disabled, #dadbe480);
+}
+._1raebd9g-3-13-0 {
+  background: var(--_bx32h2-3-13-0);
+  color: var(--_bx32h0-3-13-0);
   position: relative;
   display: grid;
   grid: auto / auto-flow auto;
@@ -20,109 +53,117 @@
   transition-duration: var(--dt-animations-fade-out-duration-base, 250ms);
   transition-property: color, background-color, transform;
 }
-._1raebd92-3-12-2:is(button) {
+._1raebd9g-3-13-0:is(button) {
   border: 0;
 }
-._1raebd93-3-12-2 {
+._1raebd9h-3-13-0 {
   padding-left: var(--dt-spacings-size-4, 4px);
   padding-right: var(--dt-spacings-size-4, 4px);
   padding-top: var(--dt-spacings-size-2, 2px);
   padding-bottom: var(--dt-spacings-size-2, 2px);
   height: var(--dt-spacings-size-24, 24px);
 }
-._1raebd94-3-12-2 {
+._1raebd9i-3-13-0 {
   padding-left: var(--dt-spacings-size-2, 2px);
   padding-right: var(--dt-spacings-size-2, 2px);
   padding-top: 0;
   padding-bottom: 0;
   height: var(--dt-spacings-size-20, 20px);
 }
-._1raebd95-3-12-2 {
+._1raebd9j-3-13-0 {
   border-bottom-right-radius: 0;
   border-top-right-radius: 0;
 }
-._1raebd96-3-12-2 {
+._1raebd9k-3-13-0 {
   border-bottom-right-radius: var(--dt-borders-radius-field-subdued, 3px);
   border-top-right-radius: var(--dt-borders-radius-field-subdued, 3px);
 }
-._1raebd97-3-12-2 {
+._1raebd9l-3-13-0 {
   cursor: not-allowed;
   pointer-events: none;
 }
-._1raebd98-3-12-2:is(button) {
+._1raebd9m-3-13-0:is(button) {
   cursor: pointer;
 }
-._1raebd9g-3-12-2[tabindex]:hover, button._1raebd9g-3-12-2:hover, a._1raebd9g-3-12-2:hover {
+._1jgl8s50-3-13-0 ._1raebd9s-3-13-0 {
+  border-style: var(--dt-borders-style-default, solid);
+  border-width: var(--dt-borders-width-default, 1px);
+  border-color: var(--_1raebd90-3-13-0);
+}
+._1raebd9u-3-13-0[tabindex]:hover, button._1raebd9u-3-13-0:hover, a._1raebd9u-3-13-0:hover {
   background: var(--dt-colors-background-field-neutral-accent-hover, #4d4e72);
 }
-._1raebd9g-3-12-2[tabindex]:active, button._1raebd9g-3-12-2:active, a._1raebd9g-3-12-2:active {
+._1raebd9u-3-13-0[tabindex]:active, button._1raebd9u-3-13-0:active, a._1raebd9u-3-13-0:active {
   background: var(--dt-colors-background-field-neutral-accent-active, #404164);
 }
-._1raebd9h-3-12-2[tabindex]:hover, button._1raebd9h-3-12-2:hover, a._1raebd9h-3-12-2:hover {
+._1raebd9v-3-13-0[tabindex]:hover, button._1raebd9v-3-13-0:hover, a._1raebd9v-3-13-0:hover {
   background: var(--dt-colors-background-field-primary-accent-hover, #3b3fbe);
 }
-._1raebd9h-3-12-2[tabindex]:active, button._1raebd9h-3-12-2:active, a._1raebd9h-3-12-2:active {
+._1raebd9v-3-13-0[tabindex]:active, button._1raebd9v-3-13-0:active, a._1raebd9v-3-13-0:active {
   background: var(--dt-colors-background-field-primary-accent-active, #312dad);
 }
-._1raebd9i-3-12-2[tabindex]:hover, button._1raebd9i-3-12-2:hover, a._1raebd9i-3-12-2:hover {
+._1raebd9w-3-13-0[tabindex]:hover, button._1raebd9w-3-13-0:hover, a._1raebd9w-3-13-0:hover {
   background: var(--dt-colors-background-field-success-accent-hover, #1f5a54);
 }
-._1raebd9i-3-12-2[tabindex]:active, button._1raebd9i-3-12-2:active, a._1raebd9i-3-12-2:active {
+._1raebd9w-3-13-0[tabindex]:active, button._1raebd9w-3-13-0:active, a._1raebd9w-3-13-0:active {
   background: var(--dt-colors-background-field-success-accent-active, #0d4c47);
 }
-._1raebd9j-3-12-2[tabindex]:hover, button._1raebd9j-3-12-2:hover, a._1raebd9j-3-12-2:hover {
+._1raebd9x-3-13-0[tabindex]:hover, button._1raebd9x-3-13-0:hover, a._1raebd9x-3-13-0:hover {
   background: var(--dt-colors-background-field-warning-accent-hover, #ffb54f);
 }
-._1raebd9j-3-12-2[tabindex]:active, button._1raebd9j-3-12-2:active, a._1raebd9j-3-12-2:active {
+._1raebd9x-3-13-0[tabindex]:active, button._1raebd9x-3-13-0:active, a._1raebd9x-3-13-0:active {
   background: var(--dt-colors-background-field-warning-accent-active, #ffc76d);
 }
-._1raebd9k-3-12-2[tabindex]:hover, button._1raebd9k-3-12-2:hover, a._1raebd9k-3-12-2:hover {
+._1raebd9y-3-13-0[tabindex]:hover, button._1raebd9y-3-13-0:hover, a._1raebd9y-3-13-0:hover {
   background: var(--dt-colors-background-field-critical-accent-hover, #b4002b);
 }
-._1raebd9k-3-12-2[tabindex]:active, button._1raebd9k-3-12-2:active, a._1raebd9k-3-12-2:active {
+._1raebd9y-3-13-0[tabindex]:active, button._1raebd9y-3-13-0:active, a._1raebd9y-3-13-0:active {
   background: var(--dt-colors-background-field-critical-accent-active, #a2001d);
 }
-._1raebd9l-3-12-2[tabindex]:hover, button._1raebd9l-3-12-2:hover, a._1raebd9l-3-12-2:hover {
+._1raebd9z-3-13-0[tabindex]:hover, button._1raebd9z-3-13-0:hover, a._1raebd9z-3-13-0:hover {
   background: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._1raebd9l-3-12-2[tabindex]:active, button._1raebd9l-3-12-2:active, a._1raebd9l-3-12-2:active {
+._1raebd9z-3-13-0[tabindex]:active, button._1raebd9z-3-13-0:active, a._1raebd9z-3-13-0:active {
   background: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
 }
-._1jgl8s50-3-12-2 ._1raebd9l-3-12-2 {
-  background: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+._1jgl8s50-3-13-0 ._1raebd9z-3-13-0 {
+  background: var(--dt-colors-background-base-default, #f9f9fa);
 }
-._1jgl8s50-3-12-2 ._1raebd9l-3-12-2[tabindex]:hover, ._1jgl8s50-3-12-2 button._1raebd9l-3-12-2:hover, ._1jgl8s50-3-12-2 a._1raebd9l-3-12-2:hover {
+._1jgl8s50-3-13-0 ._1raebd9z-3-13-0[tabindex]:hover, ._1jgl8s50-3-13-0 button._1raebd9z-3-13-0:hover, ._1jgl8s50-3-13-0 a._1raebd9z-3-13-0:hover {
   background: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._1jgl8s50-3-12-2 ._1raebd9l-3-12-2[tabindex]:active, ._1jgl8s50-3-12-2 button._1raebd9l-3-12-2:active, ._1jgl8s50-3-12-2 a._1raebd9l-3-12-2:active {
+._1jgl8s50-3-13-0 ._1raebd9z-3-13-0[tabindex]:active, ._1jgl8s50-3-13-0 button._1raebd9z-3-13-0:active, ._1jgl8s50-3-13-0 a._1raebd9z-3-13-0:active {
   background: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
 }
-._1raebd9m-3-12-2[tabindex]:hover, button._1raebd9m-3-12-2:hover, a._1raebd9m-3-12-2:hover {
+._1jgl8s50-3-13-0 ._1raebd910-3-13-0 {
+  background: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
+}
+._1raebd911-3-13-0[tabindex]:hover, button._1raebd911-3-13-0:hover, a._1raebd911-3-13-0:hover {
   background: var(--dt-colors-background-field-primary-emphasized-hover, #d5dbf6);
 }
-._1raebd9m-3-12-2[tabindex]:active, button._1raebd9m-3-12-2:active, a._1raebd9m-3-12-2:active {
+._1raebd911-3-13-0[tabindex]:active, button._1raebd911-3-13-0:active, a._1raebd911-3-13-0:active {
   background: var(--dt-colors-background-field-primary-emphasized-active, #c9d1f4);
 }
-._1raebd9n-3-12-2[tabindex]:hover, button._1raebd9n-3-12-2:hover, a._1raebd9n-3-12-2:hover {
+._1raebd912-3-13-0[tabindex]:hover, button._1raebd912-3-13-0:hover, a._1raebd912-3-13-0:hover {
   background: var(--dt-colors-background-field-success-emphasized-hover, #d3dedd);
 }
-._1raebd9n-3-12-2[tabindex]:active, button._1raebd9n-3-12-2:active, a._1raebd9n-3-12-2:active {
+._1raebd912-3-13-0[tabindex]:active, button._1raebd912-3-13-0:active, a._1raebd912-3-13-0:active {
   background: var(--dt-colors-background-field-success-emphasized-active, #c7d5d3);
 }
-._1raebd9o-3-12-2[tabindex]:hover, button._1raebd9o-3-12-2:hover, a._1raebd9o-3-12-2:hover {
+._1raebd913-3-13-0[tabindex]:hover, button._1raebd913-3-13-0:hover, a._1raebd913-3-13-0:hover {
   background: var(--dt-colors-background-field-warning-emphasized-hover, #f9ebdb);
 }
-._1raebd9o-3-12-2[tabindex]:active, button._1raebd9o-3-12-2:active, a._1raebd9o-3-12-2:active {
+._1raebd913-3-13-0[tabindex]:active, button._1raebd913-3-13-0:active, a._1raebd913-3-13-0:active {
   background: var(--dt-colors-background-field-warning-emphasized-active, #f9e6d0);
 }
-._1raebd9p-3-12-2[tabindex]:hover, button._1raebd9p-3-12-2:hover, a._1raebd9p-3-12-2:hover {
+._1raebd914-3-13-0[tabindex]:hover, button._1raebd914-3-13-0:hover, a._1raebd914-3-13-0:hover {
   background: var(--dt-colors-background-field-critical-emphasized-hover, #f6d6d5);
 }
-._1raebd9p-3-12-2[tabindex]:active, button._1raebd9p-3-12-2:active, a._1raebd9p-3-12-2:active {
+._1raebd914-3-13-0[tabindex]:active, button._1raebd914-3-13-0:active, a._1raebd914-3-13-0:active {
   background: var(--dt-colors-background-field-critical-emphasized-active, #f5cac9);
 }
-._1raebd9q-3-12-2 {
-  color: var(--_bx32h0-3-12-2);
+._1raebd915-3-13-0 {
+  color: var(--_bx32h0-3-13-0);
   min-width: 0;
   box-sizing: border-box;
   white-space: nowrap;
@@ -132,14 +173,14 @@
   text-transform: none;
   padding-inline: var(--dt-spacings-size-2, 2px);
 }
-._1raebd9q-3-12-2 * {
-  color: var(--_bx32h0-3-12-2);
+._1raebd915-3-13-0 * {
+  color: var(--_bx32h0-3-13-0);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   vertical-align: baseline;
 }
-._1raebd9r-3-12-2 {
+._1raebd916-3-13-0 {
   display: grid;
   grid: auto / auto-flow auto;
 }

package/content/chip/BaseChip.css.d.ts

@@ -1,5 +1,53 @@
-export declare const wrapper: string;
-export declare const disabledWrapper: string;
+/**
+ * Border color of a Visual Refresh emphasized chip. Set on the wrapper so that both the chip
+ * body and the sibling delete button resolve the same color.
+ */
+export declare const chipBorderColor: `var(--${string})`;
+export declare const wrapper: import("@vanilla-extract/recipes").RuntimeFn<{
+    disabled: {
+        true: {
+            cursor: "not-allowed";
+        };
+        false: {};
+    };
+    color: {
+        neutral: {
+            vars: {
+                [chipBorderColor]: string;
+            };
+        };
+        primary: {
+            vars: {
+                [chipBorderColor]: string;
+            };
+        };
+        success: {
+            vars: {
+                [chipBorderColor]: string;
+            };
+        };
+        warning: {
+            vars: {
+                [chipBorderColor]: string;
+            };
+        };
+        critical: {
+            vars: {
+                [chipBorderColor]: string;
+            };
+        };
+    };
+    variant: {
+        emphasized: {
+            selectors: {
+                [x: string]: {
+                    gap: number;
+                };
+            };
+        };
+        accent: {};
+    };
+}>;
 export declare const container: import("@vanilla-extract/recipes").RuntimeFn<{
     size: {
         default: {
@@ -48,7 +96,15 @@ export declare const container: import("@vanilla-extract/recipes").RuntimeFn<{
         critical: {};
     };
     variant: {
-        emphasized: {};
+        emphasized: {
+            selectors: {
+                [x: string]: {
+                    borderStyle: string;
+                    borderWidth: string;
+                    borderColor: `var(--${string})`;
+                };
+            };
+        };
         accent: {};
     };
 }>;

package/content/chip/BaseChip.js

@@ -107,8 +107,7 @@ const RootBaseChip = /* @__PURE__ */ (0, import_react.forwardRef)(
         ref: forwardedRef,
         gap: 2,
         className: (0, import_clsx.default)(
-          styles.wrapper,
-          disabled && styles.disabledWrapper,
+          styles.wrapper({ variant, color, disabled }),
           (0, import_field_css.fieldTokens)({ variant, color, disabled }),
           consumerClassName
         ),

package/content/chip/BaseChip.sty.js

@@ -17,8 +17,8 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var BaseChip_css_exports = {};
 __export(BaseChip_css_exports, {
+  chipBorderColor: () => chipBorderColor,
   container: () => container,
-  disabledWrapper: () => disabledWrapper,
   textContainer: () => textContainer,
   value: () => value,
   wrapper: () => wrapper
@@ -28,8 +28,8 @@ var import_AppRoot_css_ts_vanilla = require("../../core/components/app-root/AppR
 var import_field_css_ts_vanilla = require("../../styles/field.css");
 var import_BaseChip_css_ts_vanilla = require("./BaseChip.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var container = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1raebd92-3-12-2", variantClassNames: { size: { "default": "_1raebd93-3-12-2", condensed: "_1raebd94-3-12-2" }, hasDeleteButton: { true: "_1raebd95-3-12-2", false: "_1raebd96-3-12-2" }, disabled: { true: "_1raebd97-3-12-2", false: "_1raebd98-3-12-2" }, color: { neutral: "_1raebd99-3-12-2", primary: "_1raebd9a-3-12-2", success: "_1raebd9b-3-12-2", warning: "_1raebd9c-3-12-2", critical: "_1raebd9d-3-12-2" }, variant: { emphasized: "_1raebd9e-3-12-2", accent: "_1raebd9f-3-12-2" } }, defaultVariants: {}, compoundVariants: [[{ color: "neutral", variant: "accent" }, "_1raebd9g-3-12-2"], [{ color: "primary", variant: "accent" }, "_1raebd9h-3-12-2"], [{ color: "success", variant: "accent" }, "_1raebd9i-3-12-2"], [{ color: "warning", variant: "accent" }, "_1raebd9j-3-12-2"], [{ color: "critical", variant: "accent" }, "_1raebd9k-3-12-2"], [{ color: "neutral", variant: "emphasized" }, "_1raebd9l-3-12-2"], [{ color: "primary", variant: "emphasized" }, "_1raebd9m-3-12-2"], [{ color: "success", variant: "emphasized" }, "_1raebd9n-3-12-2"], [{ color: "warning", variant: "emphasized" }, "_1raebd9o-3-12-2"], [{ color: "critical", variant: "emphasized" }, "_1raebd9p-3-12-2"]] });
-var disabledWrapper = "_1raebd91-3-12-2";
-var textContainer = "_1raebd9r-3-12-2";
-var value = "_1raebd9q-3-12-2";
-var wrapper = "_1raebd90-3-12-2";
+var chipBorderColor = "var(--_1raebd90-3-13-0)";
+var container = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1raebd9g-3-13-0", variantClassNames: { size: { "default": "_1raebd9h-3-13-0", condensed: "_1raebd9i-3-13-0" }, hasDeleteButton: { true: "_1raebd9j-3-13-0", false: "_1raebd9k-3-13-0" }, disabled: { true: "_1raebd9l-3-13-0", false: "_1raebd9m-3-13-0" }, color: { neutral: "_1raebd9n-3-13-0", primary: "_1raebd9o-3-13-0", success: "_1raebd9p-3-13-0", warning: "_1raebd9q-3-13-0", critical: "_1raebd9r-3-13-0" }, variant: { emphasized: "_1raebd9s-3-13-0", accent: "_1raebd9t-3-13-0" } }, defaultVariants: {}, compoundVariants: [[{ color: "neutral", variant: "accent" }, "_1raebd9u-3-13-0"], [{ color: "primary", variant: "accent" }, "_1raebd9v-3-13-0"], [{ color: "success", variant: "accent" }, "_1raebd9w-3-13-0"], [{ color: "warning", variant: "accent" }, "_1raebd9x-3-13-0"], [{ color: "critical", variant: "accent" }, "_1raebd9y-3-13-0"], [{ color: "neutral", variant: "emphasized" }, "_1raebd9z-3-13-0"], [{ color: "neutral", variant: "emphasized", disabled: true }, "_1raebd910-3-13-0"], [{ color: "primary", variant: "emphasized" }, "_1raebd911-3-13-0"], [{ color: "success", variant: "emphasized" }, "_1raebd912-3-13-0"], [{ color: "warning", variant: "emphasized" }, "_1raebd913-3-13-0"], [{ color: "critical", variant: "emphasized" }, "_1raebd914-3-13-0"]] });
+var textContainer = "_1raebd916-3-13-0";
+var value = "_1raebd915-3-13-0";
+var wrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1raebd91-3-13-0", variantClassNames: { disabled: { true: "_1raebd92-3-13-0", false: "_1raebd93-3-13-0" }, color: { neutral: "_1raebd94-3-13-0", primary: "_1raebd95-3-13-0", success: "_1raebd96-3-13-0", warning: "_1raebd97-3-13-0", critical: "_1raebd98-3-13-0" }, variant: { emphasized: "_1raebd99-3-13-0", accent: "_1raebd9a-3-13-0" } }, defaultVariants: {}, compoundVariants: [[{ color: "neutral", disabled: true }, "_1raebd9b-3-13-0"], [{ color: "primary", disabled: true }, "_1raebd9c-3-13-0"], [{ color: "success", disabled: true }, "_1raebd9d-3-13-0"], [{ color: "warning", disabled: true }, "_1raebd9e-3-13-0"], [{ color: "critical", disabled: true }, "_1raebd9f-3-13-0"]] });

package/content/chip/ChipContent.css

@@ -1,24 +1,24 @@
-._uhh9yl1-3-12-2 {
+._uhh9yl1-3-13-0 {
   display: flex;
   align-self: stretch;
   line-height: 100%;
-  fill: var(--_bx32h1-3-12-2);
-  color: var(--_bx32h0-3-12-2);
+  fill: var(--_bx32h1-3-13-0);
+  color: var(--_bx32h0-3-13-0);
 }
-._uhh9yl2-3-12-2 {
-  --_uhh9yl0-3-12-2: 20px;
+._uhh9yl2-3-13-0 {
+  --_uhh9yl0-3-13-0: 20px;
 }
-._uhh9yl3-3-12-2 {
-  --_uhh9yl0-3-12-2: 16px;
+._uhh9yl3-3-13-0 {
+  --_uhh9yl0-3-13-0: 16px;
 }
-._1raebd99-3-12-2._1raebd9e-3-12-2._1raebd98-3-12-2 ._uhh9yl4-3-12-2 {
+._1raebd9n-3-13-0._1raebd9s-3-13-0._1raebd9m-3-13-0 ._uhh9yl4-3-13-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   fill: var(--dt-colors-icon-neutral-subdued, #595a7d);
 }
-._uhh9yl1-3-12-2._uhh9yl1-3-12-2 svg {
+._uhh9yl1-3-13-0._uhh9yl1-3-13-0 svg {
   box-sizing: content-box;
   align-items: center;
   align-self: center;
-  width: var(--_uhh9yl0-3-12-2);
-  height: var(--_uhh9yl0-3-12-2);
+  width: var(--_uhh9yl0-3-13-0);
+  height: var(--_uhh9yl0-3-13-0);
 }

package/content/chip/ChipContent.sty.js

@@ -26,5 +26,5 @@ var import_field_css_ts_vanilla = require("../../styles/field.css");
 var import_BaseChip_css_ts_vanilla = require("./BaseChip.css");
 var import_ChipContent_css_ts_vanilla = require("./ChipContent.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var content = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_uhh9yl1-3-12-2", variantClassNames: { size: { "default": "_uhh9yl2-3-12-2", condensed: "_uhh9yl3-3-12-2" } }, defaultVariants: {}, compoundVariants: [] });
-var prefix = "_uhh9yl4-3-12-2";
+var content = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_uhh9yl1-3-13-0", variantClassNames: { size: { "default": "_uhh9yl2-3-13-0", condensed: "_uhh9yl3-3-13-0" } }, defaultVariants: {}, compoundVariants: [] });
+var prefix = "_uhh9yl4-3-13-0";

package/content/chip/ChipDeleteButton.css

@@ -1,39 +1,53 @@
-._3mvhm30-3-12-2 {
+._3mvhm30-3-13-0 {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
   border-top-right-radius: var(--dt-borders-radius-field-subdued, 3px);
   border-bottom-right-radius: var(--dt-borders-radius-field-subdued, 3px);
 }
-._1jgl8s50-3-12-2 ._3mvhm30-3-12-2 {
-  --_bx32h4-3-12-2: none;
+._1jgl8s50-3-13-0 ._3mvhm30-3-13-0 {
+  --_bx32h4-3-13-0: none;
 }
-._1jgl8s50-3-12-2 ._3mvhm30-3-12-2:hover {
-  --_bx32h4-3-12-2: none;
+._1jgl8s50-3-13-0 ._3mvhm30-3-13-0:hover {
+  --_bx32h4-3-13-0: none;
 }
-._1jgl8s50-3-12-2 ._3mvhm30-3-12-2:active {
-  --_bx32h4-3-12-2: none;
+._1jgl8s50-3-13-0 ._3mvhm30-3-13-0:active {
+  --_bx32h4-3-13-0: none;
 }
-._1jgl8s50-3-12-2 ._3mvhm31-3-12-2 {
-  --_bx32h3-3-12-2: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
-  --_bx32h2-3-12-2: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+._1jgl8s50-3-13-0 ._3mvhm31-3-13-0 {
+  border-style: var(--dt-borders-style-default, solid);
+  border-width: var(--dt-borders-width-default, 1px);
+  border-left-width: 0;
+  border-color: var(--_1raebd90-3-13-0);
+  height: var(--dt-spacings-size-24, 24px);
 }
-._1jgl8s50-3-12-2 ._3mvhm31-3-12-2:hover {
-  --_bx32h3-3-12-2: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
+._1jgl8s50-3-13-0 ._3mvhm32-3-13-0 {
+  border-style: var(--dt-borders-style-default, solid);
+  border-width: var(--dt-borders-width-default, 1px);
+  border-left-width: 0;
+  border-color: var(--_1raebd90-3-13-0);
+  height: var(--dt-spacings-size-20, 20px);
 }
-._1jgl8s50-3-12-2 ._3mvhm31-3-12-2:active {
-  --_bx32h3-3-12-2: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
+._1jgl8s50-3-13-0 ._3mvhm33-3-13-0 {
+  --_bx32h3-3-13-0: var(--dt-colors-background-base-default, #f9f9fa);
+  --_bx32h2-3-13-0: var(--dt-colors-background-base-default, #f9f9fa);
 }
-._1jgl8s50-3-12-2 ._3mvhm32-3-12-2, ._1jgl8s50-3-12-2 ._3mvhm32-3-12-2:hover, ._1jgl8s50-3-12-2 ._3mvhm32-3-12-2:active {
-  --_bx32h3-3-12-2: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
-  --_bx32h2-3-12-2: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+._1jgl8s50-3-13-0 ._3mvhm33-3-13-0:hover {
+  --_bx32h3-3-13-0: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._3mvhm33-3-12-2 {
+._1jgl8s50-3-13-0 ._3mvhm33-3-13-0:active {
+  --_bx32h3-3-13-0: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
+}
+._1jgl8s50-3-13-0 ._3mvhm34-3-13-0, ._1jgl8s50-3-13-0 ._3mvhm34-3-13-0:hover, ._1jgl8s50-3-13-0 ._3mvhm34-3-13-0:active {
+  --_bx32h3-3-13-0: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
+  --_bx32h2-3-13-0: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
+}
+._3mvhm35-3-13-0 {
   padding-left: var(--dt-spacings-size-4, 4px);
   padding-right: var(--dt-spacings-size-4, 4px);
   padding-top: var(--dt-spacings-size-2, 2px);
   padding-bottom: var(--dt-spacings-size-2, 2px);
 }
-._3mvhm34-3-12-2 {
+._3mvhm36-3-13-0 {
   padding-left: var(--dt-spacings-size-2, 2px);
   padding-right: var(--dt-spacings-size-2, 2px);
   padding-top: var(--dt-spacings-size-2, 2px);

package/content/chip/ChipDeleteButton.css.d.ts

@@ -1,4 +1,9 @@
 export declare const base: string;
+/**
+ * Continues the emphasized chip body's Visual Refresh border around the delete button. The left
+ * edge stays open so that the body's right border is the only divider between the two elements.
+ */
+export declare const emphasizedBorder: Record<"condensed" | "default", string>;
 /**
  * Override the visual-refresh background for the neutral+emphasized chip
  * delete button, which otherwise inherits Surface.Default from fieldTokens.

package/content/chip/ChipDeleteButton.js

@@ -37,14 +37,11 @@ var import_react_intl = require("react-intl");
 var import_strato_icons = require("@dynatrace/strato-icons");
 var styles = __toESM(require("./ChipDeleteButton.sty.js"));
 var import_useChipContext = require("./contexts/useChipContext.js");
+var import_messages = require("./messages.js");
 var import_Button = require("../../buttons/button/Button.js");
 const ChipDeleteButton = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwardedRef) => {
   const intl = (0, import_react_intl.useIntl)();
-  const deleteChip = intl.formatMessage({
-    defaultMessage: "Delete chip",
-    id: "JfsC0aOiAl7G3esV",
-    description: "Aria label used to describe the delete chip button."
-  });
+  const deleteChip = intl.formatMessage(import_messages.chipMessages.deleteButtonLabel);
   const {
     disabled: propDisabled,
     "aria-label": ariaLabelProp = deleteChip,
@@ -72,6 +69,7 @@ const ChipDeleteButton = /* @__PURE__ */ (0, import_react.forwardRef)((props, fo
       "aria-label": ariaLabelProp,
       "aria-describedby": ariaDescribedByProp || valueId,
       className: (0, import_clsx.default)(styles.base, styles.size[size], consumerClassName, {
+        [styles.emphasizedBorder[size]]: variant === "emphasized",
         [styles.neutralEmphasizedOverride]: color === "neutral" && variant === "emphasized",
         [styles.disabledOverride]: propDisabled ?? disabled
       }),

package/content/chip/ChipDeleteButton.sty.js

@@ -19,14 +19,17 @@ var ChipDeleteButton_css_exports = {};
 __export(ChipDeleteButton_css_exports, {
   base: () => base,
   disabledOverride: () => disabledOverride,
+  emphasizedBorder: () => emphasizedBorder,
   neutralEmphasizedOverride: () => neutralEmphasizedOverride,
   size: () => size
 });
 module.exports = __toCommonJS(ChipDeleteButton_css_exports);
 var import_AppRoot_css_ts_vanilla = require("../../core/components/app-root/AppRoot.css");
 var import_field_css_ts_vanilla = require("../../styles/field.css");
+var import_BaseChip_css_ts_vanilla = require("./BaseChip.css");
 var import_ChipDeleteButton_css_ts_vanilla = require("./ChipDeleteButton.css");
-var base = "_3mvhm30-3-12-2";
-var disabledOverride = "_3mvhm32-3-12-2";
-var neutralEmphasizedOverride = "_3mvhm31-3-12-2";
-var size = { "default": "_3mvhm33-3-12-2", condensed: "_3mvhm34-3-12-2" };
+var base = "_3mvhm30-3-13-0";
+var disabledOverride = "_3mvhm34-3-13-0";
+var emphasizedBorder = { "default": "_3mvhm31-3-13-0", condensed: "_3mvhm32-3-13-0" };
+var neutralEmphasizedOverride = "_3mvhm33-3-13-0";
+var size = { "default": "_3mvhm35-3-13-0", condensed: "_3mvhm36-3-13-0" };

package/content/chip/ChipKey.css

@@ -1,11 +1,11 @@
-._1pehkco1-3-12-2 {
-  --_1pehkco0-3-12-2: var(--_bx32h0-3-12-2);
+._1pehkco1-3-13-0 {
+  --_1pehkco0-3-13-0: var(--_bx32h0-3-13-0);
   padding-inline: var(--dt-spacings-size-2, 2px);
 }
-._1raebd99-3-12-2._1raebd9e-3-12-2._1raebd98-3-12-2 ._1pehkco1-3-12-2 {
-  --_1pehkco0-3-12-2: var(--dt-colors-icon-neutral-subdued, #595a7d);
+._1raebd9n-3-13-0._1raebd9s-3-13-0._1raebd9m-3-13-0 ._1pehkco1-3-13-0 {
+  --_1pehkco0-3-13-0: var(--dt-colors-icon-neutral-subdued, #595a7d);
 }
-._1pehkco1-3-12-2._1pehkco1-3-12-2, ._1pehkco1-3-12-2._1pehkco1-3-12-2 *, ._1pehkco1-3-12-2._1pehkco1-3-12-2 *:hover {
+._1pehkco1-3-13-0._1pehkco1-3-13-0, ._1pehkco1-3-13-0._1pehkco1-3-13-0 *, ._1pehkco1-3-13-0._1pehkco1-3-13-0 *:hover {
   min-width: 0;
   box-sizing: border-box;
   white-space: nowrap;
@@ -13,5 +13,5 @@
   text-overflow: ellipsis;
   display: block;
   text-transform: none;
-  color: var(--_1pehkco0-3-12-2);
+  color: var(--_1pehkco0-3-13-0);
 }

package/content/chip/ChipKey.sty.js

@@ -24,4 +24,4 @@ var import_AppRoot_css_ts_vanilla = require("../../core/components/app-root/AppR
 var import_field_css_ts_vanilla = require("../../styles/field.css");
 var import_BaseChip_css_ts_vanilla = require("./BaseChip.css");
 var import_ChipKey_css_ts_vanilla = require("./ChipKey.css");
-var key = "_1pehkco1-3-12-2";
+var key = "_1pehkco1-3-13-0";

package/content/chip/GroupedChip.css

@@ -1,12 +1,80 @@
-._4mpedx0-3-12-2 {
+._4mpedx0-3-13-0 {
   position: absolute;
   visibility: hidden;
   z-index: -1;
 }
-._4mpedx1-3-12-2 {
+._4mpedx1-3-13-0 {
   flex: 0 0 auto;
 }
-._4mpedx2-3-12-2 {
+._4mpedx1-3-13-0:focus {
+  outline: none;
+}
+._4mpedx2-3-13-0 {
   min-width: 0;
   flex: 0 1 auto;
+}
+._4mpedx3-3-13-0 {
+  position: relative;
+}
+._4mpedx3-3-13-0::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  pointer-events: none;
+  border-radius: var(--dt-borders-radius-field-subdued, 3px);
+  box-shadow: 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--dt-colors-border-neutral-accent, #595a7d) inset,
+      0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--dt-colors-border-neutral-default, #dadbe4) inset;
+}
+._4mpedx4-3-13-0 {
+  position: relative;
+}
+._4mpedx4-3-13-0::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  pointer-events: none;
+  border-radius: var(--dt-borders-radius-field-subdued, 3px);
+  box-shadow: 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--dt-colors-border-primary-accent, #464cce) inset,
+      0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--dt-colors-border-primary-default, #d5dbf6) inset;
+}
+._4mpedx5-3-13-0 {
+  position: relative;
+}
+._4mpedx5-3-13-0::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  pointer-events: none;
+  border-radius: var(--dt-borders-radius-field-subdued, 3px);
+  box-shadow: 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--dt-colors-border-success-accent, #2d6761) inset,
+      0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--dt-colors-border-success-default, #d3dedd) inset;
+}
+._4mpedx6-3-13-0 {
+  position: relative;
+}
+._4mpedx6-3-13-0::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  pointer-events: none;
+  border-radius: var(--dt-borders-radius-field-subdued, 3px);
+  box-shadow: 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--dt-colors-border-warning-accent, #855400) inset,
+      0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--dt-colors-border-warning-default, #f9ebdb) inset;
+}
+._4mpedx7-3-13-0 {
+  position: relative;
+}
+._4mpedx7-3-13-0::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  pointer-events: none;
+  border-radius: var(--dt-borders-radius-field-subdued, 3px);
+  box-shadow: 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--dt-colors-border-critical-accent, #bb0731) inset,
+      0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--dt-colors-border-critical-default, #f6d6d5) inset;
 }

package/content/chip/GroupedChip.css.d.ts

@@ -1,4 +1,5 @@
 export declare const hidden: string;
 export declare const grouped: string;
 export declare const first: string;
+export declare const pendingFocusRing: Record<"critical" | "neutral" | "primary" | "success" | "warning", string>;
 //# sourceMappingURL=GroupedChip.css.d.ts.map