feat: add borderStyle to ChatBubble style API

pages/chat-bubble/style-permutations.page.tsx

@@ -3,15 +3,26 @@
 import { createPermutations, PermutationsView } from "@cloudscape-design/build-tools/lib/dev-pages-utils";
 
 import { ChatBubble, ChatBubbleProps } from "../../lib/components";
+import { ChatBubbleInternalStyle } from "../../lib/components/chat-bubble/internal-interfaces";
 import { Page } from "../app/templates";
 import { Actions, ChatBubbleAvatarGenAI, ChatBubbleAvatarUser, ChatContainer } from "./util-components";
 
-const styles = [
+// `_borderStyle` is internal (not in the public ChatBubbleProps.Style): opt in via
+// ChatBubbleInternalStyle.
+const styles: ChatBubbleInternalStyle[] = [
   {
     bubble: { borderColor: "light-dark(#e74c3c, #ff6b6b)", borderWidth: "2px", borderRadius: "20px" },
   },
   { bubble: { fontSize: "18px", fontWeight: "bold", color: "light-dark(#8e44ad, #bb86fc)" } },
   { bubble: { boxShadow: "10px 5px 5px red" } },
+  {
+    bubble: {
+      borderColor: "light-dark(#6c757d, #adb5bd)",
+      borderWidth: "2px",
+      _borderStyle: "dashed",
+      borderRadius: "12px",
+    },
+  },
   {
     bubble: {
       background: "light-dark(#fff3cd, #3d3d00)",

src/chat-bubble/__tests__/__snapshots__/style.test.ts.snap

@@ -43,7 +43,7 @@ exports[`getBubbleStyle > handles all possible style configurations 3`] = `
   "background": "#f0f0f0",
   "borderColor": "#ccc",
   "borderRadius": "8px",
-  "borderStyle": "solid",
+  "borderStyle": "dashed",
   "borderWidth": "2px",
   "boxShadow": "0 4px 8px rgba(0,0,0,0.2)",
   "color": "#333",

src/chat-bubble/__tests__/chat-bubble.test.tsx

@@ -10,6 +10,7 @@ import createWrapper from "@cloudscape-design/components/test-utils/dom";
 import "../../../lib/components/test-utils/dom";
 import { Avatar } from "../../../lib/components";
 import ChatBubble, { ChatBubbleProps } from "../../../lib/components/chat-bubble";
+import { ChatBubbleInternalStyle } from "../../../lib/components/chat-bubble/internal-interfaces";
 
 import styles from "../../../lib/components/chat-bubble/styles.selectors.js";
 
@@ -19,6 +20,11 @@ function renderChatBubble(props: ChatBubbleProps) {
   return createWrapper(container).findChatBubble()!;
 }
 
+/** Returns the message-area element — the DOM node that receives getBubbleStyle(). */
+function getBubbleElement(wrapper: ReturnType<typeof renderChatBubble>) {
+  return wrapper.findByClassName(styles["message-area"])!.getElement();
+}
+
 describe("Chat bubble", () => {
   test("Can access slots and elements inside the slots", () => {
     const wrapper = renderChatBubble({
@@ -102,4 +108,36 @@ describe("Chat bubble", () => {
     expect(avatar).toHaveClass(styles.hide);
     expect(avatar!.inert).toBe(true);
   });
+
+  // ── style API — DOM-level assertions ─────────────────────────────────────
+  // Mirror the Avatar "style api" test: render the component and assert that
+  // CSS properties reach the actual DOM element via getComputedStyle.
+
+  test("style api — borderStyle reaches the bubble element", () => {
+    const wrapper = renderChatBubble({
+      type: "incoming",
+      avatar: <Avatar ariaLabel="Avatar" />,
+      children: "Test content",
+      ariaLabel: "Chat bubble",
+      style: {
+        bubble: { _borderStyle: "dashed", borderWidth: "2px", borderColor: "#ff0000" },
+      } as ChatBubbleInternalStyle,
+    });
+    const el = getBubbleElement(wrapper);
+    expect(getComputedStyle(el).getPropertyValue("border-style")).toBe("dashed");
+    expect(getComputedStyle(el).getPropertyValue("border-width")).toBe("2px");
+  });
+
+  test("style api — borderWidth alone defaults border-style to 'solid' on the DOM element", () => {
+    const wrapper = renderChatBubble({
+      type: "outgoing",
+      avatar: <Avatar ariaLabel="Avatar" />,
+      children: "Test content",
+      ariaLabel: "Chat bubble",
+      style: { bubble: { borderWidth: "3px" } },
+    });
+    const el = getBubbleElement(wrapper);
+    expect(getComputedStyle(el).getPropertyValue("border-style")).toBe("solid");
+    expect(getComputedStyle(el).getPropertyValue("border-width")).toBe("3px");
+  });
 });

src/chat-bubble/__tests__/style.test.ts

@@ -2,20 +2,22 @@
 // SPDX-License-Identifier: Apache-2.0
 import { afterEach, describe, expect, test, vi } from "vitest";
 
+import { ChatBubbleInternalStyle } from "../internal-interfaces";
 import { getBubbleStyle, getChatBubbleRootStyle } from "../style";
 
 vi.mock("../internal/environment", () => ({
   SYSTEM: "core",
 }));
 
-const allStyles = {
+const allStyles: ChatBubbleInternalStyle = {
   root: {
     columnGap: "10px",
   },
   bubble: {
     background: "#f0f0f0",
     borderColor: "#ccc",
     borderRadius: "8px",
+    _borderStyle: "dashed",
     borderWidth: "2px",
     boxShadow: "0 4px 8px rgba(0,0,0,0.2)",
     color: "#333",
@@ -70,6 +72,48 @@ describe("getBubbleStyle", () => {
     expect(getBubbleStyle(allStyles)).toMatchSnapshot();
   });
 
+  // ── borderStyle fallback — three-branch matrix ────────────────────────────
+
+  test("borderStyle: explicit value wins over solid fallback (with borderWidth)", () => {
+    // Branch (a): _borderStyle provided — ?? left-hand side is truthy, used verbatim
+    expect(
+      getBubbleStyle({ bubble: { borderWidth: "2px", _borderStyle: "dashed" } } as ChatBubbleInternalStyle).borderStyle,
+    ).toBe("dashed");
+    // Also covers 'none' — must NOT be overridden to 'solid'
+    expect(
+      getBubbleStyle({ bubble: { borderWidth: "2px", _borderStyle: "none" } } as ChatBubbleInternalStyle).borderStyle,
+    ).toBe("none");
+  });
+
+  test("borderStyle: explicit value used without borderWidth", () => {
+    // Branch (a) without borderWidth — borderStyle still emitted
+    expect(getBubbleStyle({ bubble: { _borderStyle: "dotted" } } as ChatBubbleInternalStyle).borderStyle).toBe(
+      "dotted",
+    );
+  });
+
+  test("borderStyle: falls back to 'solid' when borderWidth is set but borderStyle is not (regression guard)", () => {
+    // Branch (b): borderStyle absent, borderWidth present → ?? right-hand side ternary true branch
+    const result = getBubbleStyle({ bubble: { borderWidth: "1px" } });
+    expect(result.borderStyle).toBe("solid");
+    expect(result.borderWidth).toBe("1px");
+  });
+
+  test("borderStyle: undefined when neither borderWidth nor borderStyle is set", () => {
+    // Branch (c): both absent → ?? right-hand side ternary false branch
+    expect(getBubbleStyle({ bubble: { background: "#fff" } }).borderStyle).toBeUndefined();
+  });
+
+  test("borderStyle does not disturb sibling border props", () => {
+    const result = getBubbleStyle({
+      bubble: { borderColor: "#0077cc", borderRadius: "8px", _borderStyle: "dashed", borderWidth: "2px" },
+    } as ChatBubbleInternalStyle);
+    expect(result.borderStyle).toBe("dashed");
+    expect(result.borderColor).toBe("#0077cc");
+    expect(result.borderRadius).toBe("8px");
+    expect(result.borderWidth).toBe("2px");
+  });
+
   test("returns empty object when SYSTEM is not core", async () => {
     vi.resetModules();
     vi.doMock("../internal/environment", () => ({

src/chat-bubble/internal-interfaces.ts

@@ -0,0 +1,14 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { ChatBubbleProps } from "./interfaces";
+
+/**
+ * `ChatBubbleProps.Style` plus the internal `_borderStyle` escape hatch on `bubble`.
+ * Consumers pass it by casting the `style` value to this type.
+ */
+export type ChatBubbleInternalStyle = ChatBubbleProps.Style & {
+  bubble?: NonNullable<ChatBubbleProps.Style["bubble"]> & {
+    /** CSS `border-style`. Defaults to `"solid"` when `borderWidth` is set and this is not. */
+    _borderStyle?: string;
+  };
+};

src/chat-bubble/style.tsx

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 import { SYSTEM } from "../internal/environment";
 import { ChatBubbleProps } from "./interfaces";
+import { ChatBubbleInternalStyle } from "./internal-interfaces";
 
 export function getChatBubbleRootStyle(style: ChatBubbleProps.Style | undefined) {
   if (SYSTEM !== "core") {
@@ -18,11 +19,14 @@ export function getBubbleStyle(style: ChatBubbleProps.Style | undefined) {
     return {};
   }
 
+  // `_borderStyle`: internal escape hatch, not part of the public Style.
+  const internalBubble = (style as ChatBubbleInternalStyle | undefined)?.bubble;
+
   return {
     background: style?.bubble?.background,
     borderColor: style?.bubble?.borderColor,
     borderRadius: style?.bubble?.borderRadius,
-    borderStyle: style?.bubble?.borderWidth ? "solid" : undefined,
+    borderStyle: internalBubble?._borderStyle ?? (style?.bubble?.borderWidth ? "solid" : undefined),
     borderWidth: style?.bubble?.borderWidth,
     boxShadow: style?.bubble?.boxShadow,
     color: style?.bubble?.color,