@dynatrace/strato-components 3.12.2 → 3.13.0

package/esm/content/chip/ChipKey.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/chip/ChipKey.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport './BaseChip.css';\nimport './ChipKey.css';\nexport var key = '_1pehkco1-3-12-2';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport './BaseChip.css';\nimport './ChipKey.css';\nexport var key = '_1pehkco1-3-13-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,MAAM;",
   "names": []
 }

package/esm/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/esm/content/chip/GroupedChip.js

@@ -7,6 +7,7 @@ import {
 } from "react";
 import { BaseChip } from "./BaseChip.js";
 import * as styles from "./GroupedChip.sty.js";
+import { usePendingFocusAnnouncement } from "./hooks/usePendingFocusAnnouncement.js";
 import { useContainerSize } from "../../core/hooks/useContainerSize.js";
 import { useId } from "../../core/hooks/useId.js";
 import { useMergeRefs } from "../../core/hooks/useMergeRefs.js";
@@ -19,6 +20,7 @@ const GroupedChip = /* @__PURE__ */ forwardRef(
       children,
       size: propSize,
       disabled: propDisabled,
+      color = "neutral",
       "data-dtrum-mask": dataDtrumMask,
       "data-dtrum-allow": dataDtrumAllow,
       ...remainingProps
@@ -32,7 +34,9 @@ const GroupedChip = /* @__PURE__ */ forwardRef(
     const {
       disabled: chipGroupDisabled,
       size: chipGroupSize,
-      dispatch
+      dispatch,
+      pendingFocusChip,
+      setPendingFocusChip
     } = internalChipGroupContext || {};
     const disabled = propDisabled ?? chipGroupDisabled ?? false;
     const size = propSize ?? chipGroupSize ?? "default";
@@ -56,14 +60,30 @@ const GroupedChip = /* @__PURE__ */ forwardRef(
         payload: { uniqueId, width: width === 0 ? void 0 : width }
       });
     }, [dispatch, uniqueId, width]);
+    const isVisible = visibleKeys.includes(uniqueId);
+    const isPendingFocus = pendingFocusChip?.uniqueId === uniqueId;
+    const showFocusRing = isPendingFocus && pendingFocusChip?.showFocusRing === true;
+    const pendingFocusRingColor = disabled ? "neutral" : color ?? "neutral";
+    usePendingFocusAnnouncement(chipRef, {
+      isPendingFocus,
+      isVisible,
+      disabled,
+      uniqueId,
+      setPendingFocusChip
+    });
     return /* @__PURE__ */ jsx(
       "div",
       {
         ref: rootRef,
-        className: clsx("chip", styles.grouped, {
-          [styles.first]: visibleKeys.includes(uniqueId) && visibleKeys.length === 1,
-          [styles.hidden]: !visibleKeys.includes(uniqueId)
-        }),
+        className: clsx(
+          "chip",
+          styles.grouped,
+          showFocusRing && styles.pendingFocusRing[pendingFocusRingColor],
+          {
+            [styles.first]: isVisible && visibleKeys.length === 1,
+            [styles.hidden]: !isVisible
+          }
+        ),
         "data-dtrum-mask": dataDtrumMask,
         "data-dtrum-allow": dataDtrumAllow,
         children: /* @__PURE__ */ jsx(
@@ -72,6 +92,7 @@ const GroupedChip = /* @__PURE__ */ forwardRef(
             ...remainingProps,
             disabled,
             size,
+            color,
             children
           }
         )

package/esm/content/chip/GroupedChip.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/chip/GroupedChip.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  useEffect,\n  useRef,\n  type ElementType,\n  type ReactElement,\n} from 'react';\n\nimport { BaseChip } from './BaseChip.js';\nimport * as styles from './GroupedChip.sty.js';\nimport type { ChipProps } from './types/chip.js';\nimport { useContainerSize } from '../../core/hooks/useContainerSize.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useChipGroupContext } from '../chip-group/hooks/useChipGroupContext.js';\nimport { useInternalChipGroupContext } from '../chip-group/hooks/useInternalChipGroupContext.js';\nimport { ChipGroupActions } from '../chip-group/state/chip-group-state-reducer.js';\n\n/**\n * Grouped chip component\n * @internal\n */\nexport const GroupedChip: <E extends ElementType = 'div'>(\n  props: ChipProps<E>,\n) => ReactElement | null = /* @__PURE__ */ forwardRef(\n  <E extends ElementType>(\n    props: ChipProps<E>,\n    forwardedRef: typeof props.ref,\n  ) => {\n    const {\n      children,\n      size: propSize,\n      disabled: propDisabled,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      ...remainingProps\n    } = props;\n    const uniqueId = useId();\n\n    const chipRef = useRef<HTMLElement | null>(null);\n    const { width } = useContainerSize(chipRef);\n\n    const rootRef = useMergeRefs<HTMLElement | null>([chipRef, forwardedRef]);\n    const { visibleKeys } = useChipGroupContext();\n    const internalChipGroupContext = useInternalChipGroupContext();\n    const {\n      disabled: chipGroupDisabled,\n      size: chipGroupSize,\n      dispatch,\n    } = internalChipGroupContext || {};\n\n    const disabled = propDisabled ?? chipGroupDisabled ?? false;\n    const size = propSize ?? chipGroupSize ?? 'default';\n\n    useEffect(() => {\n      dispatch?.({\n        type: ChipGroupActions.ADDCHIP,\n        payload: { uniqueId, width },\n      });\n\n      return () => {\n        dispatch?.({\n          type: ChipGroupActions.REMOVECHIP,\n          payload: {\n            uniqueId,\n          },\n        });\n      };\n      // only for mount and unmount\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n\n    useEffect(() => {\n      dispatch?.({\n        type: ChipGroupActions.UPDATECHIP,\n        payload: { uniqueId, width: width === 0 ? undefined : width },\n      });\n    }, [dispatch, uniqueId, width]);\n\n    return (\n      <div\n        ref={rootRef}\n        className={clsx('chip', styles.grouped, {\n          [styles.first]:\n            visibleKeys.includes(uniqueId) && visibleKeys.length === 1,\n          [styles.hidden]: !visibleKeys.includes(uniqueId),\n        })}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n      >\n        <BaseChip\n          {...(remainingProps as ChipProps<E>)}\n          disabled={disabled}\n          size={size}\n        >\n          {children}\n        </BaseChip>\n      </div>\n    );\n  },\n);\n"],
-  "mappings": "AA2FQ;AA3FR,OAAO,UAAU;AACjB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAEP,SAAS,gBAAgB;AACzB,YAAY,YAAY;AAExB,SAAS,wBAAwB;AACjC,SAAS,aAAa;AACtB,SAAS,oBAAoB;AAC7B,SAAS,2BAA2B;AACpC,SAAS,mCAAmC;AAC5C,SAAS,wBAAwB;AAM1B,MAAM,cAE8B;AAAA,EACzC,CACE,OACA,iBACG;AACH,UAAM;AAAA,MACJ;AAAA,MACA,MAAM;AAAA,MACN,UAAU;AAAA,MACV,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,GAAG;AAAA,IACL,IAAI;AACJ,UAAM,WAAW,MAAM;AAEvB,UAAM,UAAU,OAA2B,IAAI;AAC/C,UAAM,EAAE,MAAM,IAAI,iBAAiB,OAAO;AAE1C,UAAM,UAAU,aAAiC,CAAC,SAAS,YAAY,CAAC;AACxE,UAAM,EAAE,YAAY,IAAI,oBAAoB;AAC5C,UAAM,2BAA2B,4BAA4B;AAC7D,UAAM;AAAA,MACJ,UAAU;AAAA,MACV,MAAM;AAAA,MACN;AAAA,IACF,IAAI,4BAA4B,CAAC;AAEjC,UAAM,WAAW,gBAAgB,qBAAqB;AACtD,UAAM,OAAO,YAAY,iBAAiB;AAE1C,cAAU,MAAM;AACd,iBAAW;AAAA,QACT,MAAM,iBAAiB;AAAA,QACvB,SAAS,EAAE,UAAU,MAAM;AAAA,MAC7B,CAAC;AAED,aAAO,MAAM;AACX,mBAAW;AAAA,UACT,MAAM,iBAAiB;AAAA,UACvB,SAAS;AAAA,YACP;AAAA,UACF;AAAA,QACF,CAAC;AAAA,MACH;AAAA,IAGF,GAAG,CAAC,CAAC;AAEL,cAAU,MAAM;AACd,iBAAW;AAAA,QACT,MAAM,iBAAiB;AAAA,QACvB,SAAS,EAAE,UAAU,OAAO,UAAU,IAAI,SAAY,MAAM;AAAA,MAC9D,CAAC;AAAA,IACH,GAAG,CAAC,UAAU,UAAU,KAAK,CAAC;AAE9B,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAW,KAAK,QAAQ,OAAO,SAAS;AAAA,UACtC,CAAC,OAAO,KAAK,GACX,YAAY,SAAS,QAAQ,KAAK,YAAY,WAAW;AAAA,UAC3D,CAAC,OAAO,MAAM,GAAG,CAAC,YAAY,SAAS,QAAQ;AAAA,QACjD,CAAC;AAAA,QACD,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAElB;AAAA,UAAC;AAAA;AAAA,YACE,GAAI;AAAA,YACL;AAAA,YACA;AAAA,YAEC;AAAA;AAAA,QACH;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  useEffect,\n  useRef,\n  type ElementType,\n  type ReactElement,\n} from 'react';\n\nimport { BaseChip } from './BaseChip.js';\nimport * as styles from './GroupedChip.sty.js';\nimport { usePendingFocusAnnouncement } from './hooks/usePendingFocusAnnouncement.js';\nimport type { ChipProps } from './types/chip.js';\nimport { useContainerSize } from '../../core/hooks/useContainerSize.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useChipGroupContext } from '../chip-group/hooks/useChipGroupContext.js';\nimport { useInternalChipGroupContext } from '../chip-group/hooks/useInternalChipGroupContext.js';\nimport { ChipGroupActions } from '../chip-group/state/chip-group-state-reducer.js';\n\n/**\n * Grouped chip component\n * @internal\n */\nexport const GroupedChip: <E extends ElementType = 'div'>(\n  props: ChipProps<E>,\n) => ReactElement | null = /* @__PURE__ */ forwardRef(\n  <E extends ElementType>(\n    props: ChipProps<E>,\n    forwardedRef: typeof props.ref,\n  ) => {\n    const {\n      children,\n      size: propSize,\n      disabled: propDisabled,\n      color = 'neutral',\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      ...remainingProps\n    } = props;\n    const uniqueId = useId();\n\n    const chipRef = useRef<HTMLElement | null>(null);\n    const { width } = useContainerSize(chipRef);\n\n    const rootRef = useMergeRefs<HTMLElement | null>([chipRef, forwardedRef]);\n    const { visibleKeys } = useChipGroupContext();\n    const internalChipGroupContext = useInternalChipGroupContext();\n    const {\n      disabled: chipGroupDisabled,\n      size: chipGroupSize,\n      dispatch,\n      pendingFocusChip,\n      setPendingFocusChip,\n    } = internalChipGroupContext || {};\n\n    const disabled = propDisabled ?? chipGroupDisabled ?? false;\n    const size = propSize ?? chipGroupSize ?? 'default';\n\n    useEffect(() => {\n      dispatch?.({\n        type: ChipGroupActions.ADDCHIP,\n        payload: { uniqueId, width },\n      });\n\n      return () => {\n        dispatch?.({\n          type: ChipGroupActions.REMOVECHIP,\n          payload: {\n            uniqueId,\n          },\n        });\n      };\n      // only for mount and unmount\n      // oxlint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n\n    useEffect(() => {\n      dispatch?.({\n        type: ChipGroupActions.UPDATECHIP,\n        payload: { uniqueId, width: width === 0 ? undefined : width },\n      });\n    }, [dispatch, uniqueId, width]);\n\n    const isVisible = visibleKeys.includes(uniqueId);\n    const isPendingFocus = pendingFocusChip?.uniqueId === uniqueId;\n    const showFocusRing =\n      isPendingFocus && pendingFocusChip?.showFocusRing === true;\n    // Disabled chips still need a visible focus ring when programmatically focused\n    // and 'neutral' avoids showing an active-state color.\n    const pendingFocusRingColor = disabled ? 'neutral' : (color ?? 'neutral');\n\n    usePendingFocusAnnouncement(chipRef, {\n      isPendingFocus,\n      isVisible,\n      disabled,\n      uniqueId,\n      setPendingFocusChip,\n    });\n\n    return (\n      <div\n        ref={rootRef}\n        className={clsx(\n          'chip',\n          styles.grouped,\n          showFocusRing && styles.pendingFocusRing[pendingFocusRingColor],\n          {\n            [styles.first]: isVisible && visibleKeys.length === 1,\n            [styles.hidden]: !isVisible,\n          },\n        )}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n      >\n        <BaseChip\n          {...(remainingProps as ChipProps<E>)}\n          disabled={disabled}\n          size={size}\n          color={color}\n        >\n          {children}\n        </BaseChip>\n      </div>\n    );\n  },\n);\n"],
+  "mappings": "AAmHQ;AAnHR,OAAO,UAAU;AACjB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAEP,SAAS,gBAAgB;AACzB,YAAY,YAAY;AACxB,SAAS,mCAAmC;AAE5C,SAAS,wBAAwB;AACjC,SAAS,aAAa;AACtB,SAAS,oBAAoB;AAC7B,SAAS,2BAA2B;AACpC,SAAS,mCAAmC;AAC5C,SAAS,wBAAwB;AAM1B,MAAM,cAE8B;AAAA,EACzC,CACE,OACA,iBACG;AACH,UAAM;AAAA,MACJ;AAAA,MACA,MAAM;AAAA,MACN,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,GAAG;AAAA,IACL,IAAI;AACJ,UAAM,WAAW,MAAM;AAEvB,UAAM,UAAU,OAA2B,IAAI;AAC/C,UAAM,EAAE,MAAM,IAAI,iBAAiB,OAAO;AAE1C,UAAM,UAAU,aAAiC,CAAC,SAAS,YAAY,CAAC;AACxE,UAAM,EAAE,YAAY,IAAI,oBAAoB;AAC5C,UAAM,2BAA2B,4BAA4B;AAC7D,UAAM;AAAA,MACJ,UAAU;AAAA,MACV,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI,4BAA4B,CAAC;AAEjC,UAAM,WAAW,gBAAgB,qBAAqB;AACtD,UAAM,OAAO,YAAY,iBAAiB;AAE1C,cAAU,MAAM;AACd,iBAAW;AAAA,QACT,MAAM,iBAAiB;AAAA,QACvB,SAAS,EAAE,UAAU,MAAM;AAAA,MAC7B,CAAC;AAED,aAAO,MAAM;AACX,mBAAW;AAAA,UACT,MAAM,iBAAiB;AAAA,UACvB,SAAS;AAAA,YACP;AAAA,UACF;AAAA,QACF,CAAC;AAAA,MACH;AAAA,IAGF,GAAG,CAAC,CAAC;AAEL,cAAU,MAAM;AACd,iBAAW;AAAA,QACT,MAAM,iBAAiB;AAAA,QACvB,SAAS,EAAE,UAAU,OAAO,UAAU,IAAI,SAAY,MAAM;AAAA,MAC9D,CAAC;AAAA,IACH,GAAG,CAAC,UAAU,UAAU,KAAK,CAAC;AAE9B,UAAM,YAAY,YAAY,SAAS,QAAQ;AAC/C,UAAM,iBAAiB,kBAAkB,aAAa;AACtD,UAAM,gBACJ,kBAAkB,kBAAkB,kBAAkB;AAGxD,UAAM,wBAAwB,WAAW,YAAa,SAAS;AAE/D,gCAA4B,SAAS;AAAA,MACnC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAED,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAW;AAAA,UACT;AAAA,UACA,OAAO;AAAA,UACP,iBAAiB,OAAO,iBAAiB,qBAAqB;AAAA,UAC9D;AAAA,YACE,CAAC,OAAO,KAAK,GAAG,aAAa,YAAY,WAAW;AAAA,YACpD,CAAC,OAAO,MAAM,GAAG,CAAC;AAAA,UACpB;AAAA,QACF;AAAA,QACA,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAElB;AAAA,UAAC;AAAA;AAAA,YACE,GAAI;AAAA,YACL;AAAA,YACA;AAAA,YACA;AAAA,YAEC;AAAA;AAAA,QACH;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;",
   "names": []
 }

package/esm/content/chip/GroupedChip.sty.js

@@ -1,10 +1,13 @@
+import "../../core/styles/focusRingStatic.css";
 import "./GroupedChip.css";
-var first = "_4mpedx2-3-12-2";
-var grouped = "_4mpedx1-3-12-2";
-var hidden = "_4mpedx0-3-12-2";
+var first = "_4mpedx2-3-13-0";
+var grouped = "_4mpedx1-3-13-0";
+var hidden = "_4mpedx0-3-13-0";
+var pendingFocusRing = { neutral: "_4mpedx3-3-13-0", primary: "_4mpedx4-3-13-0", success: "_4mpedx5-3-13-0", warning: "_4mpedx6-3-13-0", critical: "_4mpedx7-3-13-0" };
 export {
   first,
   grouped,
-  hidden
+  hidden,
+  pendingFocusRing
 };
 //# sourceMappingURL=GroupedChip.sty.js.map

package/esm/content/chip/GroupedChip.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/chip/GroupedChip.css.ts"],
-  "sourcesContent": ["import './GroupedChip.css';\nexport var first = '_4mpedx2-3-12-2';\nexport var grouped = '_4mpedx1-3-12-2';\nexport var hidden = '_4mpedx0-3-12-2';"],
-  "mappings": "AAAA,OAAO;AACA,IAAI,QAAQ;AACZ,IAAI,UAAU;AACd,IAAI,SAAS;",
+  "sourcesContent": ["import '../../core/styles/focusRingStatic.css';\nimport './GroupedChip.css';\nexport var first = '_4mpedx2-3-13-0';\nexport var grouped = '_4mpedx1-3-13-0';\nexport var hidden = '_4mpedx0-3-13-0';\nexport var pendingFocusRing = {neutral:'_4mpedx3-3-13-0',primary:'_4mpedx4-3-13-0',success:'_4mpedx5-3-13-0',warning:'_4mpedx6-3-13-0',critical:'_4mpedx7-3-13-0'};"],
+  "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,QAAQ;AACZ,IAAI,UAAU;AACd,IAAI,SAAS;AACb,IAAI,mBAAmB,EAAC,SAAQ,mBAAkB,SAAQ,mBAAkB,SAAQ,mBAAkB,SAAQ,mBAAkB,UAAS,kBAAiB;",
   "names": []
 }

package/esm/content/chip/hooks/usePendingFocusAnnouncement.js

@@ -0,0 +1,54 @@
+import {
+  useEffect
+} from "react";
+function usePendingFocusAnnouncement(chipRef, options) {
+  const { isPendingFocus, isVisible, disabled, uniqueId, setPendingFocusChip } = options;
+  useEffect(() => {
+    if (!isPendingFocus || !isVisible) {
+      return;
+    }
+    const chipWrapper = chipRef.current;
+    if (!chipWrapper) {
+      return;
+    }
+    const removeFocusAttributes = () => {
+      chipWrapper.removeAttribute("tabindex");
+      chipWrapper.removeAttribute("aria-label");
+      chipWrapper.removeAttribute("aria-disabled");
+      chipWrapper.removeAttribute("role");
+    };
+    const handleBlur = () => {
+      removeFocusAttributes();
+      setPendingFocusChip?.(
+        (current) => current?.uniqueId === uniqueId ? null : current
+      );
+    };
+    chipWrapper.setAttribute("tabindex", "-1");
+    chipWrapper.setAttribute("role", "group");
+    chipWrapper.setAttribute("aria-disabled", String(disabled));
+    const chipLabel = chipWrapper.querySelector(".strato-surface")?.textContent?.trim();
+    if (chipLabel) {
+      chipWrapper.setAttribute("aria-label", chipLabel);
+    }
+    chipWrapper.focus();
+    chipWrapper.addEventListener("blur", handleBlur, { once: true });
+    return () => {
+      removeFocusAttributes();
+      chipWrapper.removeEventListener("blur", handleBlur);
+      setPendingFocusChip?.(
+        (current) => current?.uniqueId === uniqueId ? null : current
+      );
+    };
+  }, [
+    chipRef,
+    disabled,
+    isPendingFocus,
+    isVisible,
+    setPendingFocusChip,
+    uniqueId
+  ]);
+}
+export {
+  usePendingFocusAnnouncement
+};
+//# sourceMappingURL=usePendingFocusAnnouncement.js.map

package/esm/content/chip/hooks/usePendingFocusAnnouncement.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/content/chip/hooks/usePendingFocusAnnouncement.ts"],
+  "sourcesContent": ["import {\n  useEffect,\n  type Dispatch,\n  type RefObject,\n  type SetStateAction,\n} from 'react';\n\nimport type { PendingFocusChip } from '../../chip-group/contexts/InternalChipGroupContext.js';\n\n/**\n * Moves focus onto the first revealed chip after \"Show more\" expands the group.\n * Cleanup happens on blur.\n * @internal\n */\nexport function usePendingFocusAnnouncement(\n  chipRef: RefObject<HTMLElement | null>,\n  options: {\n    isPendingFocus: boolean;\n    isVisible: boolean;\n    disabled: boolean;\n    uniqueId: string;\n    setPendingFocusChip?: Dispatch<SetStateAction<PendingFocusChip>>;\n  },\n): void {\n  const { isPendingFocus, isVisible, disabled, uniqueId, setPendingFocusChip } =\n    options;\n\n  useEffect(() => {\n    if (!isPendingFocus || !isVisible) {\n      return;\n    }\n    const chipWrapper = chipRef.current;\n    if (!chipWrapper) {\n      return;\n    }\n\n    const removeFocusAttributes = (): void => {\n      chipWrapper.removeAttribute('tabindex');\n      chipWrapper.removeAttribute('aria-label');\n      chipWrapper.removeAttribute('aria-disabled');\n      chipWrapper.removeAttribute('role');\n    };\n\n    const handleBlur = (): void => {\n      removeFocusAttributes();\n      setPendingFocusChip?.((current) =>\n        current?.uniqueId === uniqueId ? null : current,\n      );\n    };\n\n    // Apply a temporary tabindex of -1 to allow programmatic focus onto\n    // the non-interactive wrapper when it is the first revealed chip.\n    chipWrapper.setAttribute('tabindex', '-1');\n    chipWrapper.setAttribute('role', 'group');\n    chipWrapper.setAttribute('aria-disabled', String(disabled));\n    // Use the chip surface's text content as the accessible name so the screen\n    // reader announces the chip when focus lands on the non-interactive wrapper.\n    const chipLabel = chipWrapper\n      .querySelector('.strato-surface')\n      ?.textContent?.trim();\n    if (chipLabel) {\n      chipWrapper.setAttribute('aria-label', chipLabel);\n    }\n\n    chipWrapper.focus();\n    chipWrapper.addEventListener('blur', handleBlur, { once: true });\n\n    return () => {\n      removeFocusAttributes();\n      chipWrapper.removeEventListener('blur', handleBlur);\n      setPendingFocusChip?.((current) =>\n        current?.uniqueId === uniqueId ? null : current,\n      );\n    };\n  }, [\n    chipRef,\n    disabled,\n    isPendingFocus,\n    isVisible,\n    setPendingFocusChip,\n    uniqueId,\n  ]);\n}\n"],
+  "mappings": "AAAA;AAAA,EACE;AAAA,OAIK;AASA,SAAS,4BACd,SACA,SAOM;AACN,QAAM,EAAE,gBAAgB,WAAW,UAAU,UAAU,oBAAoB,IACzE;AAEF,YAAU,MAAM;AACd,QAAI,CAAC,kBAAkB,CAAC,WAAW;AACjC;AAAA,IACF;AACA,UAAM,cAAc,QAAQ;AAC5B,QAAI,CAAC,aAAa;AAChB;AAAA,IACF;AAEA,UAAM,wBAAwB,MAAY;AACxC,kBAAY,gBAAgB,UAAU;AACtC,kBAAY,gBAAgB,YAAY;AACxC,kBAAY,gBAAgB,eAAe;AAC3C,kBAAY,gBAAgB,MAAM;AAAA,IACpC;AAEA,UAAM,aAAa,MAAY;AAC7B,4BAAsB;AACtB;AAAA,QAAsB,CAAC,YACrB,SAAS,aAAa,WAAW,OAAO;AAAA,MAC1C;AAAA,IACF;AAIA,gBAAY,aAAa,YAAY,IAAI;AACzC,gBAAY,aAAa,QAAQ,OAAO;AACxC,gBAAY,aAAa,iBAAiB,OAAO,QAAQ,CAAC;AAG1D,UAAM,YAAY,YACf,cAAc,iBAAiB,GAC9B,aAAa,KAAK;AACtB,QAAI,WAAW;AACb,kBAAY,aAAa,cAAc,SAAS;AAAA,IAClD;AAEA,gBAAY,MAAM;AAClB,gBAAY,iBAAiB,QAAQ,YAAY,EAAE,MAAM,KAAK,CAAC;AAE/D,WAAO,MAAM;AACX,4BAAsB;AACtB,kBAAY,oBAAoB,QAAQ,UAAU;AAClD;AAAA,QAAsB,CAAC,YACrB,SAAS,aAAa,WAAW,OAAO;AAAA,MAC1C;AAAA,IACF;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACH;",
+  "names": []
+}

package/esm/content/chip/messages.js

@@ -0,0 +1,12 @@
+import { defineMessages } from "react-intl";
+const chipMessages = defineMessages({
+  deleteButtonLabel: {
+    defaultMessage: "Delete chip",
+    description: "Aria label used to describe the delete chip button.",
+    id: "JfsC0aOiAl7G3esV"
+  }
+});
+export {
+  chipMessages
+};
+//# sourceMappingURL=messages.js.map

package/esm/content/chip/messages.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/content/chip/messages.ts"],
+  "sourcesContent": ["import { defineMessages } from 'react-intl';\n\nexport const chipMessages = defineMessages({\n  deleteButtonLabel: {\n    defaultMessage: 'Delete chip',\n    description: 'Aria label used to describe the delete chip button.',\n    id: 'JfsC0aOiAl7G3esV',\n  },\n});\n"],
+  "mappings": "AAAA,SAAS,sBAAsB;AAExB,MAAM,eAAe,eAAe;AAAA,EACzC,mBAAmB;AAAA,IACjB,gBAAgB;AAAA,IAChB,aAAa;AAAA,IACb,IAAI;AAAA,EACN;AACF,CAAC;",
+  "names": []
+}

package/esm/content/chip-group/ChipGroup.css

@@ -1,4 +1,4 @@
-._dwt8fp0-3-12-2 {
+._dwt8fp0-3-13-0 {
   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-12-2 {
+._dwt8fp1-3-13-0 {
   gap: var(--dt-spacings-size-6, 6px);
 }
-._dwt8fp3-3-12-2 {
+._dwt8fp3-3-13-0 {
   flex-wrap: wrap;
 }
-._dwt8fp4-3-12-2 {
+._dwt8fp4-3-13-0 {
   flex-wrap: nowrap;
 }

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

@@ -7,7 +7,9 @@ import {
 } from "./chip-group-utils.js";
 import { chipGroupCSS } from "./ChipGroup.sty.js";
 import { ChipGroupContext } from "./contexts/ChipGroupContext.js";
-import { InternalChipGroupContext } from "./contexts/InternalChipGroupContext.js";
+import {
+  InternalChipGroupContext
+} from "./contexts/InternalChipGroupContext.js";
 import { Control } from "./Control.js";
 import { HiddenCount } from "./HiddenCount.js";
 import { chipGroupReducer } from "./state/chip-group-state-reducer.js";
@@ -58,6 +60,7 @@ const RootChipGroup = forwardRef(
     const [allChipsFit, setAllChipsFit] = useState(false);
     const [hiddenChips, setHiddenChips] = useState([]);
     const [visibleChips, setVisibleChips] = useState([]);
+    const [pendingFocusChip, setPendingFocusChip] = useState(null);
     useEffect(() => {
       const chipEntries = Object.entries(state.chips);
       const chipEntriesKeys = chipEntries.map(
@@ -118,7 +121,9 @@ const RootChipGroup = forwardRef(
               expanded,
               allChipsFit,
               dispatch,
-              setExpanded
+              setExpanded,
+              pendingFocusChip,
+              setPendingFocusChip
             },
             children: /* @__PURE__ */ jsx(
               Flex,

package/esm/content/chip-group/ChipGroup.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/chip-group/ChipGroup.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef, useEffect, useReducer, useRef, useState } from 'react';\n\nimport {\n  computeAllChipsFitExpanded,\n  findOverflowChipIndex,\n} from './chip-group-utils.js';\nimport { chipGroupCSS } from './ChipGroup.sty.js';\nimport { ChipGroupContext } from './contexts/ChipGroupContext.js';\nimport { InternalChipGroupContext } from './contexts/InternalChipGroupContext.js';\nimport { Control } from './Control.js';\nimport { HiddenCount } from './HiddenCount.js';\nimport { chipGroupReducer } from './state/chip-group-state-reducer.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useContainerSize } from '../../core/hooks/useContainerSize.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport type { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\nimport type { WithChildren } from '../../core/types/with-children.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport type { ChipOwnProps } from '../chip/types/chip.js';\n\nconst COMPONENT_NAME = 'ChipGroup';\n\n/**\n * Accepted base properties for ChipGroup.\n * @public\n */\nexport interface ChipGroupBaseProps\n  extends StylingProps,\n    DataTestId,\n    MaskingProps,\n    AriaLabelingProps,\n    BehaviorTrackingProps {\n  /**\n   * Whether the chip group is disabled.\n   * If set to true, all the chips inside the group are disabled, unless explicitly overridden.\n   * @defaultValue false\n   */\n  disabled?: boolean;\n\n  /**\n   * The size of the spacing and chips in the group.\n   * All the chips match the size of the group, but can be overridden individually.\n   * @defaultValue default\n   */\n  size?: ChipOwnProps['size'];\n\n  /**\n   * Callback triggered when the expanded state changes.\n   */\n  onExpandedChange?: (state: boolean) => void;\n\n  /**\n   * Maximum number of chips rendered before the \"Show more\" control.\n   *\n   * If set to 'auto', the chip group automatically determines\n   * how many chips can fit based on the available width.\n   * If a number is provided, it limits the visible chips to that number\n   * when the group is collapsed, regardless of available space.\n   * @defaultValue 'auto'\n   */\n  maxVisibleChips?: 'auto' | number;\n}\n\n/**\n * Properties for the controlled variant of ChipGroup.\n * @public\n */\nexport interface ChipGroupControlledProps {\n  /** Whether the chip group is expanded. */\n  expanded?: boolean;\n  /** Whether the chip group is expanded by default. */\n  defaultExpanded?: never;\n}\n\n/**\n * Properties for the uncontrolled variant of ChipGroup.\n * @public\n */\nexport interface ChipGroupUncontrolledProps {\n  /** Whether the chip group is expanded. */\n  expanded?: never;\n  /** Whether the chip group is expanded by default. */\n  defaultExpanded?: boolean;\n}\n\n/**\n * Properties for the ChipGroup component.\n * @public\n */\nexport type ChipGroupProps = ChipGroupBaseProps &\n  (ChipGroupControlledProps | ChipGroupUncontrolledProps) &\n  WithChildren;\n\n/**\n * ChipGroup component\n */\nconst RootChipGroup = forwardRef<HTMLElement, ChipGroupProps>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      expanded: expandedProp,\n      defaultExpanded,\n      disabled,\n      size,\n      onExpandedChange,\n      maxVisibleChips = 'auto',\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      ...remainingProps\n    } = props;\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n    const ariaLabelingProps = useAriaLabelingProps(restProps);\n    const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);\n\n    const uniqueId = useId();\n\n    const [state, dispatch] = useReducer(chipGroupReducer, {\n      chips: {},\n    });\n\n    const containerRef = useRef<HTMLDivElement | null>(null);\n    const rootRef = useMergeRefs<HTMLElement | null>([\n      containerRef,\n      forwardedRef,\n    ]);\n\n    // Width of the chip group container.\n    const { width: containerWidth } = useContainerSize(containerRef);\n\n    const [expanded, setExpanded] = useControllableState({\n      value: expandedProp,\n      defaultValue: defaultExpanded,\n      onChange: onExpandedChange,\n    });\n\n    const [allChipsFit, setAllChipsFit] = useState(false);\n    const [hiddenChips, setHiddenChips] = useState<string[]>([]);\n    const [visibleChips, setVisibleChips] = useState<string[]>([]);\n\n    useEffect(() => {\n      const chipEntries = Object.entries(state.chips);\n      const chipEntriesKeys = chipEntries.map(\n        ([uniqueChipKey]) => uniqueChipKey,\n      );\n\n      // Reset visibility when there are no chips.\n      if (chipEntries.length === 0) {\n        setVisibleChips([]);\n        return;\n      }\n\n      // Cannot calculate visibility when any chip has not been measured yet.\n      if (chipEntries.some(([, chip]) => !chip.width)) {\n        return;\n      }\n\n      if (expanded) {\n        setHiddenChips([]);\n        setVisibleChips(chipEntriesKeys);\n\n        // When `expanded` is controlled, the consumer owns the toggle and renders the\n        // control so users can collapse again. Auto-hiding it because everything currently\n        // fits would remove their control, so the auto-hide behaviour only applies in\n        // uncontrolled mode where the component manages expansion itself.\n        if (expandedProp !== undefined) {\n          setAllChipsFit(false);\n          return;\n        }\n\n        setAllChipsFit(\n          computeAllChipsFitExpanded(\n            chipEntries,\n            containerWidth,\n            size,\n            state.control?.width ?? 0,\n            state.control?.show,\n            maxVisibleChips,\n          ),\n        );\n        return;\n      }\n\n      const fittingIndex = findOverflowChipIndex(\n        chipEntries,\n        containerWidth,\n        size,\n        state.control?.width || 0,\n        state.control?.show,\n      );\n\n      // Apply maxVisibleChips limit if specified and valid (non-negative)\n      const effectiveHiddenChipsIndex =\n        maxVisibleChips !== 'auto' && maxVisibleChips >= 0\n          ? Math.min(fittingIndex, maxVisibleChips)\n          : fittingIndex;\n\n      setAllChipsFit(effectiveHiddenChipsIndex === chipEntries.length);\n      setHiddenChips(chipEntriesKeys.slice(effectiveHiddenChipsIndex));\n      setVisibleChips(chipEntriesKeys.slice(0, effectiveHiddenChipsIndex));\n    }, [containerWidth, expanded, expandedProp, size, state, maxVisibleChips]);\n\n    return (\n      <ChipGroupContext.Provider\n        value={{\n          visibleKeys: visibleChips,\n          hiddenKeys: hiddenChips,\n        }}\n      >\n        <InternalChipGroupContext.Provider\n          value={{\n            chipGroupId: uniqueId,\n            disabled,\n            size,\n            expanded,\n            allChipsFit,\n            dispatch,\n            setExpanded,\n          }}\n        >\n          <Flex\n            ref={rootRef}\n            id={uniqueId}\n            className={clsx(\n              chipGroupCSS({ size, expanded }),\n              consumerClassName,\n            )}\n            style={consumerStyle}\n            data-testid={dataTestId}\n            data-dtrum-mask={dataDtrumMask}\n            data-dtrum-allow={dataDtrumAllow}\n            {...ariaLabelingProps}\n            {...behavioralTrackingProps}\n            {...forwardProps}\n            data-dt-component={COMPONENT_NAME}\n          >\n            {children}\n          </Flex>\n        </InternalChipGroupContext.Provider>\n      </ChipGroupContext.Provider>\n    );\n  },\n);\n\n(RootChipGroup as typeof RootChipGroup & { displayName: string }).displayName =\n  COMPONENT_NAME;\n\n/**\n * Use the `ChipGroup` to group multiple `Chip` components in an expandable container.\n * @public\n */\nexport const ChipGroup = Object.assign(RootChipGroup, {\n  Control,\n  HiddenCount,\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef, useEffect, useReducer, useRef, useState } from 'react';\n\nimport {\n  computeAllChipsFitExpanded,\n  findOverflowChipIndex,\n} from './chip-group-utils.js';\nimport { chipGroupCSS } from './ChipGroup.sty.js';\nimport { ChipGroupContext } from './contexts/ChipGroupContext.js';\nimport {\n  InternalChipGroupContext,\n  type PendingFocusChip,\n} from './contexts/InternalChipGroupContext.js';\nimport { Control } from './Control.js';\nimport { HiddenCount } from './HiddenCount.js';\nimport { chipGroupReducer } from './state/chip-group-state-reducer.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useContainerSize } from '../../core/hooks/useContainerSize.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport type { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\nimport type { WithChildren } from '../../core/types/with-children.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport type { ChipOwnProps } from '../chip/types/chip.js';\n\nconst COMPONENT_NAME = 'ChipGroup';\n\n/**\n * Accepted base properties for ChipGroup.\n * @public\n */\nexport interface ChipGroupBaseProps\n  extends\n    StylingProps,\n    DataTestId,\n    MaskingProps,\n    AriaLabelingProps,\n    BehaviorTrackingProps {\n  /**\n   * Whether the chip group is disabled.\n   * If set to true, all the chips inside the group are disabled, unless explicitly overridden.\n   * @defaultValue false\n   */\n  disabled?: boolean;\n\n  /**\n   * The size of the spacing and chips in the group.\n   * All the chips match the size of the group, but can be overridden individually.\n   * @defaultValue default\n   */\n  size?: ChipOwnProps['size'];\n\n  /**\n   * Callback triggered when the expanded state changes.\n   */\n  onExpandedChange?: (state: boolean) => void;\n\n  /**\n   * Maximum number of chips rendered before the \"Show more\" control.\n   *\n   * If set to 'auto', the chip group automatically determines\n   * how many chips can fit based on the available width.\n   * If a number is provided, it limits the visible chips to that number\n   * when the group is collapsed, regardless of available space.\n   * @defaultValue 'auto'\n   */\n  maxVisibleChips?: 'auto' | number;\n}\n\n/**\n * Properties for the controlled variant of ChipGroup.\n * @public\n */\nexport interface ChipGroupControlledProps {\n  /** Whether the chip group is expanded. */\n  expanded?: boolean;\n  /** Whether the chip group is expanded by default. */\n  defaultExpanded?: never;\n}\n\n/**\n * Properties for the uncontrolled variant of ChipGroup.\n * @public\n */\nexport interface ChipGroupUncontrolledProps {\n  /** Whether the chip group is expanded. */\n  expanded?: never;\n  /** Whether the chip group is expanded by default. */\n  defaultExpanded?: boolean;\n}\n\n/**\n * Properties for the ChipGroup component.\n * @public\n */\nexport type ChipGroupProps = ChipGroupBaseProps &\n  (ChipGroupControlledProps | ChipGroupUncontrolledProps) &\n  WithChildren;\n\n/**\n * ChipGroup component\n */\nconst RootChipGroup = forwardRef<HTMLElement, ChipGroupProps>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      expanded: expandedProp,\n      defaultExpanded,\n      disabled,\n      size,\n      onExpandedChange,\n      maxVisibleChips = 'auto',\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      ...remainingProps\n    } = props;\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n    const ariaLabelingProps = useAriaLabelingProps(restProps);\n    const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);\n\n    const uniqueId = useId();\n\n    const [state, dispatch] = useReducer(chipGroupReducer, {\n      chips: {},\n    });\n\n    const containerRef = useRef<HTMLDivElement | null>(null);\n    const rootRef = useMergeRefs<HTMLElement | null>([\n      containerRef,\n      forwardedRef,\n    ]);\n\n    // Width of the chip group container.\n    const { width: containerWidth } = useContainerSize(containerRef);\n\n    const [expanded, setExpanded] = useControllableState({\n      value: expandedProp,\n      defaultValue: defaultExpanded,\n      onChange: onExpandedChange,\n    });\n\n    const [allChipsFit, setAllChipsFit] = useState(false);\n    const [hiddenChips, setHiddenChips] = useState<string[]>([]);\n    const [visibleChips, setVisibleChips] = useState<string[]>([]);\n    const [pendingFocusChip, setPendingFocusChip] =\n      useState<PendingFocusChip>(null);\n\n    useEffect(() => {\n      const chipEntries = Object.entries(state.chips);\n      const chipEntriesKeys = chipEntries.map(\n        ([uniqueChipKey]) => uniqueChipKey,\n      );\n\n      // Reset visibility when there are no chips.\n      if (chipEntries.length === 0) {\n        setVisibleChips([]);\n        return;\n      }\n\n      // Cannot calculate visibility when any chip has not been measured yet.\n      if (chipEntries.some(([, chip]) => !chip.width)) {\n        return;\n      }\n\n      if (expanded) {\n        setHiddenChips([]);\n        setVisibleChips(chipEntriesKeys);\n\n        // When `expanded` is controlled, the consumer owns the toggle and renders the\n        // control so users can collapse again. Auto-hiding it because everything currently\n        // fits would remove their control, so the auto-hide behaviour only applies in\n        // uncontrolled mode where the component manages expansion itself.\n        if (expandedProp !== undefined) {\n          setAllChipsFit(false);\n          return;\n        }\n\n        setAllChipsFit(\n          computeAllChipsFitExpanded(\n            chipEntries,\n            containerWidth,\n            size,\n            state.control?.width ?? 0,\n            state.control?.show,\n            maxVisibleChips,\n          ),\n        );\n        return;\n      }\n\n      const fittingIndex = findOverflowChipIndex(\n        chipEntries,\n        containerWidth,\n        size,\n        state.control?.width || 0,\n        state.control?.show,\n      );\n\n      // Apply maxVisibleChips limit if specified and valid (non-negative)\n      const effectiveHiddenChipsIndex =\n        maxVisibleChips !== 'auto' && maxVisibleChips >= 0\n          ? Math.min(fittingIndex, maxVisibleChips)\n          : fittingIndex;\n\n      setAllChipsFit(effectiveHiddenChipsIndex === chipEntries.length);\n      setHiddenChips(chipEntriesKeys.slice(effectiveHiddenChipsIndex));\n      setVisibleChips(chipEntriesKeys.slice(0, effectiveHiddenChipsIndex));\n    }, [containerWidth, expanded, expandedProp, size, state, maxVisibleChips]);\n\n    return (\n      <ChipGroupContext.Provider\n        value={{\n          visibleKeys: visibleChips,\n          hiddenKeys: hiddenChips,\n        }}\n      >\n        <InternalChipGroupContext.Provider\n          value={{\n            chipGroupId: uniqueId,\n            disabled,\n            size,\n            expanded,\n            allChipsFit,\n            dispatch,\n            setExpanded,\n            pendingFocusChip,\n            setPendingFocusChip,\n          }}\n        >\n          <Flex\n            ref={rootRef}\n            id={uniqueId}\n            className={clsx(\n              chipGroupCSS({ size, expanded }),\n              consumerClassName,\n            )}\n            style={consumerStyle}\n            data-testid={dataTestId}\n            data-dtrum-mask={dataDtrumMask}\n            data-dtrum-allow={dataDtrumAllow}\n            {...ariaLabelingProps}\n            {...behavioralTrackingProps}\n            {...forwardProps}\n            data-dt-component={COMPONENT_NAME}\n          >\n            {children}\n          </Flex>\n        </InternalChipGroupContext.Provider>\n      </ChipGroupContext.Provider>\n    );\n  },\n);\n\n(RootChipGroup as typeof RootChipGroup & { displayName: string }).displayName =\n  COMPONENT_NAME;\n\n/**\n * Use the `ChipGroup` to group multiple `Chip` components in an expandable container.\n * @public\n */\nexport const ChipGroup = Object.assign(RootChipGroup, {\n  Control,\n  HiddenCount,\n});\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,6 +1,6 @@
 import "./ChipGroup.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var chipGroupCSS = _7a468({ defaultClassName: "_dwt8fp0-3-12-2", variantClassNames: { size: { condensed: "_dwt8fp1-3-12-2", "default": "_dwt8fp2-3-12-2" }, expanded: { true: "_dwt8fp3-3-12-2", false: "_dwt8fp4-3-12-2" } }, defaultVariants: {}, compoundVariants: [] });
+var chipGroupCSS = _7a468({ defaultClassName: "_dwt8fp0-3-13-0", variantClassNames: { size: { condensed: "_dwt8fp1-3-13-0", "default": "_dwt8fp2-3-13-0" }, expanded: { true: "_dwt8fp3-3-13-0", false: "_dwt8fp4-3-13-0" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   chipGroupCSS
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/chip-group/ChipGroup.css.ts"],
-  "sourcesContent": ["import './ChipGroup.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var chipGroupCSS = _7a468({defaultClassName:'_dwt8fp0-3-12-2',variantClassNames:{size:{condensed:'_dwt8fp1-3-12-2','default':'_dwt8fp2-3-12-2'},expanded:{true:'_dwt8fp3-3-12-2',false:'_dwt8fp4-3-12-2'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './ChipGroup.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var chipGroupCSS = _7a468({defaultClassName:'_dwt8fp0-3-13-0',variantClassNames:{size:{condensed:'_dwt8fp1-3-13-0','default':'_dwt8fp2-3-13-0'},expanded:{true:'_dwt8fp3-3-13-0',false:'_dwt8fp4-3-13-0'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,eAAe,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,MAAK,EAAC,WAAU,mBAAkB,WAAU,kBAAiB,GAAE,UAAS,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/content/chip-group/Control.css

@@ -1,4 +1,4 @@
-._uoyq2d0-3-12-2 {
+._uoyq2d0-3-13-0 {
   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-12-2:hover {
+._uoyq2d0-3-13-0:hover {
   background: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._uoyq2d0-3-12-2:active {
+._uoyq2d0-3-13-0:active {
   background: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
 }
-._uoyq2d1-3-12-2 {
+._uoyq2d1-3-13-0 {
   text-decoration: none;
 }

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

@@ -30,7 +30,14 @@ const Control = (props) => {
   });
   const { hiddenKeys, visibleKeys } = useChipGroupContext();
   const internalChipGroupContext = useInternalChipGroupContext();
-  const { chipGroupId, expanded, allChipsFit, setExpanded, dispatch } = internalChipGroupContext || {};
+  const {
+    chipGroupId,
+    expanded,
+    allChipsFit,
+    setExpanded,
+    dispatch,
+    setPendingFocusChip
+  } = internalChipGroupContext || {};
   const controlRef = useRef(null);
   const { width: controlWidth } = useContainerSize(controlRef);
   const width = Math.ceil(controlWidth);
@@ -82,6 +89,13 @@ const Control = (props) => {
       ref: controlRef,
       onClick: (event) => {
         onClick?.(event);
+        const isExpanding = display === "more" || !expanded;
+        if (isExpanding && hiddenKeys.length > 0) {
+          setPendingFocusChip?.({
+            uniqueId: hiddenKeys[0],
+            showFocusRing: isFocusVisible
+          });
+        }
         setExpanded?.((prev) => display === "more" ? true : !prev);
       },
       "aria-controls": chipGroupId,

package/esm/content/chip-group/Control.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/chip-group/Control.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  useEffect,\n  useMemo,\n  useRef,\n  type MouseEventHandler as ReactMouseEventHandler,\n  type MouseEvent as ReactMouseEvent,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport * as styles from './Control.sty.js';\nimport { useChipGroupContext } from './hooks/useChipGroupContext.js';\nimport { useInternalChipGroupContext } from './hooks/useInternalChipGroupContext.js';\nimport { ChipGroupActions } from './state/chip-group-state-reducer.js';\nimport { useContainerSize } from '../../core/hooks/useContainerSize.js';\nimport { useFocusRing } from '../../core/hooks/useFocusRing.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { ProgressCircle } from '../progress/ProgressCircle.js';\n\n//#region Types\n\n/**\n * @public\n */\nexport interface ChipGroupControlProps\n  extends WithChildren,\n    StylingProps,\n    DataTestId {\n  /**\n   * Whether to show more chips or collapse chips.\n   * If undefined, the action is inferred.\n   * If no more items are available and all items fit in one line,\n   * the control is automatically hidden unless display is set.\n   * @defaultValue inferred from the `expanded` / `defaultExpanded` prop of the `ChipGroup`\n   */\n  display?: 'more' | 'less';\n\n  /**\n   * Whether to render `Show more` or `Show x more` by default.\n   * If true, the count is calculated automatically. The count can be overridden\n   * by passing a number.\n   * @defaultValue undefined\n   */\n  count?: boolean | number;\n\n  /**\n   * Whether the control should show the loading indicator.\n   * @defaultValue false\n   */\n  loading?: boolean;\n\n  /** Callback triggered when the control is interacted with. */\n  onClick?: ReactMouseEventHandler<HTMLButtonElement>;\n}\n//#endregion\n\n/**\n * @public\n */\nexport const Control = (props: ChipGroupControlProps) => {\n  const {\n    display,\n    count,\n    loading = false,\n    onClick,\n    children,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n  }: ChipGroupControlProps = props;\n  const intl = useIntl();\n\n  const { focusProps, focusClassName, isFocusVisible } = useFocusRing({\n    color: 'neutral',\n  });\n\n  const { hiddenKeys, visibleKeys } = useChipGroupContext();\n  const internalChipGroupContext = useInternalChipGroupContext();\n  const { chipGroupId, expanded, allChipsFit, setExpanded, dispatch } =\n    internalChipGroupContext || {};\n\n  const controlRef = useRef<HTMLButtonElement | null>(null);\n  const { width: controlWidth } = useContainerSize(controlRef);\n  const width = Math.ceil(controlWidth);\n\n  const label = useMemo(() => {\n    const moreOrLess = expanded && display !== 'more' ? 'less' : 'more';\n    const hiddenChipsCount =\n      count === true && hiddenKeys.length > 0 ? hiddenKeys.length : count;\n    const showCount =\n      typeof hiddenChipsCount === 'number' && moreOrLess === 'more';\n\n    return intl.formatMessage(\n      {\n        defaultMessage: 'Show {count} {moreOrLess}',\n        id: 'ARdI7d8cJxHnUayP',\n        description: 'Label for the expand / collapse button.',\n      },\n      {\n        moreOrLess: expanded && display !== 'more' ? 'less' : 'more',\n        count: showCount ? hiddenChipsCount : undefined,\n      },\n    );\n  }, [count, display, expanded, hiddenKeys, intl]);\n\n  useEffect(() => {\n    dispatch?.({\n      type: ChipGroupActions.ADDCONTROL,\n      payload: { width },\n    });\n\n    return () => {\n      dispatch?.({\n        type: ChipGroupActions.REMOVECONTROL,\n        payload: {},\n      });\n    };\n    // only for mount and unmount\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    dispatch?.({\n      type: ChipGroupActions.UPDATECONTROL,\n      payload: {\n        width: width === 0 ? undefined : width,\n        show: display !== undefined ? 'always' : 'auto',\n      },\n    });\n  }, [dispatch, display, width]);\n\n  const shouldHide =\n    display === undefined &&\n    (allChipsFit || visibleKeys.length === 0) &&\n    !loading;\n\n  if (shouldHide) {\n    return null;\n  }\n\n  return (\n    <button\n      data-testid={dataTestId}\n      ref={controlRef}\n      onClick={(event: ReactMouseEvent<HTMLButtonElement>) => {\n        onClick?.(event);\n        setExpanded?.((prev) => (display === 'more' ? true : !prev));\n      }}\n      aria-controls={chipGroupId}\n      aria-expanded={expanded}\n      className={clsx(\n        styles.expandButton({ isFocusVisible }),\n        focusClassName,\n        consumerClassName,\n      )}\n      style={consumerStyle}\n      {...focusProps}\n    >\n      {loading && (\n        <ProgressCircle\n          size=\"small\"\n          aria-label={intl.formatMessage({\n            defaultMessage: 'Loading',\n            id: 'cycz+bYG+VH7Of4e',\n            description: 'Label for the loading state.',\n          })}\n        />\n      )}\n      {children ?? label}\n    </button>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  useEffect,\n  useMemo,\n  useRef,\n  type MouseEventHandler as ReactMouseEventHandler,\n  type MouseEvent as ReactMouseEvent,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport * as styles from './Control.sty.js';\nimport { useChipGroupContext } from './hooks/useChipGroupContext.js';\nimport { useInternalChipGroupContext } from './hooks/useInternalChipGroupContext.js';\nimport { ChipGroupActions } from './state/chip-group-state-reducer.js';\nimport { useContainerSize } from '../../core/hooks/useContainerSize.js';\nimport { useFocusRing } from '../../core/hooks/useFocusRing.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { ProgressCircle } from '../progress/ProgressCircle.js';\n\n//#region Types\n\n/**\n * @public\n */\nexport interface ChipGroupControlProps\n  extends WithChildren, StylingProps, DataTestId {\n  /**\n   * Whether to show more chips or collapse chips.\n   * If undefined, the action is inferred.\n   * If no more items are available and all items fit in one line,\n   * the control is automatically hidden unless display is set.\n   * @defaultValue inferred from the `expanded` / `defaultExpanded` prop of the `ChipGroup`\n   */\n  display?: 'more' | 'less';\n\n  /**\n   * Whether to render `Show more` or `Show x more` by default.\n   * If true, the count is calculated automatically. The count can be overridden\n   * by passing a number.\n   * @defaultValue undefined\n   */\n  count?: boolean | number;\n\n  /**\n   * Whether the control should show the loading indicator.\n   * @defaultValue false\n   */\n  loading?: boolean;\n\n  /** Callback triggered when the control is interacted with. */\n  onClick?: ReactMouseEventHandler<HTMLButtonElement>;\n}\n//#endregion\n\n/**\n * @public\n */\nexport const Control = (props: ChipGroupControlProps) => {\n  const {\n    display,\n    count,\n    loading = false,\n    onClick,\n    children,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n  }: ChipGroupControlProps = props;\n  const intl = useIntl();\n\n  const { focusProps, focusClassName, isFocusVisible } = useFocusRing({\n    color: 'neutral',\n  });\n\n  const { hiddenKeys, visibleKeys } = useChipGroupContext();\n  const internalChipGroupContext = useInternalChipGroupContext();\n  const {\n    chipGroupId,\n    expanded,\n    allChipsFit,\n    setExpanded,\n    dispatch,\n    setPendingFocusChip,\n  } = internalChipGroupContext || {};\n\n  const controlRef = useRef<HTMLButtonElement | null>(null);\n  const { width: controlWidth } = useContainerSize(controlRef);\n  const width = Math.ceil(controlWidth);\n\n  const label = useMemo(() => {\n    const moreOrLess = expanded && display !== 'more' ? 'less' : 'more';\n    const hiddenChipsCount =\n      count === true && hiddenKeys.length > 0 ? hiddenKeys.length : count;\n    const showCount =\n      typeof hiddenChipsCount === 'number' && moreOrLess === 'more';\n\n    return intl.formatMessage(\n      {\n        defaultMessage: 'Show {count} {moreOrLess}',\n        id: 'ARdI7d8cJxHnUayP',\n        description: 'Label for the expand / collapse button.',\n      },\n      {\n        moreOrLess: expanded && display !== 'more' ? 'less' : 'more',\n        count: showCount ? hiddenChipsCount : undefined,\n      },\n    );\n  }, [count, display, expanded, hiddenKeys, intl]);\n\n  useEffect(() => {\n    dispatch?.({\n      type: ChipGroupActions.ADDCONTROL,\n      payload: { width },\n    });\n\n    return () => {\n      dispatch?.({\n        type: ChipGroupActions.REMOVECONTROL,\n        payload: {},\n      });\n    };\n    // only for mount and unmount\n    // oxlint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    dispatch?.({\n      type: ChipGroupActions.UPDATECONTROL,\n      payload: {\n        width: width === 0 ? undefined : width,\n        show: display !== undefined ? 'always' : 'auto',\n      },\n    });\n  }, [dispatch, display, width]);\n\n  const shouldHide =\n    display === undefined &&\n    (allChipsFit || visibleKeys.length === 0) &&\n    !loading;\n\n  if (shouldHide) {\n    return null;\n  }\n\n  return (\n    <button\n      data-testid={dataTestId}\n      ref={controlRef}\n      onClick={(event: ReactMouseEvent<HTMLButtonElement>) => {\n        onClick?.(event);\n        const isExpanding = display === 'more' || !expanded;\n        if (isExpanding && hiddenKeys.length > 0) {\n          setPendingFocusChip?.({\n            uniqueId: hiddenKeys[0],\n            showFocusRing: isFocusVisible,\n          });\n        }\n        setExpanded?.((prev) => (display === 'more' ? true : !prev));\n      }}\n      aria-controls={chipGroupId}\n      aria-expanded={expanded}\n      className={clsx(\n        styles.expandButton({ isFocusVisible }),\n        focusClassName,\n        consumerClassName,\n      )}\n      style={consumerStyle}\n      {...focusProps}\n    >\n      {loading && (\n        <ProgressCircle\n          size=\"small\"\n          aria-label={intl.formatMessage({\n            defaultMessage: 'Loading',\n            id: 'cycz+bYG+VH7Of4e',\n            description: 'Label for the loading state.',\n          })}\n        />\n      )}\n      {children ?? label}\n    </button>\n  );\n};\n"],
+  "mappings": "AAmJI,SAyBI,KAzBJ;AAnJJ,OAAO,UAAU;AACjB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AACP,SAAS,eAAe;AAExB,YAAY,YAAY;AACxB,SAAS,2BAA2B;AACpC,SAAS,mCAAmC;AAC5C,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,oBAAoB;AAI7B,SAAS,sBAAsB;AAwCxB,MAAM,UAAU,CAAC,UAAiC;AACvD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,EACjB,IAA2B;AAC3B,QAAM,OAAO,QAAQ;AAErB,QAAM,EAAE,YAAY,gBAAgB,eAAe,IAAI,aAAa;AAAA,IAClE,OAAO;AAAA,EACT,CAAC;AAED,QAAM,EAAE,YAAY,YAAY,IAAI,oBAAoB;AACxD,QAAM,2BAA2B,4BAA4B;AAC7D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,4BAA4B,CAAC;AAEjC,QAAM,aAAa,OAAiC,IAAI;AACxD,QAAM,EAAE,OAAO,aAAa,IAAI,iBAAiB,UAAU;AAC3D,QAAM,QAAQ,KAAK,KAAK,YAAY;AAEpC,QAAM,QAAQ,QAAQ,MAAM;AAC1B,UAAM,aAAa,YAAY,YAAY,SAAS,SAAS;AAC7D,UAAM,mBACJ,UAAU,QAAQ,WAAW,SAAS,IAAI,WAAW,SAAS;AAChE,UAAM,YACJ,OAAO,qBAAqB,YAAY,eAAe;AAEzD,WAAO,KAAK;AAAA,MACV;AAAA,QACE,gBAAgB;AAAA,QAChB,IAAI;AAAA,QACJ,aAAa;AAAA,MACf;AAAA,MACA;AAAA,QACE,YAAY,YAAY,YAAY,SAAS,SAAS;AAAA,QACtD,OAAO,YAAY,mBAAmB;AAAA,MACxC;AAAA,IACF;AAAA,EACF,GAAG,CAAC,OAAO,SAAS,UAAU,YAAY,IAAI,CAAC;AAE/C,YAAU,MAAM;AACd,eAAW;AAAA,MACT,MAAM,iBAAiB;AAAA,MACvB,SAAS,EAAE,MAAM;AAAA,IACnB,CAAC;AAED,WAAO,MAAM;AACX,iBAAW;AAAA,QACT,MAAM,iBAAiB;AAAA,QACvB,SAAS,CAAC;AAAA,MACZ,CAAC;AAAA,IACH;AAAA,EAGF,GAAG,CAAC,CAAC;AAEL,YAAU,MAAM;AACd,eAAW;AAAA,MACT,MAAM,iBAAiB;AAAA,MACvB,SAAS;AAAA,QACP,OAAO,UAAU,IAAI,SAAY;AAAA,QACjC,MAAM,YAAY,SAAY,WAAW;AAAA,MAC3C;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,UAAU,SAAS,KAAK,CAAC;AAE7B,QAAM,aACJ,YAAY,WACX,eAAe,YAAY,WAAW,MACvC,CAAC;AAEH,MAAI,YAAY;AACd,WAAO;AAAA,EACT;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa;AAAA,MACb,KAAK;AAAA,MACL,SAAS,CAAC,UAA8C;AACtD,kBAAU,KAAK;AACf,cAAM,cAAc,YAAY,UAAU,CAAC;AAC3C,YAAI,eAAe,WAAW,SAAS,GAAG;AACxC,gCAAsB;AAAA,YACpB,UAAU,WAAW,CAAC;AAAA,YACtB,eAAe;AAAA,UACjB,CAAC;AAAA,QACH;AACA,sBAAc,CAAC,SAAU,YAAY,SAAS,OAAO,CAAC,IAAK;AAAA,MAC7D;AAAA,MACA,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,WAAW;AAAA,QACT,OAAO,aAAa,EAAE,eAAe,CAAC;AAAA,QACtC;AAAA,QACA;AAAA,MACF;AAAA,MACA,OAAO;AAAA,MACN,GAAG;AAAA,MAEH;AAAA,mBACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,cAAY,KAAK,cAAc;AAAA,cAC7B,gBAAgB;AAAA,cAChB,IAAI;AAAA,cACJ,aAAa;AAAA,YACf,CAAC;AAAA;AAAA,QACH;AAAA,QAED,YAAY;AAAA;AAAA;AAAA,EACf;AAEJ;",
   "names": []
 }

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

@@ -1,6 +1,6 @@
 import "./Control.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var expandButton = _7a468({ defaultClassName: "_uoyq2d0-3-12-2", variantClassNames: { isFocusVisible: { true: "_uoyq2d1-3-12-2", false: "_uoyq2d2-3-12-2" } }, defaultVariants: {}, compoundVariants: [] });
+var expandButton = _7a468({ defaultClassName: "_uoyq2d0-3-13-0", variantClassNames: { isFocusVisible: { true: "_uoyq2d1-3-13-0", false: "_uoyq2d2-3-13-0" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   expandButton
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/chip-group/Control.css.ts"],
-  "sourcesContent": ["import './Control.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var expandButton = _7a468({defaultClassName:'_uoyq2d0-3-12-2',variantClassNames:{isFocusVisible:{true:'_uoyq2d1-3-12-2',false:'_uoyq2d2-3-12-2'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './Control.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var expandButton = _7a468({defaultClassName:'_uoyq2d0-3-13-0',variantClassNames:{isFocusVisible:{true:'_uoyq2d1-3-13-0',false:'_uoyq2d2-3-13-0'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,eAAe,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,gBAAe,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/content/chip-group/HiddenCount.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/chip-group/HiddenCount.tsx"],
-  "sourcesContent": ["import { useChipGroupContext } from './hooks/useChipGroupContext.js';\n\n/** Component showing the number of hidden chips in a chip group. */\nexport const HiddenCount = () => {\n  const { hiddenKeys } = useChipGroupContext();\n\n  // eslint-disable-next-line react/jsx-no-useless-fragment\n  return <>{hiddenKeys.length}</>;\n};\n"],
+  "sourcesContent": ["import { useChipGroupContext } from './hooks/useChipGroupContext.js';\n\n/** Component showing the number of hidden chips in a chip group. */\nexport const HiddenCount = () => {\n  const { hiddenKeys } = useChipGroupContext();\n\n  // oxlint-disable-next-line react/jsx-no-useless-fragment\n  return <>{hiddenKeys.length}</>;\n};\n"],
   "mappings": "AAOS;AAPT,SAAS,2BAA2B;AAG7B,MAAM,cAAc,MAAM;AAC/B,QAAM,EAAE,WAAW,IAAI,oBAAoB;AAG3C,SAAO,gCAAG,qBAAW,QAAO;AAC9B;",
   "names": []
 }

package/esm/content/chip-group/contexts/InternalChipGroupContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/content/chip-group/contexts/InternalChipGroupContext.tsx"],
-  "sourcesContent": ["import {\n  type Context,\n  createContext,\n  type Dispatch,\n  type SetStateAction,\n} from 'react';\n\nimport type { ChipOwnProps } from '../../chip/types/chip.js';\nimport type { ChipGroupReducerActions } from '../state/chip-group-state-reducer.js';\n\n/** @internal */\nexport type InternalChipGroupContextProps =\n  | {\n      chipGroupId?: string;\n      expanded?: boolean;\n      disabled?: boolean;\n      size?: ChipOwnProps['size'];\n      allChipsFit?: boolean;\n      dispatch: Dispatch<ChipGroupReducerActions>;\n      setExpanded: Dispatch<SetStateAction<boolean>>;\n    }\n  | undefined;\n\n/**\n * The _InternalChipGroupContext provides access to required states and callbacks.\n * @internal\n */\nexport const InternalChipGroupContext: Context<InternalChipGroupContextProps> =\n  createContext<InternalChipGroupContextProps>(undefined);\n"],
-  "mappings": "AAAA;AAAA,EAEE;AAAA,OAGK;AAsBA,MAAM,2BACX,cAA6C,MAAS;",
+  "sourcesContent": ["import {\n  type Context,\n  createContext,\n  type Dispatch,\n  type SetStateAction,\n} from 'react';\n\nimport type { ChipOwnProps } from '../../chip/types/chip.js';\nimport type { ChipGroupReducerActions } from '../state/chip-group-state-reducer.js';\n\n/**\n * The chip that should receive focus after being revealed, along with\n * whether the focus ring should be shown. The ring is only shown when the\n * reveal was triggered via keyboard.\n * @internal\n */\nexport type PendingFocusChip = {\n  uniqueId: string;\n  showFocusRing: boolean;\n} | null;\n\n/** @internal */\nexport type InternalChipGroupContextProps =\n  | {\n      chipGroupId?: string;\n      expanded?: boolean;\n      disabled?: boolean;\n      size?: ChipOwnProps['size'];\n      allChipsFit?: boolean;\n      dispatch: Dispatch<ChipGroupReducerActions>;\n      setExpanded: Dispatch<SetStateAction<boolean>>;\n      pendingFocusChip: PendingFocusChip;\n      setPendingFocusChip: Dispatch<SetStateAction<PendingFocusChip>>;\n    }\n  | undefined;\n\n/**\n * The _InternalChipGroupContext provides access to required states and callbacks.\n * @internal\n */\nexport const InternalChipGroupContext: Context<InternalChipGroupContextProps> =\n  createContext<InternalChipGroupContextProps>(undefined);\n"],
+  "mappings": "AAAA;AAAA,EAEE;AAAA,OAGK;AAmCA,MAAM,2BACX,cAA6C,MAAS;",
   "names": []
 }