npm - @pega/cosmos-react-work - Versions diffs - 10.0.0-build.2.0 → 10.0.0-build.2.10 - Mend

@pega/cosmos-react-work 10.0.0-build.2.0 → 10.0.0-build.2.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (27) hide show

package/lib/components/GenAICoach/GenAIMessage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GenAIMessage.js","sourceRoot":"","sources":["../../../src/components/GenAICoach/GenAIMessage.tsx"],"names":[],"mappings":"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","sourcesContent":["import { createContext, forwardRef, useEffect, useMemo, useRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\n\nimport {\n Button,\n Flex,\n Progress,\n registerIcon,\n useI18n,\n useTestIds,\n ErrorState,\n markdownToPlainText,\n type ForwardRefForwardPropsComponent,\n Actions,\n Icon,\n useModalManager\n} from '@pega/cosmos-react-core';\nimport * as polarisSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/polaris-solid.icon';\nimport * as brainIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/brain.icon';\nimport { RichTextViewer } from '@pega/cosmos-react-rte';\nimport { useAnimatedText } from '@pega/cosmos-react-core';\n\nimport type { CoachLoadingContentProps, GenAIMessageProps } from './GenAICoach.types';\nimport {\n StyledActionsContainer,\n StyledAttachmentsList,\n StyledMessage,\n StyledSuggestion,\n StyledSuggestionsContainer,\n StyledSystemMessage,\n StyledUserMessage\n} from './GenAICoach.styles';\nimport { getGenAICoachTestIds } from './GenAICoach.test-ids';\nimport { isCoachMessage, isUserMessage } from './GenAICoach.utils';\nimport GenAIMessageProgress from './GenAIMessageProgress';\nimport ToolConfirmationMessage from './ToolConfirmationMessage';\nimport GenAIMessageFeedbackButtons from './GenAIMessageFeedback';\nimport ToolCandidates from './ToolCandidates';\n\nregisterIcon(polarisSolidIcon, brainIcon);\n\ntype StreamingContextProps = {\n isStreamingMessage?: boolean;\n isStreamingInProgress?: boolean;\n};\n\n/** Metadata Context /\nexport const StreamingContext = createContext<StreamingContextProps \| undefined>({\n isStreamingMessage: false\n});\n\nconst LoadingContent = ({\n message,\n markdownMap,\n progressSteps,\n progressStepsCompleted\n}: CoachLoadingContentProps) => {\n if (!progressSteps?.length) {\n return <GenAIMessageProgress messages={message ? [message] : undefined} />;\n }\n\n if (message) {\n return (\n <>\n <RichTextViewer content={message} type='markdown' markdownMap={markdownMap} />\n <Progress variant='ellipsis' placement='inline' />\n </>\n );\n }\n\n return <GenAIMessageProgress messages={progressSteps} completedSteps={progressStepsCompleted} />;\n};\n\nconst GenAIMessage: ForwardRefForwardPropsComponent<GenAIMessageProps> = forwardRef(\n function GenAIMessage(props: PropsWithoutRef<GenAIMessageProps>, ref: GenAIMessageProps['ref']) {\n const testIds = useTestIds(props.testId, getGenAICoachTestIds);\n const t = useI18n();\n const { create } = useModalManager();\n\n const modalMethodsRef = useRef<ReturnType<typeof create> \| null>(null);\n\n const { message, announceInteraction, ...restProps } = props;\n const isStringMessage = typeof message === 'string';\n const rawPlainTextMessage = isStringMessage ? markdownToPlainText(message ?? '') : '';\n\n let fallbackAriaLabel = '';\n if (isCoachMessage(props)) {\n fallbackAriaLabel = t('agent_message');\n } else if (isUserMessage(props)) {\n fallbackAriaLabel = t('user_message');\n }\n const plainTextMessage = rawPlainTextMessage \|\| fallbackAriaLabel;\n let ariaLabel = plainTextMessage;\n\n const toolCandidates = isCoachMessage(props) ? props.toolCandidates : undefined;\n\n const isStreamingMessage = isCoachMessage(props) && props.enableStreaming;\n const allChunksReceived = isCoachMessage(props) && props.allChunksReceived;\n const enableStreaming = !!isStreamingMessage && !allChunksReceived;\n\n const {\n text: streamingMessage,\n isAnimationDone: isStreamingDone,\n animatedTillCursor\n } = useAnimatedText({\n text: isStringMessage ? message : '',\n allContentReceived: allChunksReceived === undefined ? true : allChunksReceived,\n enabled: isStringMessage && enableStreaming,\n tokenizeMarkdown: true,\n cursorStartIndex:\n isCoachMessage(props) && props.animationInitialCursorPos\n ? props.animationInitialCursorPos\n : undefined\n });\n\n useEffect(() => {\n if (isCoachMessage(props) && props.onAnimationCursorUpdate) {\n props.onAnimationCursorUpdate(animatedTillCursor);\n }\n }, [animatedTillCursor]);\n\n useEffect(() => {\n if (isStreamingMessage && props.onStreamingUpdate) {\n props.onStreamingUpdate(!!allChunksReceived && isStreamingDone);\n }\n }, [enableStreaming, isStreamingDone, allChunksReceived]);\n\n useEffect(() => {\n if (isCoachMessage(props) && toolCandidates && modalMethodsRef.current) {\n modalMethodsRef.current.update({\n loading: toolCandidates.toolState?.loading,\n error: toolCandidates.toolState?.error,\n renderCandidatesTable: toolCandidates.toolState?.renderCandidatesTable\n });\n }\n }, [toolCandidates]);\n\n useEffect(() => {\n return () => {\n const modalMethods = modalMethodsRef.current;\n\n if (!modalMethods) {\n return;\n }\n\n modalMethods.dismiss();\n modalMethods.unmount();\n };\n }, []);\n\n const streamingContext: StreamingContextProps = useMemo(() => {\n return { isStreamingMessage, isStreamingInProgress: isCoachMessage(props) && props.loading };\n }, [isStreamingMessage, props]);\n\n if (isCoachMessage(props)) {\n const {\n id: messageId,\n coachName,\n suggestions,\n onSend,\n loading,\n error,\n feedback,\n markdownMap,\n messageActions\n } = props;\n\n const { reaction } = feedback ?? {};\n const { toolState, onViewToolsConsidered } = toolCandidates ?? {};\n\n let selectedFeedbackResponse;\n\n let feedbackAriaLabel = t('sender_replied_message', [coachName, plainTextMessage ?? '']);\n\n if (feedback && reaction) {\n selectedFeedbackResponse = t('selected_noun', [\n reaction === 'liked' ? t('good_response') : t('bad_response')\n ]);\n\n feedbackAriaLabel = `${feedbackAriaLabel} ${selectedFeedbackResponse}`;\n }\n\n ariaLabel =\n suggestions && suggestions.length > 0\n ? `${feedbackAriaLabel} ${t('suggestions_in_message', [suggestions.length])}`\n : feedbackAriaLabel;\n\n const hasInteractiveContent = !!(\n suggestions?.length \|\|\n feedback \|\|\n messageActions \|\|\n toolState?.renderCandidatesTable\n );\n\n if (announceInteraction && hasInteractiveContent) {\n ariaLabel = `${ariaLabel} ${t('interaction_message')}`;\n }\n\n const onClickToolsConsidered = () => {\n modalMethodsRef.current = create(ToolCandidates, {\n loading: toolState?.loading,\n error: toolState?.error,\n renderCandidatesTable: toolState?.renderCandidatesTable\n });\n\n onViewToolsConsidered?.(messageId);\n };\n\n const streamingContent = isStreamingMessage && (\n <>\n {message ? (\n <>\n <StreamingContext.Provider value={streamingContext}>\n {isStringMessage ? (\n <RichTextViewer\n content={isStreamingMessage ? streamingMessage : message}\n type='markdown'\n markdownMap={markdownMap}\n />\n ) : (\n message\n )}\n </StreamingContext.Provider>\n\n {loading && <Progress variant='ellipsis' placement='inline' />}\n </>\n ) : (\n (loading \|\| props.progressSteps?.length) && (\n <GenAIMessageProgress\n messages={props.progressSteps?.length ? props.progressSteps : undefined}\n completedSteps={\n props.progressSteps?.length ? props.progressStepsCompleted : undefined\n }\n />\n )\n )}\n </>\n );\n\n return (\n <Flex\n as='li'\n data-testid={testIds.coachMessage}\n {...restProps}\n container={{ direction: 'row', pad: [1, 0], gap: 1 }}\n type='message'\n aria-label={ariaLabel}\n ref={ref}\n >\n <StyledMessage>\n {/ Streaming loader and content /}\n {streamingContent}\n\n {loading \|\| error ? (\n <>\n {loading && !isStreamingMessage && (\n <LoadingContent\n message={isStringMessage ? message : undefined}\n markdownMap={markdownMap}\n progressSteps={props.progressSteps}\n progressStepsCompleted={props.progressStepsCompleted}\n />\n )}\n {error && <ErrorState message={error} />}\n </>\n ) : (\n <>\n {/ Non streaming content */}\n {!isStreamingMessage &&\n message &&\n (isStringMessage ? (\n <RichTextViewer content={message} type='markdown' markdownMap={markdownMap} />\n ) : (\n message\n ))}\n\n {props.isToolConfirmation && <ToolConfirmationMessage {...props} />}\n\n {(feedback \|\| messageActions \|\| onViewToolsConsidered) && (\n <Flex\n container={{\n direction: 'row',\n gap: 1,\n pad: [1, undefined],\n alignItems: 'center'\n }}\n as={StyledActionsContainer}\n >\n {feedback && (\n <GenAIMessageFeedbackButtons messageId={messageId} feedback={feedback} />\n )}\n\n {onViewToolsConsidered && (\n <Button\n label={t('semantic_discovery_results')}\n variant='simple'\n icon\n compact\n onClick={onClickToolsConsidered}\n >\n <Icon name='brain' />\n </Button>\n )}\n\n {messageActions && <Actions {...messageActions} />}\n </Flex>\n )}\n\n {suggestions && suggestions.length > 0 && (\n <Flex\n as={StyledSuggestionsContainer}\n container={{ gap: 1, justify: 'end', wrap: 'wrap' }}\n >\n {suggestions.map(({ id, message: prompt, selected }) => {\n return (\n <Button\n as={StyledSuggestion}\n onClick={onSend ? () => onSend({ id, message: prompt }) : undefined}\n key={id}\n variant={selected ? 'primary' : undefined}\n >\n {prompt}\n </Button>\n );\n })}\n </Flex>\n )}\n </>\n )}\n </StyledMessage>\n </Flex>\n );\n }\n\n if (isUserMessage(props)) {\n if (plainTextMessage) {\n ariaLabel = t('you_asked', [plainTextMessage]);\n }\n\n if (announceInteraction) {\n ariaLabel = `${ariaLabel} ${t('interaction_message')}`;\n }\n\n return (\n <StyledUserMessage\n as={StyledUserMessage}\n data-testid={testIds.userMessage}\n {...restProps}\n // @ts-expect-error FIXME: Need to validate if we can remove message, and double 'as'\n type='message'\n aria-label={ariaLabel}\n ref={ref}\n >\n {props.attachments && props.attachments.length > 0 && (\n <StyledAttachmentsList type='display' items={props.attachments} />\n )}\n {props.message && <RichTextViewer content={props.message} type='markdown' />}\n </StyledUserMessage>\n );\n }\n\n if (props.from === 'system') {\n const displayMessage = props.stopped && !message ? t('generation_stopped') : message;\n const systemAriaLabel = typeof displayMessage === 'string' ? displayMessage : ariaLabel;\n return (\n <StyledSystemMessage\n stopped={props.stopped}\n data-testid={testIds.userMessage}\n aria-label={systemAriaLabel}\n ref={ref}\n >\n {displayMessage}\n </StyledSystemMessage>\n );\n }\n\n return null;\n }\n);\n\nexport default GenAIMessage;\n"]}
1	+ {"version":3,"file":"GenAIMessage.js","sourceRoot":"","sources":["../../../src/components/GenAICoach/GenAIMessage.tsx"],"names":[],"mappings":"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","sourcesContent":["import { createContext, forwardRef, useEffect, useMemo, useRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\n\nimport {\n Avatar,\n Button,\n Flex,\n Progress,\n registerIcon,\n useI18n,\n useTestIds,\n ErrorState,\n markdownToPlainText,\n type ForwardRefForwardPropsComponent,\n Actions,\n Icon,\n useModalManager\n} from '@pega/cosmos-react-core';\nimport * as polarisSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/polaris-solid.icon';\nimport * as brainIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/brain.icon';\nimport { RichTextViewer } from '@pega/cosmos-react-rte';\nimport { useAnimatedText } from '@pega/cosmos-react-core';\n\nimport type { CoachLoadingContentProps, GenAIMessageProps } from './GenAICoach.types';\nimport {\n StyledActionsContainer,\n StyledAttachmentsList,\n StyledGenAIAvatar,\n StyledMessageSender,\n StyledMessage,\n StyledSuggestion,\n StyledSuggestionsContainer,\n StyledSystemMessage,\n StyledUserMessage\n} from './GenAICoach.styles';\nimport { getGenAICoachTestIds } from './GenAICoach.test-ids';\nimport { isCoachMessage, isUserMessage } from './GenAICoach.utils';\nimport GenAIMessageProgress from './GenAIMessageProgress';\nimport ToolConfirmationMessage from './ToolConfirmationMessage';\nimport GenAIMessageFeedbackButtons from './GenAIMessageFeedback';\nimport ToolCandidates from './ToolCandidates';\n\nregisterIcon(polarisSolidIcon, brainIcon);\n\ntype StreamingContextProps = {\n isStreamingMessage?: boolean;\n isStreamingInProgress?: boolean;\n};\n\n/** Metadata Context /\nexport const StreamingContext = createContext<StreamingContextProps \| undefined>({\n isStreamingMessage: false\n});\n\nconst LoadingContent = ({\n message,\n markdownMap,\n progressSteps,\n progressStepsCompleted\n}: CoachLoadingContentProps) => {\n if (!progressSteps?.length) {\n return <GenAIMessageProgress messages={message ? [message] : undefined} />;\n }\n\n if (message) {\n return (\n <>\n <RichTextViewer content={message} type='markdown' markdownMap={markdownMap} />\n <Progress variant='ellipsis' placement='inline' />\n </>\n );\n }\n\n return <GenAIMessageProgress messages={progressSteps} completedSteps={progressStepsCompleted} />;\n};\n\nconst GenAIMessage: ForwardRefForwardPropsComponent<GenAIMessageProps> = forwardRef(\n function GenAIMessage(props: PropsWithoutRef<GenAIMessageProps>, ref: GenAIMessageProps['ref']) {\n const testIds = useTestIds(props.testId, getGenAICoachTestIds);\n const t = useI18n();\n const { create } = useModalManager();\n\n const modalMethodsRef = useRef<ReturnType<typeof create> \| null>(null);\n\n const { message, announceInteraction, simplifiedAgent, ...restProps } = props;\n const isStringMessage = typeof message === 'string';\n const rawPlainTextMessage = isStringMessage ? markdownToPlainText(message ?? '') : '';\n\n let fallbackAriaLabel = '';\n if (isCoachMessage(props)) {\n fallbackAriaLabel = t('agent_message');\n } else if (isUserMessage(props)) {\n fallbackAriaLabel = t('user_message');\n }\n const plainTextMessage = rawPlainTextMessage \|\| fallbackAriaLabel;\n let ariaLabel = plainTextMessage;\n\n const toolCandidates = isCoachMessage(props) ? props.toolCandidates : undefined;\n\n const isStreamingMessage = isCoachMessage(props) && props.enableStreaming;\n const allChunksReceived = isCoachMessage(props) && props.allChunksReceived;\n const enableStreaming = !!isStreamingMessage && !allChunksReceived;\n\n const {\n text: streamingMessage,\n isAnimationDone: isStreamingDone,\n animatedTillCursor\n } = useAnimatedText({\n text: isStringMessage ? message : '',\n allContentReceived: allChunksReceived === undefined ? true : allChunksReceived,\n enabled: isStringMessage && enableStreaming,\n tokenizeMarkdown: true,\n cursorStartIndex:\n isCoachMessage(props) && props.animationInitialCursorPos\n ? props.animationInitialCursorPos\n : undefined\n });\n\n useEffect(() => {\n if (isCoachMessage(props) && props.onAnimationCursorUpdate) {\n props.onAnimationCursorUpdate(animatedTillCursor);\n }\n }, [animatedTillCursor]);\n\n useEffect(() => {\n if (isStreamingMessage && props.onStreamingUpdate) {\n props.onStreamingUpdate(!!allChunksReceived && isStreamingDone);\n }\n }, [enableStreaming, isStreamingDone, allChunksReceived]);\n\n useEffect(() => {\n if (isCoachMessage(props) && toolCandidates && modalMethodsRef.current) {\n modalMethodsRef.current.update({\n loading: toolCandidates.toolState?.loading,\n error: toolCandidates.toolState?.error,\n renderCandidatesTable: toolCandidates.toolState?.renderCandidatesTable\n });\n }\n }, [toolCandidates]);\n\n useEffect(() => {\n return () => {\n const modalMethods = modalMethodsRef.current;\n\n if (!modalMethods) {\n return;\n }\n\n modalMethods.dismiss();\n modalMethods.unmount();\n };\n }, []);\n\n const streamingContext: StreamingContextProps = useMemo(() => {\n return { isStreamingMessage, isStreamingInProgress: isCoachMessage(props) && props.loading };\n }, [isStreamingMessage, props]);\n\n if (isCoachMessage(props)) {\n const {\n id: messageId,\n coachName,\n suggestions,\n onSend,\n loading,\n error,\n feedback,\n markdownMap,\n messageActions,\n showSenderInfo\n } = props;\n\n const { reaction } = feedback ?? {};\n const { toolState, onViewToolsConsidered } = toolCandidates ?? {};\n\n let selectedFeedbackResponse;\n\n let feedbackAriaLabel = t('sender_replied_message', [coachName, plainTextMessage ?? '']);\n\n if (feedback && reaction) {\n selectedFeedbackResponse = t('selected_noun', [\n reaction === 'liked' ? t('good_response') : t('bad_response')\n ]);\n\n feedbackAriaLabel = `${feedbackAriaLabel} ${selectedFeedbackResponse}`;\n }\n\n ariaLabel =\n suggestions && suggestions.length > 0\n ? `${feedbackAriaLabel} ${t('suggestions_in_message', [suggestions.length])}`\n : feedbackAriaLabel;\n\n const hasInteractiveContent = !!(\n suggestions?.length \|\|\n feedback \|\|\n messageActions \|\|\n toolState?.renderCandidatesTable\n );\n\n if (announceInteraction && hasInteractiveContent) {\n ariaLabel = `${ariaLabel} ${t('interaction_message')}`;\n }\n\n const onClickToolsConsidered = () => {\n modalMethodsRef.current = create(ToolCandidates, {\n loading: toolState?.loading,\n error: toolState?.error,\n renderCandidatesTable: toolState?.renderCandidatesTable\n });\n\n onViewToolsConsidered?.(messageId);\n };\n\n const streamingContent = isStreamingMessage && (\n <>\n {message ? (\n <>\n <StreamingContext.Provider value={streamingContext}>\n {isStringMessage ? (\n <RichTextViewer\n content={isStreamingMessage ? streamingMessage : message}\n type='markdown'\n markdownMap={markdownMap}\n />\n ) : (\n message\n )}\n </StreamingContext.Provider>\n\n {loading && <Progress variant='ellipsis' placement='inline' />}\n </>\n ) : (\n (loading \|\| props.progressSteps?.length) && (\n <GenAIMessageProgress\n messages={props.progressSteps?.length ? props.progressSteps : undefined}\n completedSteps={\n props.progressSteps?.length ? props.progressStepsCompleted : undefined\n }\n />\n )\n )}\n </>\n );\n\n const messageContent = (\n <StyledMessage simplified={simplifiedAgent && !showSenderInfo}>\n {/ Streaming loader and content /}\n {streamingContent}\n\n {loading \|\| error ? (\n <>\n {loading && !isStreamingMessage && (\n <LoadingContent\n message={isStringMessage ? message : undefined}\n markdownMap={markdownMap}\n progressSteps={props.progressSteps}\n progressStepsCompleted={props.progressStepsCompleted}\n />\n )}\n {error && <ErrorState message={error} />}\n </>\n ) : (\n <>\n {/ Non streaming content */}\n {!isStreamingMessage &&\n message &&\n (isStringMessage ? (\n <RichTextViewer content={message} type='markdown' markdownMap={markdownMap} />\n ) : (\n message\n ))}\n\n {props.isToolConfirmation && <ToolConfirmationMessage {...props} />}\n\n {(feedback \|\| messageActions \|\| onViewToolsConsidered) && (\n <Flex\n container={{\n direction: 'row',\n gap: 1,\n pad: [1, undefined],\n alignItems: 'center'\n }}\n as={StyledActionsContainer}\n >\n {feedback && (\n <GenAIMessageFeedbackButtons messageId={messageId} feedback={feedback} />\n )}\n\n {onViewToolsConsidered && (\n <Button\n label={t('semantic_discovery_results')}\n variant='simple'\n icon\n compact\n onClick={onClickToolsConsidered}\n >\n <Icon name='brain' />\n </Button>\n )}\n\n {messageActions && <Actions {...messageActions} />}\n </Flex>\n )}\n\n {suggestions && suggestions.length > 0 && (\n <Flex\n as={StyledSuggestionsContainer}\n container={{ gap: 1, justify: 'end', wrap: 'wrap' }}\n >\n {suggestions.map(({ id, message: prompt, selected }) => {\n return (\n <Button\n as={StyledSuggestion}\n onClick={onSend ? () => onSend({ id, message: prompt }) : undefined}\n key={id}\n variant={selected ? 'primary' : undefined}\n >\n {prompt}\n </Button>\n );\n })}\n </Flex>\n )}\n </>\n )}\n </StyledMessage>\n );\n\n return (\n <Flex\n as='li'\n data-testid={testIds.coachMessage}\n {...restProps}\n container={{ direction: 'row', pad: [1, 0], gap: 1 }}\n type='message'\n aria-label={ariaLabel}\n ref={ref}\n >\n {simplifiedAgent ? (\n <>\n {showSenderInfo && (\n <StyledGenAIAvatar size='l' name={coachName ?? t('agent')} icon='polaris-solid' />\n )}\n <Flex item={{ grow: 1 }} container={{ direction: 'column', gap: 0.75 }}>\n {coachName && showSenderInfo && (\n <StyledMessageSender variant='primary'>{coachName}</StyledMessageSender>\n )}\n {messageContent}\n </Flex>\n </>\n ) : (\n messageContent\n )}\n </Flex>\n );\n }\n\n if (isUserMessage(props)) {\n if (plainTextMessage) {\n ariaLabel = t('you_asked', [plainTextMessage]);\n }\n\n if (announceInteraction) {\n ariaLabel = `${ariaLabel} ${t('interaction_message')}`;\n }\n\n const attachmentsAndMessage = (\n <>\n {props.attachments && props.attachments.length > 0 && (\n <StyledAttachmentsList type='display' items={props.attachments} />\n )}\n {props.message && <RichTextViewer content={props.message} type='markdown' />}\n </>\n );\n\n if (!simplifiedAgent) {\n return (\n <StyledUserMessage\n data-testid={testIds.userMessage}\n {...restProps}\n // @ts-expect-error FIXME: Need to validate if we can remove message, and double 'as'\n type='message'\n aria-label={ariaLabel}\n ref={ref}\n >\n {attachmentsAndMessage}\n </StyledUserMessage>\n );\n }\n\n return (\n <Flex\n as='li'\n data-testid={testIds.userMessage}\n {...restProps}\n container={{ direction: 'row', gap: 1, justify: 'end', alignItems: 'start' }}\n type='message'\n aria-label={ariaLabel}\n ref={ref}\n >\n <Flex container={{ direction: 'column', alignItems: 'end', gap: 0.75 }}>\n {props.userName !== undefined && (\n <StyledMessageSender variant='primary'>\n {props.userName.split(' ')[0] \|\| t('you')}\n </StyledMessageSender>\n )}\n <StyledUserMessage as='div'>{attachmentsAndMessage}</StyledUserMessage>\n </Flex>\n {props.userName && <Avatar name={props.userName} size='l' shape='circle' />}\n </Flex>\n );\n }\n\n if (props.from === 'system') {\n const displayMessage = props.stopped && !message ? t('generation_stopped') : message;\n const systemAriaLabel = typeof displayMessage === 'string' ? displayMessage : ariaLabel;\n return (\n <StyledSystemMessage\n stopped={props.stopped}\n data-testid={testIds.userMessage}\n aria-label={systemAriaLabel}\n ref={ref}\n >\n {displayMessage}\n </StyledSystemMessage>\n );\n }\n\n return null;\n }\n);\n\nexport default GenAIMessage;\n"]}

package/lib/components/Stages/Stages.styles.d.ts CHANGED Viewed

@@ -1,4 +1,12 @@
+/**
+ * Outer wrapper `<div>` for the stages bar. Applies layered scroll-fade masks and
+ * reserves scrollbar space so the fade gradient does not overlap the scrollbar track.
+ */
 export declare const StyledStagesWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+/**
+ * Scrollable `<ol>` containing all stage chevron items. Sets the `--chevron-spacing`
+ * and `--chevron-border-thickness` custom properties consumed by child elements.
+ */
 export declare const StyledStages: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, never>> & string;
 /**
  * A sentinel is an invisible 1 px <li> placed at each end of the scrollable stage list.
@@ -13,29 +21,64 @@ export declare const StyledStages: import("styled-components/dist/types").IStyle
  * offset by 1 at each end to skip the sentinels and target only real stage items.
  */
 export declare const StyledSentinel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;
+/**
+ * Inner `<span>` holding stage label content. Optionally applies `text-overflow: ellipsis`
+ * for stages with long labels.
+ */
 export declare const StyledInnerStage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
     ellipsis?: boolean;
 }>> & string;
+/**
+ * Clickable `<button>` for a single stage. Renders the chevron clip-path shape and
+ * applies status-based background and foreground colours.
+ */
 export declare const StyledStage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
     status: "completed" | "current" | "pending";
     readOnly?: boolean;
 }>> & string;
+/**
+ * Checkmark icon shown inside completed stages, tinted to match the stage foreground colour.
+ */
 export declare const StyledStageCompleteIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("@pega/cosmos-react-core").IconProps & import("styled-components/dist/types").BaseObject, import("styled-components/dist/types").BaseObject>> & string & Omit<import("react").ForwardRefExoticComponent<import("@pega/cosmos-react-core").IconProps>, keyof import("react").Component<any, {}, any>>;
+/**
+ * Stage label text. Renders in bold weight when the stage is the current active stage.
+ */
 export declare const StyledStageText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<import("@pega/cosmos-react-core").TextProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement | HTMLSpanElement> & import("@pega/cosmos-react-core").ForwardProps, "ref"> & {
     ref?: ((instance: HTMLHeadingElement | HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLHeadingElement | HTMLSpanElement> | null | undefined;
 }, {
     isCurrent?: boolean;
 }>> & string & Omit<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").TextProps>, keyof import("react").Component<any, {}, any>>;
+/**
+ * `<li>` container for a single stage item. Manages negative-margin chevron overlap,
+ * pseudo-element positioning, and z-index stacking for interactive states.
+ */
 export declare const StyledStageContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {
     readOnly?: boolean;
 }>> & string;
+/**
+ * `<ol>` list of sub-step items displayed below the stages bar when a stage is expanded.
+ */
 export declare const StyledStepsContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, never>> & string;
+/**
+ * Individual step `<li>` within a stage. Dims text and icon at reduced opacity when completed.
+ */
 export declare const StyledStep: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {
     completed: boolean;
 }>> & string;
+/**
+ * Small datetime label rendered beneath a step. Displayed at the `xs` font size
+ * and reduced opacity.
+ */
 export declare const StyledDateTimeDisplay: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("@pega/cosmos-react-core").DateTimeDisplayProps, "ref"> & import("react").RefAttributes<HTMLSpanElement> & import("@pega/cosmos-react-core").ForwardProps, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;
 }, never>> & string & Omit<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").DateTimeDisplayProps>, keyof import("react").Component<any, {}, any>>;
+/**
+ * Container `<div>` for the stage glimpse preview panel, constrained to a small max-width.
+ */
 export declare const StyledStageGlimpse: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+/**
+ * Visually hidden `<p>` providing an accessible description for the stages list,
+ * announced by screen readers but not displayed on screen.
+ */
 export declare const StyledStagesDescription: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
 //# sourceMappingURL=Stages.styles.d.ts.map

package/lib/components/Stages/Stages.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Stages.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/Stages.styles.ts"],"names":[],"mappings":"~~AAgIA~~,eAAO,MAAM,mBAAmB,~~6NAiE9B~~,CAAC;AAIH,eAAO,MAAM,YAAY,mOAmCvB,CAAC;AAIH;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,cAAc,~~6NAa1B~~,CAAC;AAIF,eAAO,MAAM,gBAAgB;eAA4B,OAAO;YAe9D,CAAC;AAIH,eAAO,MAAM,WAAW;YACd,WAAW,GAAG,SAAS,GAAG,SAAS;eAChC,OAAO;YA8FnB,CAAC;AAIF,eAAO,MAAM,uBAAuB,kaAiBlC,CAAC;AAGH,eAAO,MAAM,eAAe;;;gBAA8B,OAAO;kLAIhE,CAAC;AAIF,eAAO,MAAM,oBAAoB;eACpB,OAAO;~~YA2MnB~~,CAAC;AAIF,eAAO,MAAM,oBAAoB,mOAS/B,CAAC;AAIH,eAAO,MAAM,UAAU;eAA0B,OAAO;YAoBtD,CAAC;AAIH,eAAO,MAAM,qBAAqB;;oMAMhC,CAAC;AAIH,eAAO,MAAM,kBAAkB,6NAI7B,CAAC;AAIH,eAAO,MAAM,uBAAuB,yOAEnC,CAAC"}
1	+ {"version":3,"file":"Stages.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/Stages.styles.ts"],"names":[],"mappings":"AAiIA;;;GAGG;AACH,eAAO,MAAM,mBAAmB,6NAmF9B,CAAC;AAIH;;;GAGG;AACH,eAAO,MAAM,YAAY,mOAmCvB,CAAC;AAIH;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,cAAc,6NA6B1B,CAAC;AAIF;;;GAGG;AACH,eAAO,MAAM,gBAAgB;eAA4B,OAAO;YAe9D,CAAC;AAIH;;;GAGG;AACH,eAAO,MAAM,WAAW;YACd,WAAW,GAAG,SAAS,GAAG,SAAS;eAChC,OAAO;YA8FnB,CAAC;AAIF;;GAEG;AACH,eAAO,MAAM,uBAAuB,kaAiBlC,CAAC;AAGH;;GAEG;AACH,eAAO,MAAM,eAAe;;;gBAA8B,OAAO;kLAIhE,CAAC;AAIF;;;GAGG;AACH,eAAO,MAAM,oBAAoB;eACpB,OAAO;YA6MnB,CAAC;AAIF;;GAEG;AACH,eAAO,MAAM,oBAAoB,mOAS/B,CAAC;AAIH;;GAEG;AACH,eAAO,MAAM,UAAU;eAA0B,OAAO;YAoBtD,CAAC;AAIH;;;GAGG;AACH,eAAO,MAAM,qBAAqB;;oMAMhC,CAAC;AAIH;;GAEG;AACH,eAAO,MAAM,kBAAkB,6NAI7B,CAAC;AAIH;;;GAGG;AACH,eAAO,MAAM,uBAAuB,yOAEnC,CAAC"}

package/lib/components/Stages/Stages.styles.js CHANGED Viewed

@@ -35,22 +35,23 @@ const stageClipPath = (leftNotch, rightPoint, mirrored = false) => {
 const chevronConfig = {
     // Horizontal projection of the rotated border-square forming the chevron point (fine pointer).
     // Derived from the border-square size × cos(45° + skew). Tuned to visually align with the stage height.
-    width: 'calc(1.156 * var(--chevron-spacing))',
+    // All values scaled by 1.25× relative to the original 4× spacing design (now 5× spacing height).
+    width: 'calc(1.445 * var(--chevron-spacing))',
     // Same horizontal projection for coarse/touch pointer (larger square, proportionally wider point).
-    coarseWidth: 'calc(1.4375 * var(--chevron-spacing))',
-    // Side length of the rotated border-square forming the chevron (fine pointer: 3× base spacing).
-    squareSize: 'calc(3 * var(--chevron-spacing))',
-    // Side length of the rotated border-square for coarse/touch pointer (4× base spacing).
-    coarseSquareSize: 'calc(4 * var(--chevron-spacing))',
+    coarseWidth: 'calc(1.797 * var(--chevron-spacing))',
+    // Side length of the rotated border-square forming the chevron (fine pointer: 3.75× base spacing).
+    squareSize: 'calc(3.75 * var(--chevron-spacing))',
+    // Side length of the rotated border-square for coarse/touch pointer (5× base spacing).
+    coarseSquareSize: 'calc(5 * var(--chevron-spacing))',
     // Distance to inset the ::before notch from the left edge of the stage (fine pointer).
-    // 0.688 ≈ width − half-border-overlap, keeps the notch flush with the preceding chevron point.
-    offsetLeft: 'calc(0.688 * var(--chevron-spacing))',
+    // 0.86 ≈ width − half-border-overlap, keeps the notch flush with the preceding chevron point.
+    offsetLeft: 'calc(0.86 * var(--chevron-spacing))',
     // Distance to inset the ::after point from the right edge of the stage (fine pointer).
     // Equal to `width` so the point extends exactly one chevron-width beyond the stage boundary.
-    offsetRight: 'calc(1.156 * var(--chevron-spacing))',
+    offsetRight: 'calc(1.445 * var(--chevron-spacing))',
     // Coarse-pointer equivalents of offsetLeft/offsetRight, scaled to match coarseWidth/coarseSquareSize.
-    coarseOffsetLeft: 'calc(1.03 * var(--chevron-spacing))',
-    coarseOffsetRight: 'calc(1.4375 * var(--chevron-spacing))'
+    coarseOffsetLeft: 'calc(1.2875 * var(--chevron-spacing))',
+    coarseOffsetRight: 'calc(1.797 * var(--chevron-spacing))'
 };
 // === Chevron Helpers ===
 // After team discussion we decided to use logical properties throughout — `inset-block-start`
@@ -104,23 +105,45 @@ const createChevronInteractiveStates = (config, borderThicknessVar, includeHover
     border-block-start-width: calc(2 * ${borderThicknessVar});
   }
 `;
+/**
+ * Outer wrapper `<div>` for the stages bar. Applies layered scroll-fade masks and
+ * reserves scrollbar space so the fade gradient does not overlap the scrollbar track.
+ */
 export const StyledStagesWrapper = styled.div(({ theme }) => {
     return css `
     --stages-fade-width: calc(${theme.base.spacing} * 2);
     --stages-fade-start: 0;
     --stages-fade-end: 0;
     --stages-scrollbar-reserve: calc(${theme.base.spacing} * 0.25);
+    /* Places gradient stops one physical pixel outside the element boundary,
+     * preventing browser anti-aliasing from creating a semi-transparent seam
+     * at mask edges. 1px is the correct unit here: it must be exactly one CSS pixel
+     * (independent of font-size), so the mask boundary doesn't introduce a seam at the
+     * element edge due to anti-aliasing.
+     * See also StyledSentinel, which uses 1px for the same reason.
+     */
+    /* stylelint-disable-next-line unit-allowed-list -- 1px is intentional; see comment above */
+    --mask-edge-overhang: 1px;
     position: relative;
     width: 100%;
     overflow: hidden;
     border-radius: ${theme.components.card['border-radius']};
+    border-end-start-radius: var(
+      --stages-wrapper-bottom-radius,
+      ${theme.components.card['border-radius']}
+    );
+    border-end-end-radius: var(
+      --stages-wrapper-bottom-radius,
+      ${theme.components.card['border-radius']}
+    );
     mask-image: linear-gradient(black, black),
       linear-gradient(
         to right,
-        transparent 0,
+        transparent calc(-1 * var(--mask-edge-overhang)),
         black var(--stages-fade-start),
         black calc(100% - var(--stages-fade-end)),
-        transparent 100%
+        transparent calc(100% + var(--mask-edge-overhang))
       );
     mask-size:
       100% var(--stages-scrollbar-reserve),
@@ -134,10 +157,10 @@ export const StyledStagesWrapper = styled.div(({ theme }) => {
       mask-image: linear-gradient(black, black),
         linear-gradient(
           to right,
-          transparent 0,
+          transparent calc(-1 * var(--mask-edge-overhang)),
           black var(--stages-fade-end),
           black calc(100% - var(--stages-fade-start)),
-          transparent 100%
+          transparent calc(100% + var(--mask-edge-overhang))
         );
     }
@@ -149,10 +172,10 @@ export const StyledStagesWrapper = styled.div(({ theme }) => {
       --stages-fade-width: calc(${theme.base.spacing} * 3);
       mask-image: linear-gradient(
         to right,
-        transparent 0,
+        transparent calc(-1 * var(--mask-edge-overhang)),
         black var(--stages-fade-start),
         black calc(100% - var(--stages-fade-end)),
-        transparent 100%
+        transparent calc(100% + var(--mask-edge-overhang))
       );
       mask-size: 100% 100%;
       mask-position: 0 0;
@@ -161,16 +184,20 @@ export const StyledStagesWrapper = styled.div(({ theme }) => {
       [dir='rtl'] & {
         mask-image: linear-gradient(
           to right,
-          transparent 0,
+          transparent calc(-1 * var(--mask-edge-overhang)),
           black var(--stages-fade-end),
           black calc(100% - var(--stages-fade-start)),
-          transparent 100%
+          transparent calc(100% + var(--mask-edge-overhang))
         );
       }
     }
   `;
 });
 StyledStagesWrapper.defaultProps = defaultThemeProp;
+/**
+ * Scrollable `<ol>` containing all stage chevron items. Sets the `--chevron-spacing`
+ * and `--chevron-border-thickness` custom properties consumed by child elements.
+ */
 export const StyledStages = styled.ol(({ theme }) => {
     return css `
     --chevron-spacing: ${theme.base.spacing};
@@ -224,8 +251,9 @@ export const StyledSentinel = styled.li `
   flex-shrink: 0;
   /* NOTE: the sentinel must occupy
-        a single physical pixel so IntersectionObserver can detect it at threshold 0 while having
-        negligible layout impact. A rem value could collapse to zero at small font sizes. */
+   * a single physical pixel so IntersectionObserver can detect it at threshold 0 while having
+   * negligible layout impact. A rem value could collapse to zero at small font sizes.
+   */
   /* stylelint-disable-next-line unit-allowed-list -- 1px is intentional */
   width: 1px;
   /* stylelint-disable-next-line unit-allowed-list -- 1px is intentional */
@@ -233,8 +261,27 @@ export const StyledSentinel = styled.li `
   padding: 0;
   margin: 0;
   pointer-events: none;
+  /* Collapse the sentinel's layout footprint to zero on the side facing the stages.
+   * Without this, each 1px sentinel creates a visible gap between the stage buttons
+   * and the left/right edges of the wrapper. The sentinel remains in flow (required
+   * for IntersectionObserver scroll detection) but no longer displaces stage content.
+   */
+  &:first-of-type {
+    /* stylelint-disable-next-line unit-allowed-list -- 1px matches sentinel width */
+    margin-inline-end: -1px;
+  }
+  &:last-of-type {
+    /* stylelint-disable-next-line unit-allowed-list -- 1px matches sentinel width */
+    margin-inline-start: -1px;
+  }
 `;
 StyledSentinel.defaultProps = defaultThemeProp;
+/**
+ * Inner `<span>` holding stage label content. Optionally applies `text-overflow: ellipsis`
+ * for stages with long labels.
+ */
 export const StyledInnerStage = styled.span(({ theme, ellipsis }) => {
     return css `
     display: inline-flex;
@@ -252,6 +299,10 @@ export const StyledInnerStage = styled.span(({ theme, ellipsis }) => {
   `;
 });
 StyledInnerStage.defaultProps = defaultThemeProp;
+/**
+ * Clickable `<button>` for a single stage. Renders the chevron clip-path shape and
+ * applies status-based background and foreground colours.
+ */
 export const StyledStage = styled.button(({ theme: { base: { palette, 'hit-area': hitArea, transparency, 'font-weight': fontWeight }, components: { 'case-view': { stages } } }, status, readOnly }) => {
     const stageForeground = calculateForegroundColor(stages.status[status].background, stages.status[status]['foreground-color']);
     return css `
@@ -266,7 +317,7 @@ export const StyledStage = styled.button(({ theme: { base: { palette, 'hit-area'
       /* Browsers do not reliably apply flex align-items: stretch to <button> elements.
        * Adding 0.0625rem (1px at default font size) to min-height compensates so the button fills its <li> container,
        * keeping the clipped chevron background flush with the top and bottom borders. */
-      min-height: calc(4 * var(--chevron-spacing) + 0.0625rem);
+      min-height: calc(5 * var(--chevron-spacing) + 0.0625rem);
       padding-inline-start: calc(2 * var(--chevron-spacing));
       padding-inline-end: var(--chevron-spacing);
       margin-inline-start: 0;
@@ -332,6 +383,9 @@ export const StyledStage = styled.button(({ theme: { base: { palette, 'hit-area'
     `;
 });
 StyledStage.defaultProps = defaultThemeProp;
+/**
+ * Checkmark icon shown inside completed stages, tinted to match the stage foreground colour.
+ */
 export const StyledStageCompleteIcon = styled(Icon)(({ theme: { components: { 'case-view': { stages: { status: { completed: { 'foreground-color': foregroundColor, background } } } } } } }) => {
     const stageForeground = calculateForegroundColor(background, foregroundColor);
     return css `
@@ -339,10 +393,17 @@ export const StyledStageCompleteIcon = styled(Icon)(({ theme: { components: { 'c
   `;
 });
 StyledStageCompleteIcon.defaultProps = defaultThemeProp;
+/**
+ * Stage label text. Renders in bold weight when the stage is the current active stage.
+ */
 export const StyledStageText = styled(Text)(({ theme, isCurrent }) => css `
     font-weight: ${isCurrent ? theme.base['font-weight'].bold : theme.base['font-weight'].normal};
   `);
 StyledStageText.defaultProps = defaultThemeProp;
+/**
+ * `<li>` container for a single stage item. Manages negative-margin chevron overlap,
+ * pseudo-element positioning, and z-index stacking for interactive states.
+ */
 export const StyledStageContainer = styled.li(({ theme: { base: { palette }, components: { card: { 'border-radius': borderRadius } } }, readOnly }) => {
     return css `
       display: flex;
@@ -357,7 +418,8 @@ export const StyledStageContainer = styled.li(({ theme: { base: { palette }, com
        * All non-last <li>s have z-index:1 so the later (right) <li>'s ::before paints on top
        * at internal boundaries; the last <li> has no z-index so its left neighbor's ::after
        * wins at the final boundary. On hover/focus/active, the interacting <li> gains z:2/3
-       * and its own pseudo-element surfaces for that boundary, regardless of which side. */
+       * and its own pseudo-element surfaces for that boundary, regardless of which side.
+       */
       &:not(:nth-last-of-type(-n + 2)) {
         z-index: 1;
       }
@@ -386,7 +448,8 @@ export const StyledStageContainer = styled.li(({ theme: { base: { palette }, com
          * causes thicker interactive-state borders (3×) to look thinner on the left boundary
          * than on the right (::after, which paints last and is always fully visible).
          * The ::before tip's rightmost extent is at --stage-chevron-width from the <li> start,
-         * which is before the stage text (padding-inline-start: 2 × spacing), so no content overlap. */
+         * which is before the stage text (padding-inline-start: 2 × spacing), so no content overlap.
+         */
         z-index: 1;
       }
@@ -395,7 +458,8 @@ export const StyledStageContainer = styled.li(({ theme: { base: { palette }, com
       }
       /* Chevron positioning: 45° rotated squares create visual tips via offsets:
-       * left ≈ 0.688 × spacing, right ≈ 1.15 × spacing (accounts for skew correction) */
+       * left ≈ 0.86 × spacing, right ≈ 1.445 × spacing (accounts for skew correction)
+       */
       [dir='rtl'] &::before,
       [dir='rtl'] &::after {
@@ -403,19 +467,18 @@ export const StyledStageContainer = styled.li(({ theme: { base: { palette }, com
       }
       /* Thicken chevrons to visually match button top/bottom border on any colored state.
-       * At 45° rotation, border appears 1/sin(45°) ≈ 0.707× thinner, so 2× border ≈ 1.4× horizontal border weight. */
+       *  At 45° rotation, border appears 1/sin(45°) ≈ 0.707× thinner, so 2× border ≈ 1.4× horizontal border weight.
+       */
       ${createChevronBaseStyles(chevronConfig, 'var(--chevron-border-thickness)')}
       ${createChevronInteractiveStates(chevronConfig, 'var(--chevron-border-thickness)', !readOnly)}
-      ${!readOnly &&
+        ${!readOnly &&
         css `
         &:has(button:hover)::before,
         &:has(button:hover)::after {
           border-color: ${palette['border-line']};
         }
       `}
-      &:has(button:focus-visible)::before,
+        &:has(button:focus-visible)::before,
       &:has(button:focus-visible)::after {
         border-color: ${palette.interactive};
       }
@@ -529,6 +592,9 @@ export const StyledStageContainer = styled.li(({ theme: { base: { palette }, com
     `;
 });
 StyledStageContainer.defaultProps = defaultThemeProp;
+/**
+ * `<ol>` list of sub-step items displayed below the stages bar when a stage is expanded.
+ */
 export const StyledStepsContainer = styled.ol(({ theme }) => {
     return css `
     list-style-type: none;
@@ -540,6 +606,9 @@ export const StyledStepsContainer = styled.ol(({ theme }) => {
   `;
 });
 StyledStepsContainer.defaultProps = defaultThemeProp;
+/**
+ * Individual step `<li>` within a stage. Dims text and icon at reduced opacity when completed.
+ */
 export const StyledStep = styled.li(({ completed, theme }) => {
     const textOpacity = completed ? theme.base.transparency['transparent-2'] : 1;
     return css `
@@ -561,6 +630,10 @@ export const StyledStep = styled.li(({ completed, theme }) => {
   `;
 });
 StyledStep.defaultProps = defaultThemeProp;
+/**
+ * Small datetime label rendered beneath a step. Displayed at the `xs` font size
+ * and reduced opacity.
+ */
 export const StyledDateTimeDisplay = styled(DateTimeDisplay)(({ theme }) => {
     const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
     return css `
@@ -569,12 +642,19 @@ export const StyledDateTimeDisplay = styled(DateTimeDisplay)(({ theme }) => {
   `;
 });
 StyledDateTimeDisplay.defaultProps = defaultThemeProp;
+/**
+ * Container `<div>` for the stage glimpse preview panel, constrained to a small max-width.
+ */
 export const StyledStageGlimpse = styled.div(({ theme }) => {
     return css `
     max-width: ${theme.base['content-width'].sm};
   `;
 });
 StyledStageGlimpse.defaultProps = defaultThemeProp;
+/**
+ * Visually hidden `<p>` providing an accessible description for the stages list,
+ * announced by screen readers but not displayed on screen.
+ */
 export const StyledStagesDescription = styled.p `
   display: none;
 `;