@dynatrace/strato-components 3.4.1 → 3.5.2

package/content/chip/BaseChip.css

@@ -1,9 +1,12 @@
-._1raebd91-3-4-1 {
+._1jgl8s50-3-5-2 ._1raebd90-3-5-2 {
+  gap: 1px;
+}
+._1raebd91-3-5-2 {
   cursor: not-allowed;
 }
-._1raebd92-3-4-1 {
-  background: var(--_bx32h2-3-4-1);
-  color: var(--_bx32h0-3-4-1);
+._1raebd92-3-5-2 {
+  background: var(--_bx32h2-3-5-2);
+  color: var(--_bx32h0-3-5-2);
   position: relative;
   display: grid;
   grid: auto / auto-flow auto;
@@ -17,100 +20,109 @@
   transition-duration: var(--dt-animations-fade-out-duration-base, 250ms);
   transition-property: color, background-color, transform;
 }
-._1raebd92-3-4-1:is(button) {
+._1raebd92-3-5-2:is(button) {
   border: 0;
 }
-._1raebd93-3-4-1 {
+._1raebd93-3-5-2 {
   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-4-1 {
+._1raebd94-3-5-2 {
   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-4-1 {
+._1raebd95-3-5-2 {
   border-bottom-right-radius: 0;
   border-top-right-radius: 0;
 }
-._1raebd96-3-4-1 {
+._1raebd96-3-5-2 {
   border-bottom-right-radius: var(--dt-borders-radius-field-subdued, 3px);
   border-top-right-radius: var(--dt-borders-radius-field-subdued, 3px);
 }
-._1raebd97-3-4-1 {
+._1raebd97-3-5-2 {
   cursor: not-allowed;
   pointer-events: none;
 }
-._1raebd98-3-4-1:is(button) {
+._1raebd98-3-5-2:is(button) {
   cursor: pointer;
 }
-._1raebd9g-3-4-1[tabindex]:hover, button._1raebd9g-3-4-1:hover, a._1raebd9g-3-4-1:hover {
+._1raebd9g-3-5-2[tabindex]:hover, button._1raebd9g-3-5-2:hover, a._1raebd9g-3-5-2:hover {
   background: var(--dt-colors-background-field-neutral-accent-hover, #4d4e72);
 }
-._1raebd9g-3-4-1[tabindex]:active, button._1raebd9g-3-4-1:active, a._1raebd9g-3-4-1:active {
+._1raebd9g-3-5-2[tabindex]:active, button._1raebd9g-3-5-2:active, a._1raebd9g-3-5-2:active {
   background: var(--dt-colors-background-field-neutral-accent-active, #404164);
 }
-._1raebd9h-3-4-1[tabindex]:hover, button._1raebd9h-3-4-1:hover, a._1raebd9h-3-4-1:hover {
+._1raebd9h-3-5-2[tabindex]:hover, button._1raebd9h-3-5-2:hover, a._1raebd9h-3-5-2:hover {
   background: var(--dt-colors-background-field-primary-accent-hover, #3b3fbe);
 }
-._1raebd9h-3-4-1[tabindex]:active, button._1raebd9h-3-4-1:active, a._1raebd9h-3-4-1:active {
+._1raebd9h-3-5-2[tabindex]:active, button._1raebd9h-3-5-2:active, a._1raebd9h-3-5-2:active {
   background: var(--dt-colors-background-field-primary-accent-active, #312dad);
 }
-._1raebd9i-3-4-1[tabindex]:hover, button._1raebd9i-3-4-1:hover, a._1raebd9i-3-4-1:hover {
+._1raebd9i-3-5-2[tabindex]:hover, button._1raebd9i-3-5-2:hover, a._1raebd9i-3-5-2:hover {
   background: var(--dt-colors-background-field-success-accent-hover, #1f5a54);
 }
-._1raebd9i-3-4-1[tabindex]:active, button._1raebd9i-3-4-1:active, a._1raebd9i-3-4-1:active {
+._1raebd9i-3-5-2[tabindex]:active, button._1raebd9i-3-5-2:active, a._1raebd9i-3-5-2:active {
   background: var(--dt-colors-background-field-success-accent-active, #0d4c47);
 }
-._1raebd9j-3-4-1[tabindex]:hover, button._1raebd9j-3-4-1:hover, a._1raebd9j-3-4-1:hover {
+._1raebd9j-3-5-2[tabindex]:hover, button._1raebd9j-3-5-2:hover, a._1raebd9j-3-5-2:hover {
   background: var(--dt-colors-background-field-warning-accent-hover, #ffb54f);
 }
-._1raebd9j-3-4-1[tabindex]:active, button._1raebd9j-3-4-1:active, a._1raebd9j-3-4-1:active {
+._1raebd9j-3-5-2[tabindex]:active, button._1raebd9j-3-5-2:active, a._1raebd9j-3-5-2:active {
   background: var(--dt-colors-background-field-warning-accent-active, #ffc76d);
 }
-._1raebd9k-3-4-1[tabindex]:hover, button._1raebd9k-3-4-1:hover, a._1raebd9k-3-4-1:hover {
+._1raebd9k-3-5-2[tabindex]:hover, button._1raebd9k-3-5-2:hover, a._1raebd9k-3-5-2:hover {
   background: var(--dt-colors-background-field-critical-accent-hover, #b4002b);
 }
-._1raebd9k-3-4-1[tabindex]:active, button._1raebd9k-3-4-1:active, a._1raebd9k-3-4-1:active {
+._1raebd9k-3-5-2[tabindex]:active, button._1raebd9k-3-5-2:active, a._1raebd9k-3-5-2:active {
   background: var(--dt-colors-background-field-critical-accent-active, #a2001d);
 }
-._1raebd9l-3-4-1[tabindex]:hover, button._1raebd9l-3-4-1:hover, a._1raebd9l-3-4-1:hover {
+._1raebd9l-3-5-2[tabindex]:hover, button._1raebd9l-3-5-2:hover, a._1raebd9l-3-5-2:hover {
+  background: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
+}
+._1raebd9l-3-5-2[tabindex]:active, button._1raebd9l-3-5-2:active, a._1raebd9l-3-5-2:active {
+  background: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
+}
+._1jgl8s50-3-5-2 ._1raebd9l-3-5-2 {
+  background: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+}
+._1jgl8s50-3-5-2 ._1raebd9l-3-5-2[tabindex]:hover, ._1jgl8s50-3-5-2 button._1raebd9l-3-5-2:hover, ._1jgl8s50-3-5-2 a._1raebd9l-3-5-2:hover {
   background: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._1raebd9l-3-4-1[tabindex]:active, button._1raebd9l-3-4-1:active, a._1raebd9l-3-4-1:active {
+._1jgl8s50-3-5-2 ._1raebd9l-3-5-2[tabindex]:active, ._1jgl8s50-3-5-2 button._1raebd9l-3-5-2:active, ._1jgl8s50-3-5-2 a._1raebd9l-3-5-2:active {
   background: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
 }
-._1raebd9m-3-4-1[tabindex]:hover, button._1raebd9m-3-4-1:hover, a._1raebd9m-3-4-1:hover {
+._1raebd9m-3-5-2[tabindex]:hover, button._1raebd9m-3-5-2:hover, a._1raebd9m-3-5-2:hover {
   background: var(--dt-colors-background-field-primary-emphasized-hover, #d5dbf6);
 }
-._1raebd9m-3-4-1[tabindex]:active, button._1raebd9m-3-4-1:active, a._1raebd9m-3-4-1:active {
+._1raebd9m-3-5-2[tabindex]:active, button._1raebd9m-3-5-2:active, a._1raebd9m-3-5-2:active {
   background: var(--dt-colors-background-field-primary-emphasized-active, #c9d1f4);
 }
-._1raebd9n-3-4-1[tabindex]:hover, button._1raebd9n-3-4-1:hover, a._1raebd9n-3-4-1:hover {
+._1raebd9n-3-5-2[tabindex]:hover, button._1raebd9n-3-5-2:hover, a._1raebd9n-3-5-2:hover {
   background: var(--dt-colors-background-field-success-emphasized-hover, #d3dedd);
 }
-._1raebd9n-3-4-1[tabindex]:active, button._1raebd9n-3-4-1:active, a._1raebd9n-3-4-1:active {
+._1raebd9n-3-5-2[tabindex]:active, button._1raebd9n-3-5-2:active, a._1raebd9n-3-5-2:active {
   background: var(--dt-colors-background-field-success-emphasized-active, #c7d5d3);
 }
-._1raebd9o-3-4-1[tabindex]:hover, button._1raebd9o-3-4-1:hover, a._1raebd9o-3-4-1:hover {
+._1raebd9o-3-5-2[tabindex]:hover, button._1raebd9o-3-5-2:hover, a._1raebd9o-3-5-2:hover {
   background: var(--dt-colors-background-field-warning-emphasized-hover, #f9ebdb);
 }
-._1raebd9o-3-4-1[tabindex]:active, button._1raebd9o-3-4-1:active, a._1raebd9o-3-4-1:active {
+._1raebd9o-3-5-2[tabindex]:active, button._1raebd9o-3-5-2:active, a._1raebd9o-3-5-2:active {
   background: var(--dt-colors-background-field-warning-emphasized-active, #f9e6d0);
 }
-._1raebd9p-3-4-1[tabindex]:hover, button._1raebd9p-3-4-1:hover, a._1raebd9p-3-4-1:hover {
+._1raebd9p-3-5-2[tabindex]:hover, button._1raebd9p-3-5-2:hover, a._1raebd9p-3-5-2:hover {
   background: var(--dt-colors-background-field-critical-emphasized-hover, #f6d6d5);
 }
-._1raebd9p-3-4-1[tabindex]:active, button._1raebd9p-3-4-1:active, a._1raebd9p-3-4-1:active {
+._1raebd9p-3-5-2[tabindex]:active, button._1raebd9p-3-5-2:active, a._1raebd9p-3-5-2:active {
   background: var(--dt-colors-background-field-critical-emphasized-active, #f5cac9);
 }
-._1raebd9q-3-4-1 {
-  color: var(--_bx32h0-3-4-1);
+._1raebd9q-3-5-2 {
+  color: var(--_bx32h0-3-5-2);
   min-width: 0;
   box-sizing: border-box;
   white-space: nowrap;
@@ -120,14 +132,14 @@
   text-transform: none;
   padding-inline: var(--dt-spacings-size-2, 2px);
 }
-._1raebd9q-3-4-1 * {
-  color: var(--_bx32h0-3-4-1);
+._1raebd9q-3-5-2 * {
+  color: var(--_bx32h0-3-5-2);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   vertical-align: baseline;
 }
-._1raebd9r-3-4-1 {
+._1raebd9r-3-5-2 {
   display: grid;
   grid: auto / auto-flow auto;
 }

package/content/chip/BaseChip.sty.js

@@ -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-4-1", variantClassNames: { size: { "default": "_1raebd93-3-4-1", condensed: "_1raebd94-3-4-1" }, hasDeleteButton: { true: "_1raebd95-3-4-1", false: "_1raebd96-3-4-1" }, disabled: { true: "_1raebd97-3-4-1", false: "_1raebd98-3-4-1" }, color: { neutral: "_1raebd99-3-4-1", primary: "_1raebd9a-3-4-1", success: "_1raebd9b-3-4-1", warning: "_1raebd9c-3-4-1", critical: "_1raebd9d-3-4-1" }, variant: { emphasized: "_1raebd9e-3-4-1", accent: "_1raebd9f-3-4-1" } }, defaultVariants: {}, compoundVariants: [[{ color: "neutral", variant: "accent" }, "_1raebd9g-3-4-1"], [{ color: "primary", variant: "accent" }, "_1raebd9h-3-4-1"], [{ color: "success", variant: "accent" }, "_1raebd9i-3-4-1"], [{ color: "warning", variant: "accent" }, "_1raebd9j-3-4-1"], [{ color: "critical", variant: "accent" }, "_1raebd9k-3-4-1"], [{ color: "neutral", variant: "emphasized" }, "_1raebd9l-3-4-1"], [{ color: "primary", variant: "emphasized" }, "_1raebd9m-3-4-1"], [{ color: "success", variant: "emphasized" }, "_1raebd9n-3-4-1"], [{ color: "warning", variant: "emphasized" }, "_1raebd9o-3-4-1"], [{ color: "critical", variant: "emphasized" }, "_1raebd9p-3-4-1"]] });
-var disabledWrapper = "_1raebd91-3-4-1";
-var textContainer = "_1raebd9r-3-4-1";
-var value = "_1raebd9q-3-4-1";
-var wrapper = "_1raebd90-3-4-1";
+var container = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1raebd92-3-5-2", variantClassNames: { size: { "default": "_1raebd93-3-5-2", condensed: "_1raebd94-3-5-2" }, hasDeleteButton: { true: "_1raebd95-3-5-2", false: "_1raebd96-3-5-2" }, disabled: { true: "_1raebd97-3-5-2", false: "_1raebd98-3-5-2" }, color: { neutral: "_1raebd99-3-5-2", primary: "_1raebd9a-3-5-2", success: "_1raebd9b-3-5-2", warning: "_1raebd9c-3-5-2", critical: "_1raebd9d-3-5-2" }, variant: { emphasized: "_1raebd9e-3-5-2", accent: "_1raebd9f-3-5-2" } }, defaultVariants: {}, compoundVariants: [[{ color: "neutral", variant: "accent" }, "_1raebd9g-3-5-2"], [{ color: "primary", variant: "accent" }, "_1raebd9h-3-5-2"], [{ color: "success", variant: "accent" }, "_1raebd9i-3-5-2"], [{ color: "warning", variant: "accent" }, "_1raebd9j-3-5-2"], [{ color: "critical", variant: "accent" }, "_1raebd9k-3-5-2"], [{ color: "neutral", variant: "emphasized" }, "_1raebd9l-3-5-2"], [{ color: "primary", variant: "emphasized" }, "_1raebd9m-3-5-2"], [{ color: "success", variant: "emphasized" }, "_1raebd9n-3-5-2"], [{ color: "warning", variant: "emphasized" }, "_1raebd9o-3-5-2"], [{ color: "critical", variant: "emphasized" }, "_1raebd9p-3-5-2"]] });
+var disabledWrapper = "_1raebd91-3-5-2";
+var textContainer = "_1raebd9r-3-5-2";
+var value = "_1raebd9q-3-5-2";
+var wrapper = "_1raebd90-3-5-2";

package/content/chip/ChipContent.css

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

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-4-1", variantClassNames: { size: { "default": "_uhh9yl2-3-4-1", condensed: "_uhh9yl3-3-4-1" } }, defaultVariants: {}, compoundVariants: [] });
-var prefix = "_uhh9yl4-3-4-1";
+var content = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_uhh9yl1-3-5-2", variantClassNames: { size: { "default": "_uhh9yl2-3-5-2", condensed: "_uhh9yl3-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });
+var prefix = "_uhh9yl4-3-5-2";

package/content/chip/ChipDeleteButton.css

@@ -1,16 +1,39 @@
-._3mvhm30-3-4-1 {
+._3mvhm30-3-5-2 {
   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);
 }
-._3mvhm31-3-4-1 {
+._1jgl8s50-3-5-2 ._3mvhm30-3-5-2 {
+  --_bx32h4-3-5-2: none;
+}
+._1jgl8s50-3-5-2 ._3mvhm30-3-5-2:hover {
+  --_bx32h4-3-5-2: none;
+}
+._1jgl8s50-3-5-2 ._3mvhm30-3-5-2:active {
+  --_bx32h4-3-5-2: none;
+}
+._1jgl8s50-3-5-2 ._3mvhm31-3-5-2 {
+  --_bx32h3-3-5-2: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+  --_bx32h2-3-5-2: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+}
+._1jgl8s50-3-5-2 ._3mvhm31-3-5-2:hover {
+  --_bx32h3-3-5-2: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
+}
+._1jgl8s50-3-5-2 ._3mvhm31-3-5-2:active {
+  --_bx32h3-3-5-2: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
+}
+._1jgl8s50-3-5-2 ._3mvhm32-3-5-2, ._1jgl8s50-3-5-2 ._3mvhm32-3-5-2:hover, ._1jgl8s50-3-5-2 ._3mvhm32-3-5-2:active {
+  --_bx32h3-3-5-2: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+  --_bx32h2-3-5-2: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+}
+._3mvhm33-3-5-2 {
   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);
 }
-._3mvhm32-3-4-1 {
+._3mvhm34-3-5-2 {
   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.js

@@ -71,7 +71,10 @@ const ChipDeleteButton = /* @__PURE__ */ (0, import_react.forwardRef)((props, fo
       disabled: propDisabled ?? disabled,
       "aria-label": ariaLabelProp,
       "aria-describedby": ariaDescribedByProp || valueId,
-      className: (0, import_clsx.default)(styles.base, styles.size[size], consumerClassName),
+      className: (0, import_clsx.default)(styles.base, styles.size[size], consumerClassName, {
+        [styles.neutralEmphasizedOverride]: color === "neutral" && variant === "emphasized",
+        [styles.disabledOverride]: propDisabled ?? disabled
+      }),
       style: consumerStyle,
       ...remainingProps,
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button.Prefix, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.XmarkIcon, { size: size === "default" ? size : "small" }) })

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

@@ -1,2 +1,8 @@
 export declare const base: string;
+/**
+ * Override the visual-refresh background for the neutral+emphasized chip
+ * delete button, which otherwise inherits Surface.Default from fieldTokens.
+ */
+export declare const neutralEmphasizedOverride: string;
+export declare const disabledOverride: string;
 export declare const size: Record<"default" | "condensed", string>;

package/content/chip/ChipDeleteButton.sty.js

@@ -18,9 +18,15 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var ChipDeleteButton_css_exports = {};
 __export(ChipDeleteButton_css_exports, {
   base: () => base,
+  disabledOverride: () => disabledOverride,
+  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_ChipDeleteButton_css_ts_vanilla = require("./ChipDeleteButton.css");
-var base = "_3mvhm30-3-4-1";
-var size = { "default": "_3mvhm31-3-4-1", condensed: "_3mvhm32-3-4-1" };
+var base = "_3mvhm30-3-5-2";
+var disabledOverride = "_3mvhm32-3-5-2";
+var neutralEmphasizedOverride = "_3mvhm31-3-5-2";
+var size = { "default": "_3mvhm33-3-5-2", condensed: "_3mvhm34-3-5-2" };

package/content/chip/ChipKey.css

@@ -1,11 +1,11 @@
-._1pehkco1-3-4-1 {
-  --_1pehkco0-3-4-1: var(--_bx32h0-3-4-1);
+._1pehkco1-3-5-2 {
+  --_1pehkco0-3-5-2: var(--_bx32h0-3-5-2);
   padding-inline: var(--dt-spacings-size-2, 2px);
 }
-._1raebd99-3-4-1._1raebd9e-3-4-1._1raebd98-3-4-1 ._1pehkco1-3-4-1 {
-  --_1pehkco0-3-4-1: var(--dt-colors-icon-neutral-subdued, #595a7d);
+._1raebd99-3-5-2._1raebd9e-3-5-2._1raebd98-3-5-2 ._1pehkco1-3-5-2 {
+  --_1pehkco0-3-5-2: var(--dt-colors-icon-neutral-subdued, #595a7d);
 }
-._1pehkco1-3-4-1._1pehkco1-3-4-1, ._1pehkco1-3-4-1._1pehkco1-3-4-1 *, ._1pehkco1-3-4-1._1pehkco1-3-4-1 *:hover {
+._1pehkco1-3-5-2._1pehkco1-3-5-2, ._1pehkco1-3-5-2._1pehkco1-3-5-2 *, ._1pehkco1-3-5-2._1pehkco1-3-5-2 *: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-4-1);
+  color: var(--_1pehkco0-3-5-2);
 }

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-4-1";
+var key = "_1pehkco1-3-5-2";

package/content/chip/GroupedChip.css

@@ -1,12 +1,12 @@
-._4mpedx0-3-4-1 {
+._4mpedx0-3-5-2 {
   position: absolute;
   visibility: hidden;
   z-index: -1;
 }
-._4mpedx1-3-4-1 {
+._4mpedx1-3-5-2 {
   flex: 0 0 auto;
 }
-._4mpedx2-3-4-1 {
+._4mpedx2-3-5-2 {
   min-width: 0;
   flex: 0 1 auto;
 }

package/content/chip/GroupedChip.sty.js

@@ -23,6 +23,6 @@ __export(GroupedChip_css_exports, {
 });
 module.exports = __toCommonJS(GroupedChip_css_exports);
 var import_GroupedChip_css_ts_vanilla = require("./GroupedChip.css");
-var first = "_4mpedx2-3-4-1";
-var grouped = "_4mpedx1-3-4-1";
-var hidden = "_4mpedx0-3-4-1";
+var first = "_4mpedx2-3-5-2";
+var grouped = "_4mpedx1-3-5-2";
+var hidden = "_4mpedx0-3-5-2";

package/content/chip-group/ChipGroup.css

@@ -1,4 +1,4 @@
-._dwt8fp0-3-4-1 {
+._dwt8fp0-3-5-2 {
   position: relative;
   align-items: center;
   align-content: center;
@@ -7,12 +7,12 @@
   overflow: hidden;
   line-height: var(--dt-typography-text-base-default-line-height, 1.4285714286);
 }
-._dwt8fp1-3-4-1 {
+._dwt8fp1-3-5-2 {
   gap: var(--dt-spacings-size-6, 6px);
 }
-._dwt8fp3-3-4-1 {
+._dwt8fp3-3-5-2 {
   flex-wrap: wrap;
 }
-._dwt8fp4-3-4-1 {
+._dwt8fp4-3-5-2 {
   flex-wrap: nowrap;
 }

package/content/chip-group/ChipGroup.js

@@ -113,6 +113,14 @@ const RootChipGroup = (0, import_react.forwardRef)(
             child = child.nextSibling;
           } while (!wrap && child);
           setAllChipsFit(!wrap);
+          setTimeout(() => {
+            const controlButton = containerRef.current?.querySelector(
+              `button[aria-controls="${uniqueId}"]`
+            );
+            if (controlButton) {
+              controlButton.focus();
+            }
+          }, 0);
         });
         return () => {
           cancelAnimationFrame(rafId);
@@ -137,7 +145,7 @@ const RootChipGroup = (0, import_react.forwardRef)(
       setAllChipsFit(allFit);
       setHiddenChips(chipKeys.slice(effectiveHiddenChipsIndex));
       setVisibleChips(chipKeys.slice(0, effectiveHiddenChipsIndex));
-    }, [containerWidth, expanded, size, state, maxVisibleChips]);
+    }, [containerWidth, expanded, size, state, maxVisibleChips, uniqueId]);
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_ChipGroupContext.ChipGroupContext.Provider,
       {

package/content/chip-group/ChipGroup.sty.js

@@ -22,4 +22,4 @@ __export(ChipGroup_css_exports, {
 module.exports = __toCommonJS(ChipGroup_css_exports);
 var import_ChipGroup_css_ts_vanilla = require("./ChipGroup.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var chipGroupCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_dwt8fp0-3-4-1", variantClassNames: { size: { condensed: "_dwt8fp1-3-4-1", "default": "_dwt8fp2-3-4-1" }, expanded: { true: "_dwt8fp3-3-4-1", false: "_dwt8fp4-3-4-1" } }, defaultVariants: {}, compoundVariants: [] });
+var chipGroupCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_dwt8fp0-3-5-2", variantClassNames: { size: { condensed: "_dwt8fp1-3-5-2", "default": "_dwt8fp2-3-5-2" }, expanded: { true: "_dwt8fp3-3-5-2", false: "_dwt8fp4-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });

package/content/chip-group/Control.css

@@ -1,4 +1,4 @@
-._uoyq2d0-3-4-1 {
+._uoyq2d0-3-5-2 {
   gap: var(--dt-spacings-size-4, 4px);
   display: inline-flex;
   padding: var(--dt-spacings-size-0, 0);
@@ -23,12 +23,12 @@
   cursor: pointer;
   transition: background-color var(--dt-animations-hover-duration-base, 150ms) var(--dt-animations-hover-easing, cubic-bezier(0, 0, 0.2, 1));
 }
-._uoyq2d0-3-4-1:focus-visible {
-  text-decoration: none;
-}
-._uoyq2d0-3-4-1:hover {
+._uoyq2d0-3-5-2:hover {
   background: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._uoyq2d0-3-4-1:active {
+._uoyq2d0-3-5-2:active {
   background: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
+}
+._uoyq2d1-3-5-2 {
+  text-decoration: none;
 }

package/content/chip-group/Control.js

@@ -34,11 +34,12 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_clsx = __toESM(require("clsx"));
 var import_react = require("react");
 var import_react_intl = require("react-intl");
-var import_Control_css = require("./Control.sty.js");
+var styles = __toESM(require("./Control.sty.js"));
 var import_useChipGroupContext = require("./hooks/useChipGroupContext.js");
 var import_useInternalChipGroupContext = require("./hooks/useInternalChipGroupContext.js");
 var import_chip_group_state_reducer = require("./state/chip-group-state-reducer.js");
 var import_useContainerSize = require("../../core/hooks/useContainerSize.js");
+var import_useFocusRing = require("../../core/styles/useFocusRing.js");
 var import_ProgressCircle = require("../progress/ProgressCircle.js");
 const Control = (props) => {
   const {
@@ -52,6 +53,9 @@ const Control = (props) => {
     "data-testid": dataTestId
   } = props;
   const intl = (0, import_react_intl.useIntl)();
+  const { focusProps, focusClassName, isFocusVisible } = (0, import_useFocusRing.useFocusRing)({
+    color: "neutral"
+  });
   const { hiddenKeys, visibleKeys } = (0, import_useChipGroupContext.useChipGroupContext)();
   const internalChipGroupContext = (0, import_useInternalChipGroupContext.useInternalChipGroupContext)();
   const { chipGroupId, expanded, allChipsFit, setExpanded, dispatch } = internalChipGroupContext || {};
@@ -95,7 +99,8 @@ const Control = (props) => {
       }
     });
   }, [dispatch, display, width]);
-  if (display === void 0 && (allChipsFit || visibleKeys.length === 0)) {
+  const shouldHide = display === void 0 && (allChipsFit || visibleKeys.length === 0) && !loading;
+  if (shouldHide) {
     return null;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -109,8 +114,13 @@ const Control = (props) => {
       },
       "aria-controls": chipGroupId,
       "aria-expanded": expanded,
-      className: (0, import_clsx.default)(import_Control_css.expandButtonCSS, consumerClassName),
+      className: (0, import_clsx.default)(
+        styles.expandButton({ isFocusVisible }),
+        focusClassName,
+        consumerClassName
+      ),
       style: consumerStyle,
+      ...focusProps,
       children: [
         loading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_ProgressCircle.ProgressCircle,

package/content/chip-group/Control.sty.d.ts

@@ -1 +1,8 @@
-export declare const expandButtonCSS: string;
+export declare const expandButton: import("@vanilla-extract/recipes").RuntimeFn<{
+    isFocusVisible: {
+        true: {
+            textDecoration: "none";
+        };
+        false: {};
+    };
+}>;

package/content/chip-group/Control.sty.js

@@ -17,9 +17,9 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var Control_css_exports = {};
 __export(Control_css_exports, {
-  expandButtonCSS: () => expandButtonCSS
+  expandButton: () => expandButton
 });
 module.exports = __toCommonJS(Control_css_exports);
-var import_focusRingStatic_css_ts_vanilla = require("../../core/styles/focusRingStatic.css");
 var import_Control_css_ts_vanilla = require("./Control.css");
-var expandButtonCSS = "_uoyq2d0-3-4-1 _z0fq9b4-3-4-1 _z0fq9bc-3-4-1 _z0fq9b6-3-4-1 _z0fq9ba-3-4-1";
+var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
+var expandButton = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_uoyq2d0-3-5-2", variantClassNames: { isFocusVisible: { true: "_uoyq2d1-3-5-2", false: "_uoyq2d2-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });