@dynatrace/strato-components 3.0.1 → 3.1.0

package/esm/content/ai-response/tests/AiResponse-reduced-motion.spec.js

@@ -141,6 +141,7 @@ console.log(greet('World'));
               AiResponse,
               {
                 "data-testid": "ai-response",
+                "aria-label": "label",
                 "aria-labelledby": "response-label",
                 "aria-describedby": "description",
                 "aria-details": "details",
@@ -151,6 +152,7 @@ console.log(greet('World'));
         )
       );
       const response = screen.getByTestId("ai-response");
+      expect(response).toHaveAttribute("aria-label", "label");
       expect(response).toHaveAttribute("aria-labelledby", "response-label");
       expect(response).toHaveAttribute("aria-describedby", "description");
       expect(response).toHaveAttribute("aria-details", "details");
@@ -206,27 +208,53 @@ console.log(greet('World'));
       "test-custom-data"
     );
   });
-  describe("data-dt-component", () => {
-    it("should have the default data-dt-component attribute", () => {
-      render(
-        /* @__PURE__ */ jsx(AiResponse, { "data-testid": "ai-response", children: "This is an AI-generated answer about your request." })
-      );
-      const aiResponse = screen.getByTestId("ai-response");
-      expect(aiResponse).toHaveAttribute("data-dt-component", "AiResponse");
-    });
-    it("should not override the data-dt-component attribute if provided", () => {
+  describe("behavior tracking attributes", () => {
+    it("should add data-dt-* attributes", () => {
       render(
         /* @__PURE__ */ jsx(
           AiResponse,
           {
             "data-testid": "ai-response",
-            "data-dt-component": "CustomAiResponse",
+            "data-dt-content": "AiContent",
+            "data-dt-value-content": "ResponseValue",
+            "data-dt-children-value-content": "MessageContent",
             children: "This is an AI-generated answer about your request."
           }
         )
       );
       const aiResponse = screen.getByTestId("ai-response");
-      expect(aiResponse).toHaveAttribute("data-dt-component", "AiResponse");
+      expect(aiResponse).toHaveAttribute("data-dt-content", "AiContent");
+      expect(aiResponse).toHaveAttribute(
+        "data-dt-value-content",
+        "ResponseValue"
+      );
+      expect(aiResponse).toHaveAttribute(
+        "data-dt-children-value-content",
+        "MessageContent"
+      );
+    });
+    describe("data-dt-component", () => {
+      it("should have the default data-dt-component attribute", () => {
+        render(
+          /* @__PURE__ */ jsx(AiResponse, { "data-testid": "ai-response", children: "This is an AI-generated answer about your request." })
+        );
+        const aiResponse = screen.getByTestId("ai-response");
+        expect(aiResponse).toHaveAttribute("data-dt-component", "AiResponse");
+      });
+      it("should not override the data-dt-component attribute if provided", () => {
+        render(
+          /* @__PURE__ */ jsx(
+            AiResponse,
+            {
+              "data-testid": "ai-response",
+              "data-dt-component": "CustomAiResponse",
+              children: "This is an AI-generated answer about your request."
+            }
+          )
+        );
+        const aiResponse = screen.getByTestId("ai-response");
+        expect(aiResponse).toHaveAttribute("data-dt-component", "AiResponse");
+      });
     });
   });
 });

package/esm/content/ai-response/tests/AiResponse-reduced-motion.spec.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/content/ai-response/tests/AiResponse-reduced-motion.spec.tsx"],
-  "sourcesContent": ["import { act, screen } from '@testing-library/react';\nimport { createRef } from 'react';\nimport { beforeAll, afterAll, describe, it, expect } from 'vitest';\nimport '@testing-library/jest-dom/vitest';\n\nimport { AiResponse } from '../AiResponse.js';\nimport {\n  render,\n  setupMatchMediaMock,\n  clearMatchMediaMock,\n} from './vite-helpers.js';\n\nconst imageSrc =\n  'data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg==';\n\ndescribe('AiResponse reduced motion', () => {\n  beforeAll(() => {\n    // simulate reduced motion preference - these tests solely should check if the response is rendered correctly\n    // we keep these tests in a separate file since framer motion caches the matchMedia result and changing it within the same test file is not possible\n    setupMatchMediaMock(true);\n  });\n\n  afterAll(() => {\n    clearMatchMediaMock();\n  });\n\n  it('should not render anything if displayedText is an empty string', async () => {\n    // given\n    const response = '';\n\n    // when\n    render(<AiResponse data-testid=\"ai-response\">{response}</AiResponse>);\n\n    // then\n    expect(screen.queryByTestId('ai-response')).toBeNull();\n  });\n\n  describe('markdown rendering', () => {\n    it('should render headings correctly', async () => {\n      // given\n      const response = `\n# How to Optimize Your Workflow\n\n## Introduction\nIn today's fast-paced environment, efficiency is key. Here are some strategies to help you optimize your workflow:\n\n### 1. Automate Repetitive Tasks\nUse tools and scripts to automate tasks you perform frequently. For example:\n`;\n      const headings = [\n        'How to Optimize Your Workflow',\n        'Introduction',\n        '1. Automate Repetitive Tasks',\n      ];\n\n      // when\n      await act(async () => {\n        render(<AiResponse>{response}</AiResponse>);\n      });\n\n      // then\n      headings.forEach((text, i) => {\n        const headingElement = screen.getByText(text);\n        expect(headingElement).toBeInTheDocument();\n        expect(headingElement.getAttribute('data-testid')).toBe('heading');\n        expect(headingElement.tagName).toBe(`H${i + 1}`);\n      });\n    });\n\n    it('should render link correctly', async () => {\n      // given\n      const response = '[Link text](https://example.com)';\n\n      // when\n      await act(async () => {\n        render(<AiResponse>{response}</AiResponse>);\n      });\n\n      // then\n      const link = screen.getByText('Link text');\n      expect(link.tagName).toBe('A');\n      expect(link).toHaveAttribute('href', 'https://example.com/');\n    });\n\n    it('should render code block correctly', async () => {\n      // given\n      const response = `\n\\`\\`\\`js\nconst greet = name => \\`Hello, \\${name}!\\`;\nconsole.log(greet('World'));\n\\`\\`\\`\n`;\n\n      // when\n      await act(async () => {\n        render(<AiResponse>{response}</AiResponse>);\n      });\n\n      // then\n      const codeblock = screen.getByTestId('code-snippet');\n      expect(\n        codeblock.textContent?.endsWith(\"console.log(greet('World'));\"),\n      ).toBeTruthy();\n    });\n\n    it('should render list items correctly', async () => {\n      // given\n      const response = `\n* Urgent & Important\n* Important but Not Urgent\n* Urgent but Not Important\n* Neither\n`;\n\n      // when\n      await act(async () => {\n        render(<AiResponse>{response}</AiResponse>);\n      });\n\n      // then\n      const items = screen.getAllByRole('listitem');\n      expect(items.map((item) => item.textContent)).toStrictEqual([\n        'Urgent & Important',\n        'Important but Not Urgent',\n        'Urgent but Not Important',\n        'Neither',\n      ]);\n    });\n\n    it('should render plain text correctly', async () => {\n      // given\n      const response = 'Regular breaks improve focus and productivity.';\n\n      // when\n      await act(async () => {\n        render(<AiResponse>{response}</AiResponse>);\n      });\n\n      // then\n      const plainText = screen.getByText(\n        'Regular breaks improve focus and productivity.',\n      );\n      expect(plainText.tagName).toBe('P');\n    });\n\n    it('should render bold text correctly', async () => {\n      // given\n      const response =\n        '**Tip: Try the Pomodoro Technique for time management.**';\n\n      // when\n      await act(async () => {\n        render(<AiResponse>{response}</AiResponse>);\n      });\n\n      // then\n      const bold = screen.getByText(\n        'Tip: Try the Pomodoro Technique for time management.',\n      );\n      expect(bold.tagName).toBe('STRONG');\n    });\n\n    it('should render image correctly', async () => {\n      // given\n      const response = `![Workflow Diagram](${imageSrc})`;\n\n      // when\n      await act(async () => {\n        render(<AiResponse>{response}</AiResponse>);\n      });\n\n      // then\n      // Streamdown blocks images by default and renders a placeholder\n      const placeholder = screen.getByText('[Image blocked: Workflow Diagram]');\n      expect(placeholder).toBeInTheDocument();\n    });\n  });\n\n  describe('a11y', () => {\n    it('should have correct aria attributes by default', async () => {\n      // given / when\n      await act(async () =>\n        render(\n          <AiResponse data-testid=\"ai-response\">\n            Some AI-generated response.\n          </AiResponse>,\n        ),\n      );\n\n      // then\n      const root = screen.getByTestId('ai-response');\n      expect(root).toHaveAttribute('aria-live', 'polite');\n      expect(root).toHaveAttribute('aria-atomic', 'true');\n    });\n\n    it('should support other aria attributes', async () => {\n      // given/when\n      await act(async () =>\n        render(\n          <section aria-busy=\"true\" aria-label=\"AI Response Section\">\n            <div id=\"response-label\">AI Response</div>\n            <div id=\"description\">AI-generated content generating...</div>\n            <div id=\"details\">This may take a few seconds.</div>\n            <AiResponse\n              data-testid=\"ai-response\"\n              aria-labelledby=\"response-label\"\n              aria-describedby=\"description\"\n              aria-details=\"details\"\n            >\n              This is an AI-generated answer about your request.\n            </AiResponse>\n          </section>,\n        ),\n      );\n\n      // then\n      const response = screen.getByTestId('ai-response');\n      expect(response).toHaveAttribute('aria-labelledby', 'response-label');\n      expect(response).toHaveAttribute('aria-describedby', 'description');\n      expect(response).toHaveAttribute('aria-details', 'details');\n    });\n  });\n\n  it('should forward the ref', async () => {\n    // given\n    const forwardedRef = createRef<HTMLDivElement>();\n\n    // when\n    await act(async () =>\n      render(\n        <AiResponse data-testid=\"ai-response\" ref={forwardedRef}>\n          Some AI-generated response.\n        </AiResponse>,\n      ),\n    );\n\n    // then\n    expect(forwardedRef.current).not.toBeNull();\n    expect(forwardedRef.current?.tagName).toBe('DIV');\n  });\n\n  it('should set data-dtrum on the root level of the component', async () => {\n    // given/when\n    await act(async () =>\n      render(\n        <AiResponse data-dtrum-mask data-dtrum-allow data-testid=\"dtrum\">\n          Some AI-generated response.\n        </AiResponse>,\n      ),\n    );\n\n    // then\n    const dtrum = screen.getByTestId('dtrum');\n    expect(dtrum).toHaveAttribute('data-dtrum-mask');\n    expect(dtrum).toHaveAttribute('data-dtrum-allow');\n  });\n\n  it('should apply consumer className and style', async () => {\n    // given/when\n    await act(async () =>\n      render(\n        <AiResponse\n          data-testid=\"ai-response\"\n          className=\"ai-response-class\"\n          style={{ backgroundColor: 'rgb(255, 182, 193)' }}\n        >\n          Some AI-generated response.\n        </AiResponse>,\n      ),\n    );\n\n    // then\n    expect(screen.getByTestId('ai-response')).toHaveClass('ai-response-class');\n    expect(screen.getByTestId('ai-response')).toHaveStyle(\n      'background-color: rgb(255, 182, 193)',\n    );\n  });\n\n  it('should spread remaining props', async () => {\n    // given/when\n    await act(async () =>\n      render(\n        <AiResponse data-testid=\"ai-response\" data-custom=\"test-custom-data\">\n          Some AI-generated response.\n        </AiResponse>,\n      ),\n    );\n\n    // then\n    expect(screen.getByTestId('ai-response')).toHaveAttribute(\n      'data-custom',\n      'test-custom-data',\n    );\n  });\n\n  describe('data-dt-component', () => {\n    it('should have the default data-dt-component attribute', () => {\n      render(\n        <AiResponse data-testid=\"ai-response\">\n          This is an AI-generated answer about your request.\n        </AiResponse>,\n      );\n      const aiResponse = screen.getByTestId('ai-response');\n      expect(aiResponse).toHaveAttribute('data-dt-component', 'AiResponse');\n    });\n\n    it('should not override the data-dt-component attribute if provided', () => {\n      render(\n        <AiResponse\n          data-testid=\"ai-response\"\n          data-dt-component=\"CustomAiResponse\"\n        >\n          This is an AI-generated answer about your request.\n        </AiResponse>,\n      );\n      const aiResponse = screen.getByTestId('ai-response');\n      expect(aiResponse).toHaveAttribute('data-dt-component', 'AiResponse');\n    });\n  });\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { act, screen } from '@testing-library/react';\nimport { createRef } from 'react';\nimport { beforeAll, afterAll, describe, it, expect } from 'vitest';\nimport '@testing-library/jest-dom/vitest';\n\nimport { AiResponse } from '../AiResponse.js';\nimport {\n  render,\n  setupMatchMediaMock,\n  clearMatchMediaMock,\n} from './vite-helpers.js';\n\nconst imageSrc =\n  'data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg==';\n\ndescribe('AiResponse reduced motion', () => {\n  beforeAll(() => {\n    // simulate reduced motion preference - these tests solely should check if the response is rendered correctly\n    // we keep these tests in a separate file since framer motion caches the matchMedia result and changing it within the same test file is not possible\n    setupMatchMediaMock(true);\n  });\n\n  afterAll(() => {\n    clearMatchMediaMock();\n  });\n\n  it('should not render anything if displayedText is an empty string', async () => {\n    // given\n    const response = '';\n\n    // when\n    render(<AiResponse data-testid=\"ai-response\">{response}</AiResponse>);\n\n    // then\n    expect(screen.queryByTestId('ai-response')).toBeNull();\n  });\n\n  describe('markdown rendering', () => {\n    it('should render headings correctly', async () => {\n      // given\n      const response = `\n# How to Optimize Your Workflow\n\n## Introduction\nIn today's fast-paced environment, efficiency is key. Here are some strategies to help you optimize your workflow:\n\n### 1. Automate Repetitive Tasks\nUse tools and scripts to automate tasks you perform frequently. For example:\n`;\n      const headings = [\n        'How to Optimize Your Workflow',\n        'Introduction',\n        '1. Automate Repetitive Tasks',\n      ];\n\n      // when\n      await act(async () => {\n        render(<AiResponse>{response}</AiResponse>);\n      });\n\n      // then\n      headings.forEach((text, i) => {\n        const headingElement = screen.getByText(text);\n        expect(headingElement).toBeInTheDocument();\n        expect(headingElement.getAttribute('data-testid')).toBe('heading');\n        expect(headingElement.tagName).toBe(`H${i + 1}`);\n      });\n    });\n\n    it('should render link correctly', async () => {\n      // given\n      const response = '[Link text](https://example.com)';\n\n      // when\n      await act(async () => {\n        render(<AiResponse>{response}</AiResponse>);\n      });\n\n      // then\n      const link = screen.getByText('Link text');\n      expect(link.tagName).toBe('A');\n      expect(link).toHaveAttribute('href', 'https://example.com/');\n    });\n\n    it('should render code block correctly', async () => {\n      // given\n      const response = `\n\\`\\`\\`js\nconst greet = name => \\`Hello, \\${name}!\\`;\nconsole.log(greet('World'));\n\\`\\`\\`\n`;\n\n      // when\n      await act(async () => {\n        render(<AiResponse>{response}</AiResponse>);\n      });\n\n      // then\n      const codeblock = screen.getByTestId('code-snippet');\n      expect(\n        codeblock.textContent?.endsWith(\"console.log(greet('World'));\"),\n      ).toBeTruthy();\n    });\n\n    it('should render list items correctly', async () => {\n      // given\n      const response = `\n* Urgent & Important\n* Important but Not Urgent\n* Urgent but Not Important\n* Neither\n`;\n\n      // when\n      await act(async () => {\n        render(<AiResponse>{response}</AiResponse>);\n      });\n\n      // then\n      const items = screen.getAllByRole('listitem');\n      expect(items.map((item) => item.textContent)).toStrictEqual([\n        'Urgent & Important',\n        'Important but Not Urgent',\n        'Urgent but Not Important',\n        'Neither',\n      ]);\n    });\n\n    it('should render plain text correctly', async () => {\n      // given\n      const response = 'Regular breaks improve focus and productivity.';\n\n      // when\n      await act(async () => {\n        render(<AiResponse>{response}</AiResponse>);\n      });\n\n      // then\n      const plainText = screen.getByText(\n        'Regular breaks improve focus and productivity.',\n      );\n      expect(plainText.tagName).toBe('P');\n    });\n\n    it('should render bold text correctly', async () => {\n      // given\n      const response =\n        '**Tip: Try the Pomodoro Technique for time management.**';\n\n      // when\n      await act(async () => {\n        render(<AiResponse>{response}</AiResponse>);\n      });\n\n      // then\n      const bold = screen.getByText(\n        'Tip: Try the Pomodoro Technique for time management.',\n      );\n      expect(bold.tagName).toBe('STRONG');\n    });\n\n    it('should render image correctly', async () => {\n      // given\n      const response = `![Workflow Diagram](${imageSrc})`;\n\n      // when\n      await act(async () => {\n        render(<AiResponse>{response}</AiResponse>);\n      });\n\n      // then\n      // Streamdown blocks images by default and renders a placeholder\n      const placeholder = screen.getByText('[Image blocked: Workflow Diagram]');\n      expect(placeholder).toBeInTheDocument();\n    });\n  });\n\n  describe('a11y', () => {\n    it('should have correct aria attributes by default', async () => {\n      // given / when\n      await act(async () =>\n        render(\n          <AiResponse data-testid=\"ai-response\">\n            Some AI-generated response.\n          </AiResponse>,\n        ),\n      );\n\n      // then\n      const root = screen.getByTestId('ai-response');\n      expect(root).toHaveAttribute('aria-live', 'polite');\n      expect(root).toHaveAttribute('aria-atomic', 'true');\n    });\n\n    it('should support other aria attributes', async () => {\n      // given/when\n      await act(async () =>\n        render(\n          <section aria-busy=\"true\" aria-label=\"AI Response Section\">\n            <div id=\"response-label\">AI Response</div>\n            <div id=\"description\">AI-generated content generating...</div>\n            <div id=\"details\">This may take a few seconds.</div>\n            <AiResponse\n              data-testid=\"ai-response\"\n              aria-label=\"label\"\n              aria-labelledby=\"response-label\"\n              aria-describedby=\"description\"\n              aria-details=\"details\"\n            >\n              This is an AI-generated answer about your request.\n            </AiResponse>\n          </section>,\n        ),\n      );\n\n      // then\n      const response = screen.getByTestId('ai-response');\n      expect(response).toHaveAttribute('aria-label', 'label');\n      expect(response).toHaveAttribute('aria-labelledby', 'response-label');\n      expect(response).toHaveAttribute('aria-describedby', 'description');\n      expect(response).toHaveAttribute('aria-details', 'details');\n    });\n  });\n\n  it('should forward the ref', async () => {\n    // given\n    const forwardedRef = createRef<HTMLDivElement>();\n\n    // when\n    await act(async () =>\n      render(\n        <AiResponse data-testid=\"ai-response\" ref={forwardedRef}>\n          Some AI-generated response.\n        </AiResponse>,\n      ),\n    );\n\n    // then\n    expect(forwardedRef.current).not.toBeNull();\n    expect(forwardedRef.current?.tagName).toBe('DIV');\n  });\n\n  it('should set data-dtrum on the root level of the component', async () => {\n    // given/when\n    await act(async () =>\n      render(\n        <AiResponse data-dtrum-mask data-dtrum-allow data-testid=\"dtrum\">\n          Some AI-generated response.\n        </AiResponse>,\n      ),\n    );\n\n    // then\n    const dtrum = screen.getByTestId('dtrum');\n    expect(dtrum).toHaveAttribute('data-dtrum-mask');\n    expect(dtrum).toHaveAttribute('data-dtrum-allow');\n  });\n\n  it('should apply consumer className and style', async () => {\n    // given/when\n    await act(async () =>\n      render(\n        <AiResponse\n          data-testid=\"ai-response\"\n          className=\"ai-response-class\"\n          style={{ backgroundColor: 'rgb(255, 182, 193)' }}\n        >\n          Some AI-generated response.\n        </AiResponse>,\n      ),\n    );\n\n    // then\n    expect(screen.getByTestId('ai-response')).toHaveClass('ai-response-class');\n    expect(screen.getByTestId('ai-response')).toHaveStyle(\n      'background-color: rgb(255, 182, 193)',\n    );\n  });\n\n  it('should spread remaining props', async () => {\n    // given/when\n    await act(async () =>\n      render(\n        <AiResponse data-testid=\"ai-response\" data-custom=\"test-custom-data\">\n          Some AI-generated response.\n        </AiResponse>,\n      ),\n    );\n\n    // then\n    expect(screen.getByTestId('ai-response')).toHaveAttribute(\n      'data-custom',\n      'test-custom-data',\n    );\n  });\n\n  describe('behavior tracking attributes', () => {\n    it('should add data-dt-* attributes', () => {\n      render(\n        <AiResponse\n          data-testid=\"ai-response\"\n          data-dt-content=\"AiContent\"\n          data-dt-value-content=\"ResponseValue\"\n          data-dt-children-value-content=\"MessageContent\"\n        >\n          This is an AI-generated answer about your request.\n        </AiResponse>,\n      );\n\n      const aiResponse = screen.getByTestId('ai-response');\n      expect(aiResponse).toHaveAttribute('data-dt-content', 'AiContent');\n      expect(aiResponse).toHaveAttribute(\n        'data-dt-value-content',\n        'ResponseValue',\n      );\n      expect(aiResponse).toHaveAttribute(\n        'data-dt-children-value-content',\n        'MessageContent',\n      );\n    });\n\n    describe('data-dt-component', () => {\n      it('should have the default data-dt-component attribute', () => {\n        render(\n          <AiResponse data-testid=\"ai-response\">\n            This is an AI-generated answer about your request.\n          </AiResponse>,\n        );\n        const aiResponse = screen.getByTestId('ai-response');\n        expect(aiResponse).toHaveAttribute('data-dt-component', 'AiResponse');\n      });\n\n      it('should not override the data-dt-component attribute if provided', () => {\n        render(\n          <AiResponse\n            data-testid=\"ai-response\"\n            data-dt-component=\"CustomAiResponse\"\n          >\n            This is an AI-generated answer about your request.\n          </AiResponse>,\n        );\n        const aiResponse = screen.getByTestId('ai-response');\n        expect(aiResponse).toHaveAttribute('data-dt-component', 'AiResponse');\n      });\n    });\n  });\n});\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/content/avatar/Avatar.css

@@ -1,4 +1,4 @@
-._7llfy90-3-0-1 {
+._7llfy90-3-1-0 {
   cursor: default;
   box-sizing: border-box;
   border: 1px solid var(--dt-colors-border-neutral-default, #dadbe4);
@@ -11,19 +11,19 @@
   align-items: center;
   align-self: start;
 }
-._7llfy91-3-0-1 {
+._7llfy91-3-1-0 {
   min-width: var(--dt-spacings-size-20, 20px);
 }
-._7llfy92-3-0-1 {
+._7llfy92-3-1-0 {
   min-width: var(--dt-spacings-size-32, 32px);
 }
-._7llfy93-3-0-1 {
+._7llfy93-3-1-0 {
   border-color: var(--dt-colors-border-neutral-disabled, #dadbe480);
   background-color: var(--dt-colors-background-surface-default, #fff);
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   z-index: 0;
 }
-._7llfy93-3-0-1:before {
+._7llfy93-3-1-0:before {
   content: "";
   aspect-ratio: 1/1;
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
@@ -32,36 +32,36 @@
   position: absolute;
   z-index: -1;
 }
-._7llfy94-3-0-1[tabindex]:hover, button._7llfy94-3-0-1:hover, a._7llfy94-3-0-1:hover, ._7llfy94-3-0-1:focus {
+._7llfy94-3-1-0[tabindex]:hover, button._7llfy94-3-1-0:hover, a._7llfy94-3-1-0:hover, ._7llfy94-3-1-0:focus {
   background-color: var(--dt-colors-background-field-neutral-accent-hover, #4d4e72);
   border-color: var(--dt-colors-border-neutral-default-hover, #d0d1dc);
   z-index: 1;
 }
-button._7llfy94-3-0-1:hover, a._7llfy94-3-0-1:hover, button._7llfy94-3-0-1:active, a._7llfy94-3-0-1:active {
+button._7llfy94-3-1-0:hover, a._7llfy94-3-1-0:hover, button._7llfy94-3-1-0:active, a._7llfy94-3-1-0:active {
   cursor: pointer;
   z-index: 1;
 }
-._7llfy94-3-0-1[tabindex]:active, button._7llfy94-3-0-1:active, a._7llfy94-3-0-1:active {
+._7llfy94-3-1-0[tabindex]:active, button._7llfy94-3-1-0:active, a._7llfy94-3-1-0:active {
   background-color: var(--dt-colors-background-field-neutral-accent-active, #404164);
   border-color: var(--dt-colors-border-neutral-default-active, #c6c7d5);
   z-index: 1;
 }
-._7llfy95-3-0-1:before {
+._7llfy95-3-1-0:before {
   min-width: var(--dt-spacings-size-20, 20px);
 }
-._7llfy96-3-0-1:before {
+._7llfy96-3-1-0:before {
   min-width: var(--dt-spacings-size-32, 32px);
 }
-._7llfy97-3-0-1 {
+._7llfy97-3-1-0 {
   padding: 0;
   margin: 0;
   border: none;
   background-color: transparent;
 }
-._7llfy98-3-0-1 {
+._7llfy98-3-1-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   overflow-wrap: break-word;
 }
-._7llfy99-3-0-1 ~ div > div {
+._7llfy99-3-1-0 ~ div > div {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }

package/esm/content/avatar/Avatar.js

@@ -8,6 +8,9 @@ import {
 } from "./Avatar.sty.js";
 import { Label } from "./Label.js";
 import { Subtitle } from "./Subtitle.js";
+import { useAriaLabelingProps } from "../../core/hooks/useAriaLabelingProps.js";
+import { useBehavioralTrackingProps } from "../../core/hooks/useBehavioralTrackingProps.js";
+import { useSafeForwardProps } from "../../core/hooks/useSafeForwardProps.js";
 import { useSlots } from "../../core/hooks/useSlots.js";
 import { focusRingStatic } from "../../core/styles/focusRingStatic.sty.js";
 import { _sanitizeSymbol } from "../../core/utils/sanitize-symbol.js";
@@ -21,14 +24,17 @@ const InternalAvatar = /* @__PURE__ */ forwardRef(
       size = "default",
       abbreviation,
       disabled = false,
+      as,
       className: consumerClassName,
       style: consumerStyle,
       "data-testid": dataTestId,
       "data-dtrum-mask": dataDtrumMask,
       "data-dtrum-allow": dataDtrumAllow,
-      as,
       ...remainingProps
     } = props;
+    const [behavioralTrackingProps, restProps] = useBehavioralTrackingProps(remainingProps);
+    const ariaLabelingProps = useAriaLabelingProps(restProps);
+    const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);
     const [slots] = useSlots(children, {
       label: Label,
       subtitle: Subtitle
@@ -44,16 +50,17 @@ const InternalAvatar = /* @__PURE__ */ forwardRef(
     return /* @__PURE__ */ jsx(
       "div",
       {
-        "data-testid": dataTestId,
-        "data-dtrum-mask": dataDtrumMask,
-        "data-dtrum-allow": dataDtrumAllow,
-        "data-dt-component": COMPONENT_NAME,
         className: clsx(
           avatarWrapperCSS,
           textStyleCSS({ textStyle: "base" }),
           remainingConsumerClassname
         ),
         style: consumerStyle,
+        "data-testid": dataTestId,
+        "data-dtrum-mask": dataDtrumMask,
+        "data-dtrum-allow": dataDtrumAllow,
+        ...behavioralTrackingProps,
+        "data-dt-component": COMPONENT_NAME,
         children: /* @__PURE__ */ jsxs(Flex, { gap: size === "small" ? 4 : 8, alignItems: "center", minWidth: 0, children: [
           /* @__PURE__ */ jsx(
             Abbreviation,
@@ -68,7 +75,8 @@ const InternalAvatar = /* @__PURE__ */ forwardRef(
                 textStyleCSS({ textStyle: size === "small" ? "small" : "base" }),
                 focusRingStatic({ disabled, when: "focus-within-visible" })
               ),
-              ...remainingProps,
+              ...ariaLabelingProps,
+              ...forwardProps,
               children: _sanitizeSymbol(abbreviation, size === "default" ? 2 : void 0)
             }
           ),

package/esm/content/avatar/Avatar.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/avatar/Avatar.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { ElementType, forwardRef, type ReactElement } from 'react';\n\nimport {\n  avatarAbbreviationCSS,\n  avatarDisabledCSS,\n  avatarWrapperCSS,\n} from './Avatar.sty.js';\nimport { Label } from './Label.js';\nimport { Subtitle } from './Subtitle.js';\nimport { useSlots } from '../../core/hooks/useSlots.js';\nimport { focusRingStatic } from '../../core/styles/focusRingStatic.sty.js';\nimport type { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\nimport type { PolymorphicComponentProps } from '../../core/types/polymorph.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\nimport type { WithChildren } from '../../core/types/with-children.js';\nimport { _sanitizeSymbol } from '../../core/utils/sanitize-symbol.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { textStyle as textStyleCSS } from '../../styles/textStyle.sty.js';\n\n\nconst COMPONENT_NAME = 'Avatar';\n\n// Merge own props with others inherited from the underlying element type\n/** @public */\nexport type AvatarProps<E extends ElementType> = PolymorphicComponentProps<\n  E,\n  AvatarOwnProps\n>;\n\n/**\n * Accepted properties for the Avatar component\n * @public\n */\nexport interface AvatarOwnProps\n  extends WithChildren,\n    AriaLabelingProps,\n    StylingProps,\n    DataTestId,\n    MaskingProps {\n  /**\n   * The size of the Avatar.\n   * @defaultValue 'default'\n   */\n  size?: 'default' | 'small';\n\n  /**\n   * The letters displayed in the colored circle of the Avatar.\n   */\n  abbreviation: string;\n\n  /**\n   * Whether the Avatar is disabled.\n   * @defaultValue false\n   */\n  disabled?: boolean;\n}\n\n/**\n * Avatar component\n */\nconst InternalAvatar: <E extends ElementType = 'div'>(\n  props: AvatarProps<E>,\n) => ReactElement | null = /* @__PURE__ */ forwardRef(\n  <E extends ElementType>(props: AvatarProps<E>, ref: typeof props.ref) => {\n    const {\n      children,\n      size = 'default',\n      abbreviation,\n      disabled = false,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      as,\n      ...remainingProps\n    }: AvatarProps<E> = props;\n    const [slots] = useSlots(children, {\n      label: Label,\n      subtitle: Subtitle,\n    });\n\n    const Abbreviation = as ?? 'div';\n\n    // ensuring that 'rovingFocusElement' remains assigned to the Abbrevation Element for focus functionality.\n    const remainingConsumerClassname = (consumerClassName ?? '').replace(\n      /rovingFocusElement/g,\n      '',\n    );\n    const hasRovingFocus = (consumerClassName ?? '').includes(\n      'rovingFocusElement',\n    );\n    return (\n      <div\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        data-dt-component={COMPONENT_NAME}\n        className={clsx(\n          avatarWrapperCSS,\n          textStyleCSS({ textStyle: 'base' }),\n          remainingConsumerClassname,\n        )}\n        style={consumerStyle}\n      >\n        <Flex gap={size === 'small' ? 4 : 8} alignItems=\"center\" minWidth={0}>\n          <Abbreviation\n            ref={ref}\n            className={clsx(\n              {\n                [avatarDisabledCSS]: disabled,\n                rovingFocusElement: hasRovingFocus,\n              },\n              avatarAbbreviationCSS({ size, disabled }),\n              textStyleCSS({ textStyle: size === 'small' ? 'small' : 'base' }),\n              focusRingStatic({ disabled, when: 'focus-within-visible' }),\n            )}\n            {...remainingProps}\n          >\n            {_sanitizeSymbol(abbreviation, size === 'default' ? 2 : undefined)}\n          </Abbreviation>\n          {(slots.label || slots.subtitle) && (\n            <Flex flexDirection=\"column\" gap={0} minWidth={0}>\n              {slots.label}\n              {slots.subtitle}\n            </Flex>\n          )}\n        </Flex>\n      </div>\n    );\n  },\n);\n\n(\n  InternalAvatar as typeof InternalAvatar & { displayName: string }\n).displayName = COMPONENT_NAME;\n\n/**\n * The `Avatar` component can be used as a visual representation of a user.\n * @public\n */\nexport const Avatar = Object.assign(InternalAvatar, {\n  Label,\n  Subtitle,\n});\n"],
-  "mappings": "AA6GU,cAgBE,YAhBF;AA7GV,OAAO,UAAU;AACjB,SAAsB,kBAAqC;AAE3D;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,aAAa;AACtB,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AACzB,SAAS,uBAAuB;AAOhC,SAAS,uBAAuB;AAChC,SAAS,YAAY;AACrB,SAAS,aAAa,oBAAoB;AAG1C,MAAM,iBAAiB;AAwCvB,MAAM,iBAEqC;AAAA,EACzC,CAAwB,OAAuB,QAA0B;AACvE,UAAM;AAAA,MACJ;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA,WAAW;AAAA,MACX,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAe;AAAA,MACf,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB;AAAA,MACA,GAAG;AAAA,IACL,IAAoB;AACpB,UAAM,CAAC,KAAK,IAAI,SAAS,UAAU;AAAA,MACjC,OAAO;AAAA,MACP,UAAU;AAAA,IACZ,CAAC;AAED,UAAM,eAAe,MAAM;AAG3B,UAAM,8BAA8B,qBAAqB,IAAI;AAAA,MAC3D;AAAA,MACA;AAAA,IACF;AACA,UAAM,kBAAkB,qBAAqB,IAAI;AAAA,MAC/C;AAAA,IACF;AACA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB,qBAAmB;AAAA,QACnB,WAAW;AAAA,UACT;AAAA,UACA,aAAa,EAAE,WAAW,OAAO,CAAC;AAAA,UAClC;AAAA,QACF;AAAA,QACA,OAAO;AAAA,QAEP,+BAAC,QAAK,KAAK,SAAS,UAAU,IAAI,GAAG,YAAW,UAAS,UAAU,GACjE;AAAA;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA,WAAW;AAAA,gBACT;AAAA,kBACE,CAAC,iBAAiB,GAAG;AAAA,kBACrB,oBAAoB;AAAA,gBACtB;AAAA,gBACA,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAAA,gBACxC,aAAa,EAAE,WAAW,SAAS,UAAU,UAAU,OAAO,CAAC;AAAA,gBAC/D,gBAAgB,EAAE,UAAU,MAAM,uBAAuB,CAAC;AAAA,cAC5D;AAAA,cACC,GAAG;AAAA,cAEH,0BAAgB,cAAc,SAAS,YAAY,IAAI,MAAS;AAAA;AAAA,UACnE;AAAA,WACE,MAAM,SAAS,MAAM,aACrB,qBAAC,QAAK,eAAc,UAAS,KAAK,GAAG,UAAU,GAC5C;AAAA,kBAAM;AAAA,YACN,MAAM;AAAA,aACT;AAAA,WAEJ;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAGE,eACA,cAAc;AAMT,MAAM,SAAS,OAAO,OAAO,gBAAgB;AAAA,EAClD;AAAA,EACA;AACF,CAAC;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { ElementType, forwardRef, type ReactElement } from 'react';\n\nimport {\n  avatarAbbreviationCSS,\n  avatarDisabledCSS,\n  avatarWrapperCSS,\n} from './Avatar.sty.js';\nimport { Label } from './Label.js';\nimport { Subtitle } from './Subtitle.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport { useSlots } from '../../core/hooks/useSlots.js';\nimport { focusRingStatic } from '../../core/styles/focusRingStatic.sty.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 { PolymorphicComponentProps } from '../../core/types/polymorph.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\nimport type { WithChildren } from '../../core/types/with-children.js';\nimport { _sanitizeSymbol } from '../../core/utils/sanitize-symbol.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { textStyle as textStyleCSS } from '../../styles/textStyle.sty.js';\n\nconst COMPONENT_NAME = 'Avatar';\n\n// Merge own props with others inherited from the underlying element type\n/** @public */\nexport type AvatarProps<E extends ElementType> = PolymorphicComponentProps<\n  E,\n  AvatarOwnProps\n>;\n\n/**\n * Accepted properties for the Avatar component\n * @public\n */\nexport interface AvatarOwnProps\n  extends WithChildren,\n    AriaLabelingProps,\n    StylingProps,\n    DataTestId,\n    MaskingProps,\n    BehaviorTrackingProps {\n  /**\n   * The size of the Avatar.\n   * @defaultValue 'default'\n   */\n  size?: 'default' | 'small';\n\n  /**\n   * The letters displayed in the colored circle of the Avatar.\n   */\n  abbreviation: string;\n\n  /**\n   * Whether the Avatar is disabled.\n   * @defaultValue false\n   */\n  disabled?: boolean;\n}\n\n/**\n * Avatar component\n */\nconst InternalAvatar: <E extends ElementType = 'div'>(\n  props: AvatarProps<E>,\n) => ReactElement | null = /* @__PURE__ */ forwardRef(\n  <E extends ElementType>(props: AvatarProps<E>, ref: typeof props.ref) => {\n    const {\n      children,\n      size = 'default',\n      abbreviation,\n      disabled = false,\n      as,\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 [slots] = useSlots(children, {\n      label: Label,\n      subtitle: Subtitle,\n    });\n\n    const Abbreviation = as ?? 'div';\n\n    // ensuring that 'rovingFocusElement' remains assigned to the Abbrevation Element for focus functionality.\n    const remainingConsumerClassname = (consumerClassName ?? '').replace(\n      /rovingFocusElement/g,\n      '',\n    );\n    const hasRovingFocus = (consumerClassName ?? '').includes(\n      'rovingFocusElement',\n    );\n    return (\n      <div\n        className={clsx(\n          avatarWrapperCSS,\n          textStyleCSS({ textStyle: 'base' }),\n          remainingConsumerClassname,\n        )}\n        style={consumerStyle}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        {...behavioralTrackingProps}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <Flex gap={size === 'small' ? 4 : 8} alignItems=\"center\" minWidth={0}>\n          <Abbreviation\n            ref={ref}\n            className={clsx(\n              {\n                [avatarDisabledCSS]: disabled,\n                rovingFocusElement: hasRovingFocus,\n              },\n              avatarAbbreviationCSS({ size, disabled }),\n              textStyleCSS({ textStyle: size === 'small' ? 'small' : 'base' }),\n              focusRingStatic({ disabled, when: 'focus-within-visible' }),\n            )}\n            {...ariaLabelingProps}\n            {...forwardProps}\n          >\n            {_sanitizeSymbol(abbreviation, size === 'default' ? 2 : undefined)}\n          </Abbreviation>\n          {(slots.label || slots.subtitle) && (\n            <Flex flexDirection=\"column\" gap={0} minWidth={0}>\n              {slots.label}\n              {slots.subtitle}\n            </Flex>\n          )}\n        </Flex>\n      </div>\n    );\n  },\n);\n\n(\n  InternalAvatar as typeof InternalAvatar & { displayName: string }\n).displayName = COMPONENT_NAME;\n\n/**\n * The `Avatar` component can be used as a visual representation of a user.\n * @public\n */\nexport const Avatar = Object.assign(InternalAvatar, {\n  Label,\n  Subtitle,\n});\n"],
+  "mappings": "AAwHU,cAiBE,YAjBF;AAxHV,OAAO,UAAU;AACjB,SAAsB,kBAAqC;AAE3D;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,aAAa;AACtB,SAAS,gBAAgB;AACzB,SAAS,4BAA4B;AACrC,SAAS,kCAAkC;AAC3C,SAAS,2BAA2B;AACpC,SAAS,gBAAgB;AACzB,SAAS,uBAAuB;AAQhC,SAAS,uBAAuB;AAChC,SAAS,YAAY;AACrB,SAAS,aAAa,oBAAoB;AAE1C,MAAM,iBAAiB;AAyCvB,MAAM,iBAEqC;AAAA,EACzC,CAAwB,OAAuB,QAA0B;AACvE,UAAM;AAAA,MACJ;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAe;AAAA,MACf,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,GAAG;AAAA,IACL,IAAI;AAEJ,UAAM,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAC3C,UAAM,oBAAoB,qBAAqB,SAAS;AACxD,UAAM,eAAe,oBAAoB,WAAW,iBAAiB;AAErE,UAAM,CAAC,KAAK,IAAI,SAAS,UAAU;AAAA,MACjC,OAAO;AAAA,MACP,UAAU;AAAA,IACZ,CAAC;AAED,UAAM,eAAe,MAAM;AAG3B,UAAM,8BAA8B,qBAAqB,IAAI;AAAA,MAC3D;AAAA,MACA;AAAA,IACF;AACA,UAAM,kBAAkB,qBAAqB,IAAI;AAAA,MAC/C;AAAA,IACF;AACA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,aAAa,EAAE,WAAW,OAAO,CAAC;AAAA,UAClC;AAAA,QACF;AAAA,QACA,OAAO;AAAA,QACP,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QACjB,GAAG;AAAA,QACJ,qBAAmB;AAAA,QAEnB,+BAAC,QAAK,KAAK,SAAS,UAAU,IAAI,GAAG,YAAW,UAAS,UAAU,GACjE;AAAA;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA,WAAW;AAAA,gBACT;AAAA,kBACE,CAAC,iBAAiB,GAAG;AAAA,kBACrB,oBAAoB;AAAA,gBACtB;AAAA,gBACA,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAAA,gBACxC,aAAa,EAAE,WAAW,SAAS,UAAU,UAAU,OAAO,CAAC;AAAA,gBAC/D,gBAAgB,EAAE,UAAU,MAAM,uBAAuB,CAAC;AAAA,cAC5D;AAAA,cACC,GAAG;AAAA,cACH,GAAG;AAAA,cAEH,0BAAgB,cAAc,SAAS,YAAY,IAAI,MAAS;AAAA;AAAA,UACnE;AAAA,WACE,MAAM,SAAS,MAAM,aACrB,qBAAC,QAAK,eAAc,UAAS,KAAK,GAAG,UAAU,GAC5C;AAAA,kBAAM;AAAA,YACN,MAAM;AAAA,aACT;AAAA,WAEJ;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAGE,eACA,cAAc;AAMT,MAAM,SAAS,OAAO,OAAO,gBAAgB;AAAA,EAClD;AAAA,EACA;AACF,CAAC;",
   "names": []
 }

package/esm/content/avatar/Avatar.sty.js

@@ -1,9 +1,9 @@
 import "./Avatar.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var avatarAbbreviationCSS = _7a468({ defaultClassName: "_7llfy90-3-0-1", variantClassNames: { size: { small: "_7llfy91-3-0-1", "default": "_7llfy92-3-0-1" }, disabled: { true: "_7llfy93-3-0-1", false: "_7llfy94-3-0-1" } }, defaultVariants: {}, compoundVariants: [[{ disabled: true, size: "small" }, "_7llfy95-3-0-1"], [{ disabled: true, size: "default" }, "_7llfy96-3-0-1"]] });
-var avatarDisabledCSS = "_7llfy99-3-0-1";
-var avatarSubtitleCSS = "_7llfy98-3-0-1";
-var avatarWrapperCSS = "_7llfy97-3-0-1";
+var avatarAbbreviationCSS = _7a468({ defaultClassName: "_7llfy90-3-1-0", variantClassNames: { size: { small: "_7llfy91-3-1-0", "default": "_7llfy92-3-1-0" }, disabled: { true: "_7llfy93-3-1-0", false: "_7llfy94-3-1-0" } }, defaultVariants: {}, compoundVariants: [[{ disabled: true, size: "small" }, "_7llfy95-3-1-0"], [{ disabled: true, size: "default" }, "_7llfy96-3-1-0"]] });
+var avatarDisabledCSS = "_7llfy99-3-1-0";
+var avatarSubtitleCSS = "_7llfy98-3-1-0";
+var avatarWrapperCSS = "_7llfy97-3-1-0";
 export {
   avatarAbbreviationCSS,
   avatarDisabledCSS,

package/esm/content/avatar/Avatar.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/avatar/Avatar.css.ts"],
-  "sourcesContent": ["import './Avatar.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var avatarAbbreviationCSS = _7a468({defaultClassName:'_7llfy90-3-0-1',variantClassNames:{size:{small:'_7llfy91-3-0-1','default':'_7llfy92-3-0-1'},disabled:{true:'_7llfy93-3-0-1',false:'_7llfy94-3-0-1'}},defaultVariants:{},compoundVariants:[[{disabled:true,size:'small'},'_7llfy95-3-0-1'],[{disabled:true,size:'default'},'_7llfy96-3-0-1']]});\nexport var avatarDisabledCSS = '_7llfy99-3-0-1';\nexport var avatarSubtitleCSS = '_7llfy98-3-0-1';\nexport var avatarWrapperCSS = '_7llfy97-3-0-1';"],
+  "sourcesContent": ["import './Avatar.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var avatarAbbreviationCSS = _7a468({defaultClassName:'_7llfy90-3-1-0',variantClassNames:{size:{small:'_7llfy91-3-1-0','default':'_7llfy92-3-1-0'},disabled:{true:'_7llfy93-3-1-0',false:'_7llfy94-3-1-0'}},defaultVariants:{},compoundVariants:[[{disabled:true,size:'small'},'_7llfy95-3-1-0'],[{disabled:true,size:'default'},'_7llfy96-3-1-0']]});\nexport var avatarDisabledCSS = '_7llfy99-3-1-0';\nexport var avatarSubtitleCSS = '_7llfy98-3-1-0';\nexport var avatarWrapperCSS = '_7llfy97-3-1-0';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,wBAAwB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,MAAK,EAAC,OAAM,kBAAiB,WAAU,iBAAgB,GAAE,UAAS,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,UAAS,MAAK,MAAK,QAAO,GAAE,gBAAgB,GAAE,CAAC,EAAC,UAAS,MAAK,MAAK,UAAS,GAAE,gBAAgB,CAAC,EAAC,CAAC;AACnV,IAAI,oBAAoB;AACxB,IAAI,oBAAoB;AACxB,IAAI,mBAAmB;",
   "names": []
 }

package/esm/content/avatar-group/AvatarGroup.css

@@ -1,9 +1,9 @@
-._129un530-3-0-1 {
+._129un530-3-1-0 {
   display: flex;
 }
-._129un531-3-0-1 {
+._129un531-3-1-0 {
   margin-left: calc(var(--dt-spacings-size-4, 4px) * -1);
 }
-._129un531-3-0-1:first-child {
+._129un531-3-1-0:first-child {
   margin-left: var(--dt-spacings-size-0, 0);
 }

package/esm/content/avatar-group/AvatarGroup.js

@@ -11,8 +11,10 @@ import { additionalAvatarWrapperCSS } from "./AvatarGroup.sty.js";
 import { Item } from "./Item.js";
 import { Button } from "../../buttons/button/Button.js";
 import { useAriaLabelingProps } from "../../core/hooks/useAriaLabelingProps.js";
+import { useBehavioralTrackingProps } from "../../core/hooks/useBehavioralTrackingProps.js";
 import { useMergeRefs } from "../../core/hooks/useMergeRefs.js";
 import { useRovingFocus } from "../../core/hooks/useRovingFocus.js";
+import { useSafeForwardProps } from "../../core/hooks/useSafeForwardProps.js";
 import { focusRingStatic } from "../../core/styles/focusRingStatic.sty.js";
 import { isSlot } from "../../core/utils/is-slot.js";
 import { Flex } from "../../layouts/flex/Flex.js";
@@ -30,8 +32,11 @@ const RootAvatarGroup = forwardRef(
       "data-dtrum-allow": dataDtrumAllow,
       ...remainingProps
     } = props;
-    const ariaLabelingProps = useAriaLabelingProps(remainingProps);
+    const [behavioralTrackingProps, restProps] = useBehavioralTrackingProps(remainingProps);
     const intl = useIntl();
+    const ariaLabelingProps = useAriaLabelingProps(restProps);
+    const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);
+    const { "aria-label": ariaLabel, ...remainingAriaLabelingProps } = ariaLabelingProps;
     const { containerRef: rovingContainerRef } = useRovingFocus(
       {
         initialIndex: void 0,
@@ -83,21 +88,22 @@ const RootAvatarGroup = forwardRef(
         totalAvatars: additionalValues.length + displayValues.length
       }
     );
-    const ariaLabel = ariaLabelingProps["aria-label"] ?? formatMessageAriaLabel;
     return displayValues.length ? /* @__PURE__ */ jsxs(
       Flex,
       {
         gap: 4,
         alignItems: "center",
         ref: rootRef,
+        className: clsx(focusRingStatic(), consumerClassName),
+        style: consumerStyle,
         "data-testid": dataTestId,
         "data-dtrum-mask": dataDtrumMask,
         "data-dtrum-allow": dataDtrumAllow,
+        "aria-label": ariaLabel ?? formatMessageAriaLabel,
+        ...remainingAriaLabelingProps,
+        ...behavioralTrackingProps,
+        ...forwardProps,
         "data-dt-component": COMPONENT_NAME,
-        ...ariaLabelingProps,
-        "aria-label": ariaLabel,
-        className: clsx(consumerClassName, focusRingStatic()),
-        style: consumerStyle,
         children: [
           /* @__PURE__ */ jsx(Flex, { alignItems: "center", gap: 0, children: displayValues }),
           additionalValues.length > 0 && /* @__PURE__ */ jsxs(Menu, { children: [

package/esm/content/avatar-group/AvatarGroup.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/avatar-group/AvatarGroup.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  Children,\n  type ReactNode,\n  useMemo,\n  cloneElement,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { additionalAvatarWrapperCSS } from './AvatarGroup.sty.js';\nimport { Item } from './Item.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useRovingFocus } from '../../core/hooks/useRovingFocus.js';\nimport { focusRingStatic } from '../../core/styles/focusRingStatic.sty.js';\nimport { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { isSlot } from '../../core/utils/is-slot.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { Menu } from '../../navigation/menu/Menu.js';\n\nconst COMPONENT_NAME = 'AvatarGroup';\n\n/**\n * Accepted properties for AvatarGroup\n * @public\n */\nexport type AvatarGroupProps = WithChildren &\n  AriaLabelingProps &\n  StylingProps &\n  DataTestId &\n  MaskingProps;\n\nconst MAX_AVATARGROUP_ITEMS = 5;\n\n/**\n * AvatarGroup component\n */\nconst RootAvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      ...remainingProps\n    }: AvatarGroupProps = props;\n    const ariaLabelingProps = useAriaLabelingProps(remainingProps);\n    const intl = useIntl();\n\n    const { containerRef: rovingContainerRef } = useRovingFocus<HTMLDivElement>(\n      {\n        initialIndex: undefined,\n        direction: 'horizontal',\n        focusableChildrenSelector: '.rovingFocusElement',\n      },\n    );\n\n    const [displayValues, additionalValues] = useMemo(() => {\n      const childrenArray = Children.toArray(children);\n      let displayValues: ReactNode[];\n      const additionalValues: ReactNode[] = [];\n\n      if (childrenArray.length > MAX_AVATARGROUP_ITEMS) {\n        displayValues = childrenArray.splice(0, MAX_AVATARGROUP_ITEMS);\n        for (let i = 0; i < childrenArray.length; i++) {\n          const child = childrenArray[i];\n          if (isSlot(child, Item)) {\n            additionalValues.push(\n              cloneElement(\n                <Item\n                  abbreviation={child.props.abbreviation}\n                  tooltipText={child.props.tooltipText}\n                />,\n                {\n                  ...child.props,\n                  key: i,\n                  isCollapsed: true,\n                },\n              ),\n            );\n          }\n        }\n      } else {\n        displayValues = childrenArray;\n      }\n\n      return [displayValues, additionalValues];\n    }, [children]);\n\n    const rootRef = useMergeRefs([forwardedRef, rovingContainerRef]);\n\n    const formatMessageAriaLabel = intl.formatMessage(\n      {\n        id: '4ER0rfN8lI3HtaFd',\n        defaultMessage:\n          'Group of Avatars. {hiddenAvatars} hidden, {totalAvatars} total users',\n        description: 'Label for the collapsed Avatars.',\n      },\n      {\n        hiddenAvatars: additionalValues.length,\n        totalAvatars: additionalValues.length + displayValues.length,\n      },\n    );\n\n    const ariaLabel = ariaLabelingProps['aria-label'] ?? formatMessageAriaLabel;\n\n    return displayValues.length ? (\n      <Flex\n        gap={4}\n        alignItems=\"center\"\n        ref={rootRef}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        data-dt-component={COMPONENT_NAME}\n        {...ariaLabelingProps}\n        aria-label={ariaLabel}\n        className={clsx(consumerClassName, focusRingStatic())}\n        style={consumerStyle}\n      >\n        <Flex alignItems=\"center\" gap={0}>\n          {displayValues}\n        </Flex>\n\n        {additionalValues.length > 0 && (\n          <Menu>\n            <Menu.Trigger>\n              <Button\n                size=\"condensed\"\n                variant=\"emphasized\"\n                className={clsx(\n                  'rovingFocusElement',\n                  consumerClassName,\n                  additionalAvatarWrapperCSS,\n                )}\n              >\n                +{additionalValues.length}\n              </Button>\n            </Menu.Trigger>\n            <Menu.Content\n              data-dtrum-mask={dataDtrumMask}\n              data-dtrum-allow={dataDtrumAllow}\n            >\n              {additionalValues}\n            </Menu.Content>\n          </Menu>\n        )}\n      </Flex>\n    ) : null;\n  },\n);\n\n(\n  RootAvatarGroup as typeof RootAvatarGroup & { displayName: string }\n).displayName = COMPONENT_NAME;\n\n/**\n * The `Avatar` component can be used as a visual representation of multiple users.\n * @public\n */\nexport const AvatarGroup = Object.assign(RootAvatarGroup, {\n  Item,\n});\n"],
-  "mappings": "AA6EgB,cA0DF,YA1DE;AA7EhB,OAAO,UAAU;AACjB;AAAA,EACE;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,OACK;AACP,SAAS,eAAe;AAExB,SAAS,kCAAkC;AAC3C,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,SAAS,4BAA4B;AACrC,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAC/B,SAAS,uBAAuB;AAMhC,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,YAAY;AAErB,MAAM,iBAAiB;AAYvB,MAAM,wBAAwB;AAK9B,MAAM,kBAAkB;AAAA,EACtB,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAe;AAAA,MACf,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,GAAG;AAAA,IACL,IAAsB;AACtB,UAAM,oBAAoB,qBAAqB,cAAc;AAC7D,UAAM,OAAO,QAAQ;AAErB,UAAM,EAAE,cAAc,mBAAmB,IAAI;AAAA,MAC3C;AAAA,QACE,cAAc;AAAA,QACd,WAAW;AAAA,QACX,2BAA2B;AAAA,MAC7B;AAAA,IACF;AAEA,UAAM,CAAC,eAAe,gBAAgB,IAAI,QAAQ,MAAM;AACtD,YAAM,gBAAgB,SAAS,QAAQ,QAAQ;AAC/C,UAAIA;AACJ,YAAMC,oBAAgC,CAAC;AAEvC,UAAI,cAAc,SAAS,uBAAuB;AAChD,QAAAD,iBAAgB,cAAc,OAAO,GAAG,qBAAqB;AAC7D,iBAAS,IAAI,GAAG,IAAI,cAAc,QAAQ,KAAK;AAC7C,gBAAM,QAAQ,cAAc,CAAC;AAC7B,cAAI,OAAO,OAAO,IAAI,GAAG;AACvB,YAAAC,kBAAiB;AAAA,cACf;AAAA,gBACE;AAAA,kBAAC;AAAA;AAAA,oBACC,cAAc,MAAM,MAAM;AAAA,oBAC1B,aAAa,MAAM,MAAM;AAAA;AAAA,gBAC3B;AAAA,gBACA;AAAA,kBACE,GAAG,MAAM;AAAA,kBACT,KAAK;AAAA,kBACL,aAAa;AAAA,gBACf;AAAA,cACF;AAAA,YACF;AAAA,UACF;AAAA,QACF;AAAA,MACF,OAAO;AACL,QAAAD,iBAAgB;AAAA,MAClB;AAEA,aAAO,CAACA,gBAAeC,iBAAgB;AAAA,IACzC,GAAG,CAAC,QAAQ,CAAC;AAEb,UAAM,UAAU,aAAa,CAAC,cAAc,kBAAkB,CAAC;AAE/D,UAAM,yBAAyB,KAAK;AAAA,MAClC;AAAA,QACE,IAAI;AAAA,QACJ,gBACE;AAAA,QACF,aAAa;AAAA,MACf;AAAA,MACA;AAAA,QACE,eAAe,iBAAiB;AAAA,QAChC,cAAc,iBAAiB,SAAS,cAAc;AAAA,MACxD;AAAA,IACF;AAEA,UAAM,YAAY,kBAAkB,YAAY,KAAK;AAErD,WAAO,cAAc,SACnB;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,YAAW;AAAA,QACX,KAAK;AAAA,QACL,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB,qBAAmB;AAAA,QAClB,GAAG;AAAA,QACJ,cAAY;AAAA,QACZ,WAAW,KAAK,mBAAmB,gBAAgB,CAAC;AAAA,QACpD,OAAO;AAAA,QAEP;AAAA,8BAAC,QAAK,YAAW,UAAS,KAAK,GAC5B,yBACH;AAAA,UAEC,iBAAiB,SAAS,KACzB,qBAAC,QACC;AAAA,gCAAC,KAAK,SAAL,EACC;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,SAAQ;AAAA,gBACR,WAAW;AAAA,kBACT;AAAA,kBACA;AAAA,kBACA;AAAA,gBACF;AAAA,gBACD;AAAA;AAAA,kBACG,iBAAiB;AAAA;AAAA;AAAA,YACrB,GACF;AAAA,YACA;AAAA,cAAC,KAAK;AAAA,cAAL;AAAA,gBACC,mBAAiB;AAAA,gBACjB,oBAAkB;AAAA,gBAEjB;AAAA;AAAA,YACH;AAAA,aACF;AAAA;AAAA;AAAA,IAEJ,IACE;AAAA,EACN;AACF;AAGE,gBACA,cAAc;AAMT,MAAM,cAAc,OAAO,OAAO,iBAAiB;AAAA,EACxD;AACF,CAAC;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  Children,\n  type ReactNode,\n  useMemo,\n  cloneElement,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { additionalAvatarWrapperCSS } from './AvatarGroup.sty.js';\nimport { Item } from './Item.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useRovingFocus } from '../../core/hooks/useRovingFocus.js';\nimport { useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport { focusRingStatic } from '../../core/styles/focusRingStatic.sty.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 { isSlot } from '../../core/utils/is-slot.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { Menu } from '../../navigation/menu/Menu.js';\n\nconst COMPONENT_NAME = 'AvatarGroup';\n\n/**\n * Accepted properties for AvatarGroup\n * @public\n */\nexport type AvatarGroupProps = WithChildren &\n  AriaLabelingProps &\n  StylingProps &\n  DataTestId &\n  MaskingProps &\n  BehaviorTrackingProps;\n\nconst MAX_AVATARGROUP_ITEMS = 5;\n\n/**\n * AvatarGroup component\n */\nconst RootAvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      ...remainingProps\n    }: AvatarGroupProps = props;\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n    const intl = useIntl();\n    const ariaLabelingProps = useAriaLabelingProps(restProps);\n    const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);\n    const { 'aria-label': ariaLabel, ...remainingAriaLabelingProps } =\n      ariaLabelingProps;\n\n    const { containerRef: rovingContainerRef } = useRovingFocus<HTMLDivElement>(\n      {\n        initialIndex: undefined,\n        direction: 'horizontal',\n        focusableChildrenSelector: '.rovingFocusElement',\n      },\n    );\n\n    const [displayValues, additionalValues] = useMemo(() => {\n      const childrenArray = Children.toArray(children);\n      let displayValues: ReactNode[];\n      const additionalValues: ReactNode[] = [];\n\n      if (childrenArray.length > MAX_AVATARGROUP_ITEMS) {\n        displayValues = childrenArray.splice(0, MAX_AVATARGROUP_ITEMS);\n        for (let i = 0; i < childrenArray.length; i++) {\n          const child = childrenArray[i];\n          if (isSlot(child, Item)) {\n            additionalValues.push(\n              cloneElement(\n                <Item\n                  abbreviation={child.props.abbreviation}\n                  tooltipText={child.props.tooltipText}\n                />,\n                {\n                  ...child.props,\n                  key: i,\n                  isCollapsed: true,\n                },\n              ),\n            );\n          }\n        }\n      } else {\n        displayValues = childrenArray;\n      }\n\n      return [displayValues, additionalValues];\n    }, [children]);\n\n    const rootRef = useMergeRefs([forwardedRef, rovingContainerRef]);\n\n    const formatMessageAriaLabel = intl.formatMessage(\n      {\n        id: '4ER0rfN8lI3HtaFd',\n        defaultMessage:\n          'Group of Avatars. {hiddenAvatars} hidden, {totalAvatars} total users',\n        description: 'Label for the collapsed Avatars.',\n      },\n      {\n        hiddenAvatars: additionalValues.length,\n        totalAvatars: additionalValues.length + displayValues.length,\n      },\n    );\n\n    return displayValues.length ? (\n      <Flex\n        gap={4}\n        alignItems=\"center\"\n        ref={rootRef}\n        className={clsx(focusRingStatic(), consumerClassName)}\n        style={consumerStyle}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        aria-label={ariaLabel ?? formatMessageAriaLabel}\n        {...remainingAriaLabelingProps}\n        {...behavioralTrackingProps}\n        {...forwardProps}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <Flex alignItems=\"center\" gap={0}>\n          {displayValues}\n        </Flex>\n\n        {additionalValues.length > 0 && (\n          <Menu>\n            <Menu.Trigger>\n              <Button\n                size=\"condensed\"\n                variant=\"emphasized\"\n                className={clsx(\n                  'rovingFocusElement',\n                  consumerClassName,\n                  additionalAvatarWrapperCSS,\n                )}\n              >\n                +{additionalValues.length}\n              </Button>\n            </Menu.Trigger>\n            <Menu.Content\n              data-dtrum-mask={dataDtrumMask}\n              data-dtrum-allow={dataDtrumAllow}\n            >\n              {additionalValues}\n            </Menu.Content>\n          </Menu>\n        )}\n      </Flex>\n    ) : null;\n  },\n);\n\n(\n  RootAvatarGroup as typeof RootAvatarGroup & { displayName: string }\n).displayName = COMPONENT_NAME;\n\n/**\n * The `Avatar` component can be used as a visual representation of multiple users.\n * @public\n */\nexport const AvatarGroup = Object.assign(RootAvatarGroup, {\n  Item,\n});\n"],
+  "mappings": "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",
   "names": ["displayValues", "additionalValues"]
 }

package/esm/content/avatar-group/AvatarGroup.sty.js

@@ -1,6 +1,6 @@
 import "./AvatarGroup.css";
-var additionalAvatarWrapperCSS = "_129un530-3-0-1";
-var avatarGroupItemWrapperCSS = "_129un531-3-0-1";
+var additionalAvatarWrapperCSS = "_129un530-3-1-0";
+var avatarGroupItemWrapperCSS = "_129un531-3-1-0";
 export {
   additionalAvatarWrapperCSS,
   avatarGroupItemWrapperCSS

package/esm/content/avatar-group/AvatarGroup.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/avatar-group/AvatarGroup.css.ts"],
-  "sourcesContent": ["import './AvatarGroup.css';\nexport var additionalAvatarWrapperCSS = '_129un530-3-0-1';\nexport var avatarGroupItemWrapperCSS = '_129un531-3-0-1';"],
+  "sourcesContent": ["import './AvatarGroup.css';\nexport var additionalAvatarWrapperCSS = '_129un530-3-1-0';\nexport var avatarGroupItemWrapperCSS = '_129un531-3-1-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,6BAA6B;AACjC,IAAI,4BAA4B;",
   "names": []
 }

package/esm/content/avatar-group/Item.js

@@ -70,7 +70,7 @@ const Item = /* @__PURE__ */ forwardRef(
       Menu.Item,
       {
         "data-testid": dataTestId,
-        onSelect: () => null,
+        onSelect: (() => null),
         className: clsx("rovingFocusElement", consumerClassName),
         as,
         disabled,

package/esm/content/avatar-group/Item.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../src/content/avatar-group/Item.tsx"],
   "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type ReactEventHandler,\n  type ReactNode,\n  forwardRef,\n  ElementType,\n  type ReactElement,\n} from 'react';\n\nimport { avatarGroupItemWrapperCSS } from './AvatarGroup.sty.js';\nimport type { PolymorphicComponentProps } from '../../core/types/polymorph.js';\nimport { Menu } from '../../navigation/menu/Menu.js';\nimport { Tooltip } from '../../overlays/tooltip/Tooltip.js';\nimport type { AvatarOwnProps } from '../avatar/Avatar.js';\nimport { Avatar } from '../avatar/Avatar.js';\n\n//#region Typings\n/**\n * Accepted properties for the Avatar Item\n * @public\n */\nexport interface AvatarGroupItemOwnProps extends AvatarOwnProps {\n  /**\n   * The text that is shown in the tooltip when hovering over an AvatarGroup.Item.\n   */\n  tooltipText: ReactNode;\n}\n\n// Merge own props with others inherited from the underlying element type\n/**\n * @public\n */\nexport type AvatarGroupItemProps<E extends ElementType> =\n  PolymorphicComponentProps<E, AvatarGroupItemOwnProps>;\n\n//#endregion\n\n/**\n * AvatarGroup Item component\n * @public\n */\nexport const Item: <E extends ElementType = 'div'>(\n  props: AvatarGroupItemProps<E>,\n) => ReactElement | null = /* @__PURE__ */ forwardRef(\n  <E extends ElementType>(\n    props: AvatarGroupItemProps<E>,\n    ref: typeof props.ref,\n  ) => {\n    const {\n      size = 'default',\n      abbreviation,\n      disabled = false,\n      tooltipText,\n      as,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      ...remainingProps\n    }: AvatarGroupItemProps<E> = props;\n    const isCollapsed = remainingProps.isCollapsed;\n\n    return !isCollapsed ? (\n      <div\n        className={clsx(consumerClassName, avatarGroupItemWrapperCSS)}\n        style={consumerStyle}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n      >\n        <Tooltip\n          text={tooltipText}\n          fallbackPlacements={[\n            'top',\n            'bottom',\n            'top-start',\n            'top-end',\n            'bottom-start',\n            'bottom-end',\n            'right',\n            'left',\n            'right-start',\n            'right-end',\n            'left-start',\n            'left-end',\n          ]}\n          data-dtrum-mask={dataDtrumMask}\n          data-dtrum-allow={dataDtrumAllow}\n        >\n          <Avatar\n            abbreviation={abbreviation}\n            ref={ref}\n            size={size}\n            as={as as ElementType}\n            className=\"rovingFocusElement\"\n            disabled={disabled}\n            {...remainingProps}\n          />\n        </Tooltip>\n      </div>\n    ) : (\n      <Menu.Item\n        data-testid={dataTestId}\n        onSelect={(() => null) as ReactEventHandler}\n        className={clsx('rovingFocusElement', consumerClassName)}\n        as={as as ElementType}\n        disabled={disabled}\n        style={consumerStyle}\n        {...remainingProps}\n      >\n        <Avatar abbreviation={abbreviation} size=\"small\" disabled={disabled}>\n          <Avatar.Label>{tooltipText}</Avatar.Label>\n        </Avatar>\n      </Menu.Item>\n    );\n  },\n);\n\n(Item as typeof Item & { displayName: string }).displayName =\n  'AvatarGroup.Item';\n"],
-  "mappings": "AA0FU;AA1FV,OAAO,UAAU;AACjB;AAAA,EAGE;AAAA,OAGK;AAEP,SAAS,iCAAiC;AAE1C,SAAS,YAAY;AACrB,SAAS,eAAe;AAExB,SAAS,cAAc;AA2BhB,MAAM,OAE8B;AAAA,EACzC,CACE,OACA,QACG;AACH,UAAM;AAAA,MACJ,OAAO;AAAA,MACP;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAe;AAAA,MACf,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,GAAG;AAAA,IACL,IAA6B;AAC7B,UAAM,cAAc,eAAe;AAEnC,WAAO,CAAC,cACN;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,KAAK,mBAAmB,yBAAyB;AAAA,QAC5D,OAAO;AAAA,QACP,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAElB;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN,oBAAoB;AAAA,cAClB;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,YACF;AAAA,YACA,mBAAiB;AAAA,YACjB,oBAAkB;AAAA,YAElB;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA,WAAU;AAAA,gBACV;AAAA,gBACC,GAAG;AAAA;AAAA,YACN;AAAA;AAAA,QACF;AAAA;AAAA,IACF,IAEA;AAAA,MAAC,KAAK;AAAA,MAAL;AAAA,QACC,eAAa;AAAA,QACb,UAAW,MAAM;AAAA,QACjB,WAAW,KAAK,sBAAsB,iBAAiB;AAAA,QACvD;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACN,GAAG;AAAA,QAEJ,8BAAC,UAAO,cAA4B,MAAK,SAAQ,UAC/C,8BAAC,OAAO,OAAP,EAAc,uBAAY,GAC7B;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEC,KAA+C,cAC9C;",
+  "mappings": "AA0FU;AA1FV,OAAO,UAAU;AACjB;AAAA,EAGE;AAAA,OAGK;AAEP,SAAS,iCAAiC;AAE1C,SAAS,YAAY;AACrB,SAAS,eAAe;AAExB,SAAS,cAAc;AA2BhB,MAAM,OAE8B;AAAA,EACzC,CACE,OACA,QACG;AACH,UAAM;AAAA,MACJ,OAAO;AAAA,MACP;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAe;AAAA,MACf,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,GAAG;AAAA,IACL,IAA6B;AAC7B,UAAM,cAAc,eAAe;AAEnC,WAAO,CAAC,cACN;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,KAAK,mBAAmB,yBAAyB;AAAA,QAC5D,OAAO;AAAA,QACP,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAElB;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN,oBAAoB;AAAA,cAClB;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,YACF;AAAA,YACA,mBAAiB;AAAA,YACjB,oBAAkB;AAAA,YAElB;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA,WAAU;AAAA,gBACV;AAAA,gBACC,GAAG;AAAA;AAAA,YACN;AAAA;AAAA,QACF;AAAA;AAAA,IACF,IAEA;AAAA,MAAC,KAAK;AAAA,MAAL;AAAA,QACC,eAAa;AAAA,QACb,WAAW,MAAM;AAAA,QACjB,WAAW,KAAK,sBAAsB,iBAAiB;AAAA,QACvD;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACN,GAAG;AAAA,QAEJ,8BAAC,UAAO,cAA4B,MAAK,SAAQ,UAC/C,8BAAC,OAAO,OAAP,EAAc,uBAAY,GAC7B;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEC,KAA+C,cAC9C;",
   "names": []
 }