@carbon/ai-chat-components 0.10.0 → 0.11.0

package/es/components/chat-shell/src/shell.js

@@ -7,11 +7,18 @@
 
 import { __decorate } from 'tslib';
 import { LitElement, nothing, html } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
+import commonStyles from '../../../globals/scss/common.scss.js';
 import styles from './shell.scss.js';
 import { PanelManager } from './panel-manager.js';
 import { WorkspaceManager } from './workspace-manager.js';
+import { CornerManager } from './corner-manager.js';
+import { SlotObserver } from './slot-observer.js';
+import { InitializationManager } from './initialization-manager.js';
+import { ResizeObserverManager } from './resize-observer-manager.js';
+import { AriaAnnouncerManager } from './aria-announcer-manager.js';
 import { carbonElement } from '../../../globals/decorators/carbon-element.js';
+import prefix from '../../../globals/settings.js';
 import './panel.js';
 
 /**
@@ -35,9 +42,10 @@ let CDSAIChatShell = CDSAIChatShell_1 = class CDSAIChatShell extends LitElement
          */
         this.showFrame = false;
         /**
-         * Applies rounded corners to the chat shell
+         * Sets the corner style for all corners. Individual corner-* attributes override this value.
+         * Values: "round" or "square". Defaults to "square".
          */
-        this.roundedCorners = false;
+        this.cornerAll = "square";
         /**
          * Shows the history panel in the chat shell
          */
@@ -67,33 +75,49 @@ let CDSAIChatShell = CDSAIChatShell_1 = class CDSAIChatShell extends LitElement
          */
         this.messagesAriaLabel = "Chat messages";
         /**
-         * Constrains content to a maximum width. When false, input and related
-         * slots will extend to full container width without max-width constraints.
+         * Announcement text for when a panel opens
          */
-        this.contentMaxWidth = true;
+        this.panelOpenedAnnouncement = "Panel opened";
         /**
-         * @internal
+         * Announcement text for when a panel closes
          */
-        this.hasHeaderContent = false;
+        this.panelClosedAnnouncement = "Panel closed";
         /**
-         * @internal
+         * Announcement text for when workspace opens
          */
-        this.hasHeaderAfterContent = false;
+        this.workspaceOpenedAnnouncement = "Workspace opened";
         /**
-         * @internal
+         * Announcement text for when workspace closes
          */
-        this.hasFooterContent = false;
+        this.workspaceClosedAnnouncement = "Workspace closed, returned to chat";
         /**
-         * @internal
+         * Announcement text for when history becomes visible
          */
-        this.hasInputAfterContent = false;
+        this.historyShownAnnouncement = "Conversation history is now visible";
+        /**
+         * Announcement text for when history becomes hidden
+         */
+        this.historyHiddenAnnouncement = "Conversation history is now hidden";
+        /**
+         * Constrains content to a maximum width. When false, input and related
+         * slots will extend to full container width without max-width constraints.
+         */
+        this.contentMaxWidth = false;
         /**
          * @internal
+         * Flag to track if the component is still initializing.
+         * Used to hide content during initial layout calculations to prevent visible thrashing.
          */
-        this.hasInputContent = false;
+        this._isInitializing = true;
         /**
          * @internal
+         * Cached slot content state from SlotObserver
          */
+        this.hasHeaderContent = false;
+        this.hasHeaderAfterContent = false;
+        this.hasFooterContent = false;
+        this.hasInputAfterContent = false;
+        this.hasInputContent = false;
         this.hasInputBeforeContent = false;
         /**
          * @internal
@@ -139,6 +163,70 @@ let CDSAIChatShell = CDSAIChatShell_1 = class CDSAIChatShell extends LitElement
          * @internal
          */
         this.suppressWorkspacePanelCloseAnimation = false;
+        /**
+         * Handles panel open events and announces to screen readers
+         * @internal
+         */
+        this.handlePanelOpen = (event) => {
+            // Only announce for non-workspace panels (workspace has its own announcement)
+            const target = event.target;
+            // Check if the event target is the internal workspace panel
+            // or if it's a child of the internal panel
+            if (target?.hasAttribute("data-internal-panel")) {
+                return;
+            }
+            // Also check if the target is inside an internal panel
+            const closestPanel = target?.closest?.("cds-aichat-panel[data-internal-panel]");
+            if (closestPanel) {
+                return;
+            }
+            this.ariaAnnouncerManager?.announce(this.panelOpenedAnnouncement);
+        };
+        /**
+         * Handles panel close events and announces to screen readers
+         * @internal
+         */
+        this.handlePanelClose = (event) => {
+            // Only announce for non-workspace panels (workspace has its own announcement)
+            const target = event.target;
+            // Check if the event target is the internal workspace panel
+            // or if it's a child of the internal panel
+            if (target?.hasAttribute("data-internal-panel")) {
+                return;
+            }
+            // Also check if the target is inside an internal panel
+            const closestPanel = target?.closest?.("cds-aichat-panel[data-internal-panel]");
+            if (closestPanel) {
+                return;
+            }
+            this.ariaAnnouncerManager?.announce(this.panelClosedAnnouncement);
+        };
+        /**
+         * Handles workspace visibility changes from WorkspaceManager
+         * @internal
+         */
+        this.handleWorkspaceVisibilityChange = (visible, inPanel) => {
+            // Don't announce during initialization
+            if (!this.initializationManager?.isInitializationComplete()) {
+                return;
+            }
+            // For panel mode, syncWorkspacePanelState already handles announcements
+            // Only announce for inline mode changes
+            if (!inPanel) {
+                // Add extra delay to allow button state changes to be announced first
+                // This prevents the workspace announcement from being interrupted
+                if (typeof window !== "undefined") {
+                    window.setTimeout(() => {
+                        if (visible) {
+                            this.ariaAnnouncerManager?.announce(this.workspaceOpenedAnnouncement);
+                        }
+                        else {
+                            this.ariaAnnouncerManager?.announce(this.workspaceClosedAnnouncement);
+                        }
+                    }, 100); // 100ms delay before queuing the announcement (which has its own 250ms delay)
+                }
+            }
+        };
         this.handleWorkspacePanelCloseEnd = () => {
             if (this.workspaceManager?.shouldRenderPanel()) {
                 return;
@@ -148,13 +236,33 @@ let CDSAIChatShell = CDSAIChatShell_1 = class CDSAIChatShell extends LitElement
             this.requestUpdate();
         };
     }
+    /**
+     * Announces workspace opened to screen readers
+     * @internal
+     */
+    announceWorkspaceOpened() {
+        this.ariaAnnouncerManager?.announce(this.workspaceOpenedAnnouncement);
+    }
+    /**
+     * Announces workspace closed to screen readers
+     * @internal
+     */
+    announceWorkspaceClosed() {
+        this.ariaAnnouncerManager?.announce(this.workspaceClosedAnnouncement);
+    }
     getWidgetClasses() {
         const workspaceState = this.workspaceManager?.getState();
+        const hasAnyRoundedCorner = this.cornerAll === "round" ||
+            this.cornerStartStart === "round" ||
+            this.cornerStartEnd === "round" ||
+            this.cornerEndStart === "round" ||
+            this.cornerEndEnd === "round";
         return [
             "shell",
+            this._isInitializing ? "initializing" : "",
             this.aiEnabled ? "ai-theme" : "",
             this.showFrame ? "" : "frameless",
-            this.roundedCorners ? "rounded" : "",
+            hasAnyRoundedCorner ? "rounded" : "",
             this.hasHeaderContent || this.hasHeaderAfterContent
                 ? "has-header-content"
                 : "",
@@ -252,6 +360,7 @@ let CDSAIChatShell = CDSAIChatShell_1 = class CDSAIChatShell extends LitElement
         data-internal-panel
         ?open=${this.workspacePanelOpen}
         full-width
+        no-scroll
         show-chat-header
         body-no-padding
         animation-on-open=${animationOnOpen}
@@ -319,6 +428,17 @@ let CDSAIChatShell = CDSAIChatShell_1 = class CDSAIChatShell extends LitElement
     render() {
         return html `
       <div class=${this.getWidgetClasses()}>
+        <!-- Hidden aria-live regions for screen reader announcements -->
+        <div
+          class="visually-hidden"
+          aria-live="polite"
+          aria-atomic="true"
+        ></div>
+        <div
+          class="visually-hidden"
+          aria-live="polite"
+          aria-atomic="true"
+        ></div>
         <div class="main-chat">
           ${this.renderHeader()}
           <div class="main-content">
@@ -338,118 +458,138 @@ let CDSAIChatShell = CDSAIChatShell_1 = class CDSAIChatShell extends LitElement
     }
     firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties);
-        const panelsSlot = this.renderRoot.querySelector('slot[name="panels"]');
-        if (!panelsSlot) {
-            return;
-        }
         const widgetRoot = this.renderRoot.querySelector(".shell");
         if (!widgetRoot) {
             return;
         }
-        this.panelManager = new PanelManager(panelsSlot, widgetRoot);
-        this.panelManager.connect();
-        this.workspaceManager = new WorkspaceManager(widgetRoot, this, {
-            showWorkspace: this.showWorkspace,
-            showHistory: this.showHistory,
-            workspaceLocation: this.workspaceLocation,
-            roundedCorners: this.roundedCorners,
-        });
-        this.workspaceManager.connect();
-        this.observeHeaderHeight();
-        this.observeInputAndMessagesWidth();
-        this.observeMainContentBodyWidth();
-        this.observeSlotContent();
-        this.observeCssProperties();
-        this.syncWorkspacePanelState();
-    }
-    hasSlotContent(slotName) {
-        const slot = this.renderRoot.querySelector(`slot[name="${slotName}"]`);
-        if (!slot) {
-            return false;
+        // Initialize aria announcer manager
+        const ariaLiveRegions = this.renderRoot.querySelectorAll('[aria-live="polite"]');
+        if (ariaLiveRegions.length >= 2) {
+            this.ariaAnnouncerManager = new AriaAnnouncerManager();
+            this.ariaAnnouncerManager.connect(ariaLiveRegions[0], ariaLiveRegions[1]);
         }
-        return slot.assignedNodes({ flatten: true }).some((node) => {
-            // Check for non-empty text nodes
-            if (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()) {
-                return true;
-            }
-            // Check for element nodes
-            if (node.nodeType === Node.ELEMENT_NODE) {
-                const element = node;
-                return this.hasElementContent(element);
-            }
-            return false;
+        // Listen for panel open/close events
+        this.addEventListener("openend", this.handlePanelOpen);
+        this.addEventListener("closeend", this.handlePanelClose);
+        // Initialize corner manager
+        this.cornerManager = new CornerManager(widgetRoot, {
+            cornerAll: this.cornerAll,
+            cornerStartStart: this.cornerStartStart,
+            cornerStartEnd: this.cornerStartEnd,
+            cornerEndStart: this.cornerEndStart,
+            cornerEndEnd: this.cornerEndEnd,
         });
-    }
-    hasElementContent(element) {
-        // Check if element has child nodes with meaningful content (light DOM)
-        const hasChildContent = Array.from(element.childNodes).some((child) => {
-            if (child.nodeType === Node.TEXT_NODE) {
-                return child.textContent?.trim();
+        // Initialize initialization manager FIRST (before observers that use it)
+        this.initializationManager = new InitializationManager();
+        this.initializationManager.onComplete(() => {
+            this._isInitializing = false;
+            this.requestUpdate();
+            // Enable workspace announcements after initialization is complete
+            this.workspaceManager?.enableAnnouncements();
+        });
+        // Initialize slot observer
+        this.slotObserver = new SlotObserver(this.renderRoot, CDSAIChatShell_1.OBSERVED_SLOTS);
+        this.slotObserver.connect(() => {
+            // Update cached slot state
+            const state = this.slotObserver?.getSlotContentState();
+            this.hasHeaderContent = state?.hasHeaderContent || false;
+            this.hasHeaderAfterContent = state?.hasHeaderAfterContent || false;
+            this.hasFooterContent = state?.hasFooterContent || false;
+            this.hasInputContent = state?.hasInputContent || false;
+            this.hasInputAfterContent = state?.hasInputAfterContent || false;
+            this.hasInputBeforeContent = state?.hasInputBeforeContent || false;
+            // Mark initialization complete
+            this.initializationManager?.markStateSet("hasSlotContent");
+            this.requestUpdate();
+        });
+        // Initialize resize observer manager
+        this.resizeObserverManager = new ResizeObserverManager(this.renderRoot, this);
+        // Observe header height
+        this.resizeObserverManager.observeHeaderHeight((height) => {
+            widgetRoot.style.setProperty("--cds-aichat-header-height", `${height}px`);
+        });
+        // Observe input and messages width
+        this.resizeObserverManager.observeInputAndMessagesWidth(({ isAtMaxWidth }) => {
+            if (this.inputAndMessagesAtMaxWidth !== isAtMaxWidth) {
+                this.inputAndMessagesAtMaxWidth = isAtMaxWidth;
+                this.requestUpdate();
             }
-            if (child.nodeType === Node.ELEMENT_NODE) {
-                const childElement = child;
-                // Check slot elements recursively - they may have assigned content
-                if (childElement.tagName.toLowerCase() === "slot") {
-                    const slotElement = childElement;
-                    const assignedNodes = slotElement.assignedNodes({ flatten: true });
-                    return assignedNodes.some((node) => {
-                        if (node.nodeType === Node.TEXT_NODE) {
-                            return node.textContent?.trim();
-                        }
-                        if (node.nodeType === Node.ELEMENT_NODE) {
-                            return this.hasElementContent(node);
-                        }
-                        return false;
-                    });
+        }, () => {
+            // Initial measurement callback
+            this.initializationManager?.markStateSet("inputAndMessagesAtMaxWidth");
+        });
+        // Observe main content body width
+        this.resizeObserverManager.observeMainContentBodyWidth(this.showHistory, ({ shouldRenderHistory }) => {
+            if (this.shouldRenderHistory !== shouldRenderHistory) {
+                const wasVisible = this.shouldRenderHistory;
+                this.shouldRenderHistory = shouldRenderHistory;
+                // Announce history visibility changes (but not on initial load)
+                if (this.initializationManager?.isInitializationComplete()) {
+                    if (shouldRenderHistory && !wasVisible) {
+                        this.ariaAnnouncerManager?.announce(this.historyShownAnnouncement);
+                    }
+                    else if (!shouldRenderHistory && wasVisible) {
+                        this.ariaAnnouncerManager?.announce(this.historyHiddenAnnouncement);
+                    }
                 }
-                return true;
+                this.requestUpdate();
             }
-            return false;
+        }, () => {
+            // Initial measurement callback
+            this.initializationManager?.markStateSet("shouldRenderHistory");
         });
-        if (hasChildContent) {
-            return true;
-        }
-        // If no light DOM children, check if element has shadow root (Shadow DOM content)
-        if (element.shadowRoot) {
-            return true;
+        // Observe CSS properties
+        this.resizeObserverManager.observeCssProperties(() => {
+            this.requestUpdate();
+        });
+        // Initialize panel manager
+        const panelsSlot = this.renderRoot.querySelector('slot[name="panels"]');
+        if (panelsSlot) {
+            this.panelManager = new PanelManager(panelsSlot, widgetRoot);
+            this.panelManager.connect();
         }
-        // Check text content as fallback
-        const textContent = element.textContent?.trim();
-        return Boolean(textContent);
-    }
-    observeSlotContent() {
-        const updateSlotStates = () => {
-            const previousStates = new Map(CDSAIChatShell_1.OBSERVED_SLOTS.map(({ stateKey }) => [
-                stateKey,
-                this[stateKey],
-            ]));
-            CDSAIChatShell_1.OBSERVED_SLOTS.forEach(({ name, stateKey }) => {
-                this[stateKey] = this.hasSlotContent(name);
-            });
-            const hasChanged = CDSAIChatShell_1.OBSERVED_SLOTS.some(({ stateKey }) => previousStates.get(stateKey) !== this[stateKey]);
-            if (hasChanged) {
-                this.requestUpdate();
-            }
-        };
-        // Initial check
-        updateSlotStates();
-        // Observe slot changes
-        const slots = CDSAIChatShell_1.OBSERVED_SLOTS.map(({ name }) => this.renderRoot.querySelector(`slot[name="${name}"]`)).filter((slot) => slot !== null);
-        slots.forEach((slot) => {
-            slot.addEventListener("slotchange", updateSlotStates);
+        // Initialize workspace manager
+        this.workspaceManager = new WorkspaceManager(widgetRoot, this, {
+            showWorkspace: this.showWorkspace,
+            showHistory: this.showHistory,
+            workspaceLocation: this.workspaceLocation,
+            roundedCorners: this.cornerManager.hasAnyRoundedCorner(),
+        }, {
+            onWorkspaceVisibilityChange: this.handleWorkspaceVisibilityChange,
         });
+        this.workspaceManager.connect();
+        this.syncWorkspacePanelState();
     }
     updated(changedProperties) {
         super.updated(changedProperties);
+        // Update corner manager when corner properties change
+        if (changedProperties.has("cornerAll") ||
+            changedProperties.has("cornerStartStart") ||
+            changedProperties.has("cornerStartEnd") ||
+            changedProperties.has("cornerEndStart") ||
+            changedProperties.has("cornerEndEnd")) {
+            this.cornerManager?.updateCorners({
+                cornerAll: this.cornerAll,
+                cornerStartStart: this.cornerStartStart,
+                cornerStartEnd: this.cornerStartEnd,
+                cornerEndStart: this.cornerEndStart,
+                cornerEndEnd: this.cornerEndEnd,
+            });
+        }
+        // Update workspace manager when relevant properties change
         if (changedProperties.has("showWorkspace") ||
             changedProperties.has("showHistory") ||
             changedProperties.has("workspaceLocation") ||
-            changedProperties.has("roundedCorners")) {
+            changedProperties.has("cornerAll") ||
+            changedProperties.has("cornerStartStart") ||
+            changedProperties.has("cornerStartEnd") ||
+            changedProperties.has("cornerEndStart") ||
+            changedProperties.has("cornerEndEnd")) {
             this.workspaceManager?.updateConfig({
                 showWorkspace: this.showWorkspace,
                 showHistory: this.showHistory,
                 workspaceLocation: this.workspaceLocation,
-                roundedCorners: this.roundedCorners,
+                roundedCorners: this.cornerManager?.hasAnyRoundedCorner() ?? false,
             });
         }
         this.syncWorkspacePanelState();
@@ -458,183 +598,15 @@ let CDSAIChatShell = CDSAIChatShell_1 = class CDSAIChatShell extends LitElement
     disconnectedCallback() {
         this.panelManager?.disconnect();
         this.workspaceManager?.disconnect();
-        this.headerResizeObserver?.disconnect();
-        this.inputAndMessagesResizeObserver?.disconnect();
-        this.mainContentBodyResizeObserver?.disconnect();
-        this.cssPropertyObserver?.disconnect();
+        this.slotObserver?.disconnect();
+        this.resizeObserverManager?.disconnect();
+        this.ariaAnnouncerManager?.disconnect();
         this.cancelWorkspacePanelOpenSchedule();
+        // Clean up event listeners
+        this.removeEventListener("openend", this.handlePanelOpen);
+        this.removeEventListener("closeend", this.handlePanelClose);
         super.disconnectedCallback();
     }
-    observeInputAndMessagesWidth() {
-        // We need to observe the :host width, not .input-and-messages width
-        // When :host < max-width, .input-and-messages fills the container and needs rounded corners
-        if (typeof ResizeObserver === "undefined") {
-            return;
-        }
-        const messagesMaxWidth = this.getMessagesMaxWidth();
-        const updateAtMaxWidth = (hostWidth) => {
-            // When host is less than max-width, input-and-messages is "at max width" (filling container)
-            const isAtMaxWidth = hostWidth < messagesMaxWidth;
-            if (this.inputAndMessagesAtMaxWidth !== isAtMaxWidth) {
-                this.inputAndMessagesAtMaxWidth = isAtMaxWidth;
-                this.requestUpdate();
-            }
-        };
-        const measure = () => {
-            const rect = this.getBoundingClientRect();
-            updateAtMaxWidth(rect.width);
-        };
-        this.inputAndMessagesResizeObserver = new ResizeObserver((entries) => {
-            // Use requestAnimationFrame to avoid ResizeObserver loop errors
-            requestAnimationFrame(() => {
-                for (const entry of entries) {
-                    if (entry.target !== this) {
-                        continue;
-                    }
-                    const borderBoxSize = Array.isArray(entry.borderBoxSize)
-                        ? entry.borderBoxSize[0]
-                        : entry.borderBoxSize;
-                    if (borderBoxSize?.inlineSize) {
-                        updateAtMaxWidth(borderBoxSize.inlineSize);
-                    }
-                    else {
-                        updateAtMaxWidth(entry.contentRect.width);
-                    }
-                }
-            });
-        });
-        this.inputAndMessagesResizeObserver.observe(this);
-        measure();
-    }
-    observeMainContentBodyWidth() {
-        if (typeof ResizeObserver === "undefined" || !this.showHistory) {
-            return;
-        }
-        const mainContentBody = this.renderRoot.querySelector(".main-content-body");
-        if (!mainContentBody) {
-            return;
-        }
-        const updateHistoryVisibility = (width) => {
-            const messagesMinWidth = this.getCssLengthFromProperty("--cds-aichat-messages-min-width", 320);
-            const historyWidth = this.getCssLengthFromProperty("--cds-aichat-history-width", 320);
-            const requiredWidth = messagesMinWidth + historyWidth;
-            const newShouldRenderHistory = width >= requiredWidth;
-            if (this.shouldRenderHistory !== newShouldRenderHistory) {
-                this.shouldRenderHistory = newShouldRenderHistory;
-                this.requestUpdate();
-            }
-        };
-        this.mainContentBodyResizeObserver = new ResizeObserver((entries) => {
-            // Use requestAnimationFrame to avoid ResizeObserver loop errors
-            requestAnimationFrame(() => {
-                for (const entry of entries) {
-                    if (entry.target !== mainContentBody) {
-                        continue;
-                    }
-                    const borderBoxSize = Array.isArray(entry.borderBoxSize)
-                        ? entry.borderBoxSize[0]
-                        : entry.borderBoxSize;
-                    if (borderBoxSize?.inlineSize) {
-                        updateHistoryVisibility(borderBoxSize.inlineSize);
-                    }
-                    else {
-                        updateHistoryVisibility(entry.contentRect.width);
-                    }
-                }
-            });
-        });
-        this.mainContentBodyResizeObserver.observe(mainContentBody);
-        // Initial measurement
-        const rect = mainContentBody.getBoundingClientRect();
-        updateHistoryVisibility(rect.width);
-    }
-    getCssLengthFromProperty(propertyName, fallback) {
-        const value = getComputedStyle(this).getPropertyValue(propertyName).trim();
-        if (!value) {
-            return fallback;
-        }
-        const parsed = Number.parseFloat(value);
-        return Number.isNaN(parsed) ? fallback : parsed;
-    }
-    getMessagesMaxWidth() {
-        const value = getComputedStyle(this)
-            .getPropertyValue("--cds-aichat-messages-max-width")
-            .trim();
-        if (!value) {
-            return 672; // Default fallback from SCSS
-        }
-        const parsed = Number.parseFloat(value);
-        return Number.isNaN(parsed) ? 672 : parsed;
-    }
-    observeHeaderHeight() {
-        const headerWrapper = this.renderRoot.querySelector(".header-with-header-after");
-        if (!headerWrapper || typeof ResizeObserver === "undefined") {
-            return;
-        }
-        const updateHeight = (height) => {
-            this.style.setProperty("--cds-aichat-header-height", `${height}px`);
-        };
-        const measure = () => {
-            const rect = headerWrapper.getBoundingClientRect();
-            updateHeight(rect.height);
-        };
-        this.headerResizeObserver = new ResizeObserver((entries) => {
-            // Use requestAnimationFrame to avoid ResizeObserver loop errors
-            requestAnimationFrame(() => {
-                for (const entry of entries) {
-                    if (entry.target !== headerWrapper) {
-                        continue;
-                    }
-                    const borderBoxSize = Array.isArray(entry.borderBoxSize)
-                        ? entry.borderBoxSize[0]
-                        : entry.borderBoxSize;
-                    if (borderBoxSize?.blockSize) {
-                        updateHeight(borderBoxSize.blockSize);
-                    }
-                    else {
-                        updateHeight(entry.contentRect.height);
-                    }
-                }
-            });
-        });
-        this.headerResizeObserver.observe(headerWrapper);
-        measure();
-    }
-    /**
-     * Observe CSS custom properties that affect messages max width.
-     * When --cds-aichat-messages-max-width changes, recalculate the at-max-width state.
-     */
-    observeCssProperties() {
-        if (typeof MutationObserver === "undefined") {
-            return;
-        }
-        // Store initial value
-        this.lastKnownMessagesMaxWidth = this.getMessagesMaxWidth();
-        // Watch for style attribute changes on the host element
-        this.cssPropertyObserver = new MutationObserver(() => {
-            this.checkMessagesMaxWidthChange();
-        });
-        this.cssPropertyObserver.observe(this, {
-            attributes: true,
-            attributeFilter: ["style"],
-        });
-    }
-    /**
-     * Check if --cds-aichat-messages-max-width has changed and trigger recalculation.
-     */
-    checkMessagesMaxWidthChange() {
-        const currentMaxWidth = this.getMessagesMaxWidth();
-        if (currentMaxWidth !== this.lastKnownMessagesMaxWidth) {
-            this.lastKnownMessagesMaxWidth = currentMaxWidth;
-            // Recalculate the at-max-width state with the new max width
-            const rect = this.getBoundingClientRect();
-            const isAtMaxWidth = rect.width < currentMaxWidth;
-            if (this.inputAndMessagesAtMaxWidth !== isAtMaxWidth) {
-                this.inputAndMessagesAtMaxWidth = isAtMaxWidth;
-                this.requestUpdate();
-            }
-        }
-    }
     syncWorkspacePanelState() {
         const shouldRenderPanel = this.workspaceManager?.shouldRenderPanel() ?? false;
         const workspaceState = this.workspaceManager?.getState();
@@ -652,20 +624,25 @@ let CDSAIChatShell = CDSAIChatShell_1 = class CDSAIChatShell extends LitElement
             this.requestUpdate();
             // Schedule opening after the panel is rendered
             this.scheduleWorkspacePanelOpen();
+            // Announce workspace opened (only when actually opening, not switching views)
+            if (!shouldSuppressAnimation) {
+                this.announceWorkspaceOpened();
+            }
         }
         else if (!shouldRenderPanel && this.lastShouldRenderWorkspacePanel) {
             // Suppress animation when switching from panel to inline container
             // (workspace was in panel and now moving to inline)
             const shouldSuppressAnimation = this.lastWorkspaceInPanel &&
                 (workspaceState?.containerVisible ?? false);
-            console.log("[syncWorkspacePanelState] CLOSING PANEL", {
-                shouldSuppressAnimation,
-            });
             this.suppressWorkspacePanelCloseAnimation = shouldSuppressAnimation;
             this.cancelWorkspacePanelOpenSchedule();
             if (this.workspacePanelOpen) {
                 this.workspacePanelOpen = false;
                 this.requestUpdate();
+                // Announce workspace closed (only when actually closing, not switching views)
+                if (!shouldSuppressAnimation) {
+                    this.announceWorkspaceClosed();
+                }
             }
             else {
                 this.workspacePanelRendering = false;
@@ -710,7 +687,7 @@ let CDSAIChatShell = CDSAIChatShell_1 = class CDSAIChatShell extends LitElement
         this.workspacePanelOpenScheduled = false;
     }
 };
-CDSAIChatShell.styles = styles;
+CDSAIChatShell.styles = [commonStyles, styles];
 /**
  * @internal
  */
@@ -729,8 +706,20 @@ __decorate([
     property({ type: Boolean, attribute: "show-frame", reflect: true })
 ], CDSAIChatShell.prototype, "showFrame", void 0);
 __decorate([
-    property({ type: Boolean, attribute: "rounded-corners", reflect: true })
-], CDSAIChatShell.prototype, "roundedCorners", void 0);
+    property({ type: String, attribute: "corner-all", reflect: true })
+], CDSAIChatShell.prototype, "cornerAll", void 0);
+__decorate([
+    property({ type: String, attribute: "corner-start-start", reflect: true })
+], CDSAIChatShell.prototype, "cornerStartStart", void 0);
+__decorate([
+    property({ type: String, attribute: "corner-start-end", reflect: true })
+], CDSAIChatShell.prototype, "cornerStartEnd", void 0);
+__decorate([
+    property({ type: String, attribute: "corner-end-start", reflect: true })
+], CDSAIChatShell.prototype, "cornerEndStart", void 0);
+__decorate([
+    property({ type: String, attribute: "corner-end-end", reflect: true })
+], CDSAIChatShell.prototype, "cornerEndEnd", void 0);
 __decorate([
     property({ type: Boolean, attribute: "show-history", reflect: true })
 ], CDSAIChatShell.prototype, "showHistory", void 0);
@@ -752,11 +741,32 @@ __decorate([
 __decorate([
     property({ type: String, attribute: "messages-aria-label" })
 ], CDSAIChatShell.prototype, "messagesAriaLabel", void 0);
+__decorate([
+    property({ type: String, attribute: "panel-opened-announcement" })
+], CDSAIChatShell.prototype, "panelOpenedAnnouncement", void 0);
+__decorate([
+    property({ type: String, attribute: "panel-closed-announcement" })
+], CDSAIChatShell.prototype, "panelClosedAnnouncement", void 0);
+__decorate([
+    property({ type: String, attribute: "workspace-opened-announcement" })
+], CDSAIChatShell.prototype, "workspaceOpenedAnnouncement", void 0);
+__decorate([
+    property({ type: String, attribute: "workspace-closed-announcement" })
+], CDSAIChatShell.prototype, "workspaceClosedAnnouncement", void 0);
+__decorate([
+    property({ type: String, attribute: "history-shown-announcement" })
+], CDSAIChatShell.prototype, "historyShownAnnouncement", void 0);
+__decorate([
+    property({ type: String, attribute: "history-hidden-announcement" })
+], CDSAIChatShell.prototype, "historyHiddenAnnouncement", void 0);
 __decorate([
     property({ type: Boolean, attribute: "content-max-width", reflect: true })
 ], CDSAIChatShell.prototype, "contentMaxWidth", void 0);
+__decorate([
+    state()
+], CDSAIChatShell.prototype, "_isInitializing", void 0);
 CDSAIChatShell = CDSAIChatShell_1 = __decorate([
-    carbonElement("cds-aichat-shell")
+    carbonElement(`${prefix}-shell`)
 ], CDSAIChatShell);
 var CDSChatShellElement = CDSAIChatShell;