@pega/cosmos-react-work 10.0.0-build.2.2 → 10.0.0-build.2.4

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 (8) hide show
  1. package/lib/components/CaseView/CaseView.styles.d.ts.map +1 -1
  2. package/lib/components/CaseView/CaseView.styles.js +7 -3
  3. package/lib/components/CaseView/CaseView.styles.js.map +1 -1
  4. package/lib/components/Stages/Stages.styles.d.ts +43 -0
  5. package/lib/components/Stages/Stages.styles.d.ts.map +1 -1
  6. package/lib/components/Stages/Stages.styles.js +110 -30
  7. package/lib/components/Stages/Stages.styles.js.map +1 -1
  8. package/package.json +3 -3
package/lib/components/CaseView/CaseView.styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CaseView.styles.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AA0CtD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iEAAiE,CAAC;AAiC5G,eAAO,MAAM,oBAAoB,GAC/B,OAAO,YAAY,EACnB,OAAO,MAAM,GAAG,SAAS,KACxB,MAAM,GAAG,SAKX,CAAC;AAyEF,eAAO,MAAM,wBAAwB;cACzB,OAAO;;2BAjEsC,CAAC;iDA2FxD,CAAC;AAIH,eAAO,MAAM,0BAA0B;2BA/FkB,CAAC;iDAqGxD,CAAC;AAEH,eAAO,MAAM,uBAAuB,6NAsBlC,CAAC;AAIH,eAAO,MAAM,uBAAuB,6ZAelC,CAAC;AAIH,eAAO,MAAM,oBAAoB;;yLAI/B,CAAC;AAIH,eAAO,MAAM,mBAAmB;;0LAE/B,CAAC;AAEF,eAAO,MAAM,gBAAgB,6NA6C3B,CAAC;AAIH,eAAO,MAAM,oBAAoB,sOAUhC,CAAC;AAIF,eAAO,MAAM,gBAAgB,6NAAe,CAAC;AAI7C,eAAO,MAAM,8BAA8B;;2LA8BzC,CAAC;AAIH,eAAO,MAAM,mBAAmB;eAA2B,OAAO;YAmBhE,CAAC;AAIH,eAAO,MAAM,oBAAoB,6NAqD/B,CAAC;AAIH,eAAO,MAAM,wBAAwB;cAA0B,OAAO;YAoBpE,CAAC;AAmCH,eAAO,MAAM,mBAAmB,iOAoC9B,CAAC;AAIH,eAAO,MAAM,wBAAwB;;;WAC5B,OAAO;eACH,OAAO;WACX,YAAY;YAiCnB,CAAC;AAIH,eAAO,MAAM,qBAAqB,6NA6BjC,CAAC;AAIF,eAAO,MAAM,0BAA0B,6NAkBrC,CAAC;AAIH,eAAO,MAAM,0BAA0B;;2LASrC,CAAC;AAIH,eAAO,MAAM,iCAAiC;;2BAgC5C,CAAC;AAIH,eAAO,MAAM,iBAAiB,6NA+E7B,CAAC;AAIF,eAAO,MAAM,WAAW,6NAavB,CAAC;AAGF,eAAO,MAAM,qBAAqB,6NAuEjC,CAAC;AAKF,eAAO,MAAM,iCAAiC,6NAM5C,CAAC;AAEH,eAAO,MAAM,cAAc,6NA4I1B,CAAC;AAIF,eAAO,MAAM,sBAAsB;;yLAAiB,CAAC;AAErD,eAAO,MAAM,mCAAmC;;2BAO9C,CAAC;AAMH,eAAO,MAAM,eAAe,6NAsC1B,CAAC;AAIH,eAAO,MAAM,aAAa,6NA+DzB,CAAC;AAIF,eAAO,MAAM,gBAAgB;oBACX,oBAAoB,CAAC,eAAe,CAAC;wBACjC,OAAO;YAuB3B,CAAC;AAIH,eAAO,MAAM,uBAAuB,6NAwBnC,CAAC;AAIF,eAAO,MAAM,uBAAuB;gCAA4C,OAAO;YAatF,CAAC;AAIF,eAAO,MAAM,yBAAyB,6NAQpC,CAAC;AAIH,eAAO,MAAM,uBAAuB,6NAIlC,CAAC;AAIH,eAAO,MAAM,WAAW,6NAGvB,CAAC;AAEF,eAAO,MAAM,cAAc,6NA4F1B,CAAC;AAIF,eAAO,MAAM,qBAAqB;;yLAMjC,CAAC;AAIF,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;sSAsB5B,CAAC;AAIH,eAAO,MAAM,sBAAsB,6NAAe,CAAC;AAEnD,eAAO,MAAM,kBAAkB,kaAoC7B,CAAC"}
1
+ {"version":3,"file":"CaseView.styles.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AA0CtD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iEAAiE,CAAC;AAsC5G,eAAO,MAAM,oBAAoB,GAC/B,OAAO,YAAY,EACnB,OAAO,MAAM,GAAG,SAAS,KACxB,MAAM,GAAG,SAKX,CAAC;AAyEF,eAAO,MAAM,wBAAwB;cACzB,OAAO;;2BAjES,CAAC;iDA2F3B,CAAC;AAIH,eAAO,MAAM,0BAA0B;2BA/FX,CAAC;iDAqG3B,CAAC;AAEH,eAAO,MAAM,uBAAuB,6NAsBlC,CAAC;AAIH,eAAO,MAAM,uBAAuB,6ZAelC,CAAC;AAIH,eAAO,MAAM,oBAAoB;;yLAI/B,CAAC;AAIH,eAAO,MAAM,mBAAmB;;0LAE/B,CAAC;AAEF,eAAO,MAAM,gBAAgB,6NA6C3B,CAAC;AAIH,eAAO,MAAM,oBAAoB,sOAUhC,CAAC;AAIF,eAAO,MAAM,gBAAgB,6NAAe,CAAC;AAI7C,eAAO,MAAM,8BAA8B;;2LA8BzC,CAAC;AAIH,eAAO,MAAM,mBAAmB;eAA2B,OAAO;YAmBhE,CAAC;AAIH,eAAO,MAAM,oBAAoB,6NAqD/B,CAAC;AAIH,eAAO,MAAM,wBAAwB;cAA0B,OAAO;YAoBpE,CAAC;AAmCH,eAAO,MAAM,mBAAmB,iOAoC9B,CAAC;AAIH,eAAO,MAAM,wBAAwB;;;WAC5B,OAAO;eACH,OAAO;WACX,YAAY;YAiCnB,CAAC;AAIH,eAAO,MAAM,qBAAqB,6NA6BjC,CAAC;AAIF,eAAO,MAAM,0BAA0B,6NAkBrC,CAAC;AAIH,eAAO,MAAM,0BAA0B;;2LASrC,CAAC;AAIH,eAAO,MAAM,iCAAiC;;2BAgC5C,CAAC;AAIH,eAAO,MAAM,iBAAiB,6NA+E7B,CAAC;AAIF,eAAO,MAAM,WAAW,6NAavB,CAAC;AAGF,eAAO,MAAM,qBAAqB,6NAuEjC,CAAC;AAKF,eAAO,MAAM,iCAAiC,6NAM5C,CAAC;AAEH,eAAO,MAAM,cAAc,6NAgJ1B,CAAC;AAIF,eAAO,MAAM,sBAAsB;;yLAAiB,CAAC;AAErD,eAAO,MAAM,mCAAmC;;2BAO9C,CAAC;AAMH,eAAO,MAAM,eAAe,6NAsC1B,CAAC;AAIH,eAAO,MAAM,aAAa,6NA+DzB,CAAC;AAIF,eAAO,MAAM,gBAAgB;oBACX,oBAAoB,CAAC,eAAe,CAAC;wBACjC,OAAO;YAuB3B,CAAC;AAIH,eAAO,MAAM,uBAAuB,6NAwBnC,CAAC;AAIF,eAAO,MAAM,uBAAuB;gCAA4C,OAAO;YAatF,CAAC;AAIF,eAAO,MAAM,yBAAyB,6NAQpC,CAAC;AAIH,eAAO,MAAM,uBAAuB,6NAIlC,CAAC;AAIH,eAAO,MAAM,WAAW,6NAGvB,CAAC;AAEF,eAAO,MAAM,cAAc,6NA4F1B,CAAC;AAIF,eAAO,MAAM,qBAAqB;;yLAMjC,CAAC;AAIF,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;sSAsB5B,CAAC;AAIH,eAAO,MAAM,sBAAsB,6NAAe,CAAC;AAEnD,eAAO,MAAM,kBAAkB,kaAoC7B,CAAC"}
package/lib/components/CaseView/CaseView.styles.js CHANGED
@@ -10,7 +10,7 @@ import { StyledMenuButton } from '@pega/cosmos-react-core/lib/components/MenuBut
10
10
  import { StyledTab } from '@pega/cosmos-react-core/lib/components/Tabs/Tab';
11
11
  import { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';
12
12
  import { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';
13
- import { StyledStage, StyledStageContainer, StyledStages } from '../Stages/Stages.styles';
13
+ import { StyledStage, StyledStageContainer, StyledStages, StyledStagesWrapper } from '../Stages/Stages.styles';
14
14
  import { StyledAssignments } from '../Assignments/Assignments.styles';
15
15
  import { StyledAssignments as StyledHierarchicalAssignments } from '../HierarchicalAssignments/Assignments.styles';
16
16
  import { StyledGenAICoachContainer, StyledInitialMessageContainer } from '../GenAICoach/GenAICoach.styles';
@@ -647,16 +647,20 @@ export const StyledWorkArea = styled.div(({ theme: { base: { palette: { 'border-
647
647
  `}
648
648
  &:has(${StyledAssignments}),
649
649
  &:has(${StyledHierarchicalAssignments}) {
650
+ ${StyledStagesWrapper} {
651
+ --stages-wrapper-bottom-radius: 0;
652
+ }
653
+
650
654
  ${StyledStages} {
651
655
  border-block-end: 0.0625rem solid ${borderLine};
652
656
 
653
657
  &,
654
- ${StyledStageContainer}:first-of-type > ${StyledStage} {
658
+ ${StyledStageContainer}:nth-of-type(2) > ${StyledStage} {
655
659
  border-end-start-radius: 0;
656
660
  }
657
661
 
658
662
  &,
659
- ${StyledStageContainer}:last-of-type > ${StyledStage} {
663
+ ${StyledStageContainer}:nth-last-of-type(2) > ${StyledStage} {
660
664
  border-end-end-radius: 0;
661
665
  }
662
666
  }
package/lib/components/CaseView/CaseView.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CaseView.styles.js","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport type { DefaultTheme } from 'styled-components';\nimport { getContrast, hideVisually, mix, rgba, transparentize } from 'polished';\nimport { useContext } from 'react';\n\nimport {\n Button,\n calculateFontSize,\n CardContent,\n defaultThemeProp,\n resolveSupplementalColor,\n StyledBreadcrumbs,\n StyledButtonLink,\n StyledFieldValue,\n StyledInlineFieldValueRow,\n StyledStackedFieldValue,\n StyledIcon,\n StyledLabel,\n StyledPopover,\n StyledText,\n StyledTooltip,\n tryCatch,\n FieldValueList,\n StyledLink,\n readableHue,\n StyledCard,\n Text,\n readableColor,\n AppShellContext,\n AIButton,\n StyledButton,\n calculateForegroundColor,\n calculateBackgroundAndContrastColor,\n isSolidColor,\n StyledSummaryListItem,\n StyledProgressBackdrop,\n Image,\n Icon,\n animations,\n useDirection\n} from '@pega/cosmos-react-core';\nimport type { FontSize } from '@pega/cosmos-react-core';\nimport { StyledMenu } from '@pega/cosmos-react-core/lib/components/Menu/Menu.styles';\nimport type { AppShellContextValue } from '@pega/cosmos-react-core/lib/components/AppShell/AppShellContext';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport {\n StyledAllTabsWrapper,\n StyledTabs,\n StylesAllTabsButtonWrapper\n} from '@pega/cosmos-react-core/lib/components/Tabs/Tabs.styles';\nimport {\n resizeDrawerMinWidth,\n resizeDrawerMaxWidth,\n resizeDrawerDefaultWidth,\n wcagContrast\n} from '@pega/cosmos-react-core/lib/styles/constants';\nimport { StyledMenuButton } from '@pega/cosmos-react-core/lib/components/MenuButton/MenuButton';\nimport { StyledTab } from '@pega/cosmos-react-core/lib/components/Tabs/Tab';\nimport { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\n\nimport { StyledStage, StyledStageContainer, StyledStages } from '../Stages/Stages.styles';\nimport { StyledAssignments } from '../Assignments/Assignments.styles';\nimport { StyledAssignments as StyledHierarchicalAssignments } from '../HierarchicalAssignments/Assignments.styles';\nimport {\n StyledGenAICoachContainer,\n StyledInitialMessageContainer\n} from '../GenAICoach/GenAICoach.styles';\nimport { StyledTaskList } from '../Tasks/TaskList';\nimport { oneColumnDetailsColumnWidth } from '../Details/Details.styles';\n\nimport { useCaseViewContext } from './CaseView.context';\n\nconst labelWidth = '16ch';\nconst inlineEndButtonOffset = '0.375rem';\n\nexport const resolveCaseTypeColor = (\n theme: DefaultTheme,\n color: string | undefined\n): string | undefined => {\n if (!color) return undefined;\n const supplementalColor = resolveSupplementalColor(theme, color);\n if (supplementalColor !== undefined) return supplementalColor;\n return color;\n};\n\nconst mixCaseColorWithBackground = (color: string, background: string) =>\n mix(0.85, background, color);\n\nconst getCaseTypeHeaderColors = (\n theme: DefaultTheme,\n color: string | undefined\n): { caseTypeColor: string | undefined; headerBackground: string; headerForeground: string } => {\n const resolvedCaseTypeColor = resolveCaseTypeColor(theme, color);\n const headerBackground =\n resolvedCaseTypeColor &&\n theme.base['case-type-colors'] === 'header-and-icon' &&\n isSolidColor(theme.components.card.background)\n ? mixCaseColorWithBackground(resolvedCaseTypeColor, theme.components.card.background)\n : theme.components['case-view'].header.background;\n const headerForeground =\n resolvedCaseTypeColor && theme.base['case-type-colors'] === 'header-and-icon'\n ? readableColor(headerBackground)\n : calculateForegroundColor(\n headerBackground,\n theme.components['case-view'].header['foreground-color']\n );\n return { caseTypeColor: resolvedCaseTypeColor ?? undefined, headerBackground, headerForeground };\n};\n\ninterface CaseViewColors {\n caseTypeColor: string | undefined;\n headerBackground: string;\n foregroundColor: string;\n elementBackground: string;\n interactiveColor: string;\n interactiveUsable: boolean;\n hoverBackground: string;\n}\n\nconst getCaseViewColors = (\n theme: DefaultTheme,\n caseTypeColor: string | undefined\n): CaseViewColors => {\n const interactive = theme.base.palette.interactive;\n\n const caseTypeHeaderColors = getCaseTypeHeaderColors(theme, caseTypeColor);\n const headerBackground = caseTypeHeaderColors.headerBackground;\n const foregroundColor = caseTypeHeaderColors.headerForeground;\n\n const isGradientBackground = !isSolidColor(headerBackground);\n\n const elementBackground = isGradientBackground\n ? readableColor(foregroundColor)\n : headerBackground;\n\n const interactiveUsable = getContrast(elementBackground, interactive) >= wcagContrast.AA;\n const interactiveColor =\n !isGradientBackground && interactiveUsable ? interactive : foregroundColor;\n\n let hoverBackground = rgba(interactiveColor, 0.15);\n\n if (!isGradientBackground && interactiveUsable) {\n hoverBackground = readableHue(interactive, interactiveColor);\n }\n\n return {\n caseTypeColor: caseTypeHeaderColors.caseTypeColor,\n headerBackground,\n foregroundColor,\n elementBackground,\n interactiveColor,\n interactiveUsable,\n hoverBackground\n };\n};\n\nexport const StyledSummaryPrimaryList = styled(FieldValueList)<{\n wrapped?: boolean;\n}>(({ theme, wrapped }) => {\n const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n const detached = theme.components['field-value-list'].inline.detached;\n\n return css`\n ${wrapped\n ? css`\n grid-template-columns: minmax(0, 1fr);\n `\n : css`\n ${detached &&\n css`\n gap: calc(${theme.base.spacing});\n `}\n grid-template-columns: ${labelWidth} auto;\n `}\n ${StyledFieldValue} {\n font-size: ${fontSizes[theme.components.text.h1['font-size'] as FontSize]};\n font-weight: ${theme.components.text.h1['font-weight']};\n\n > ${StyledButtonLink} {\n font-weight: inherit;\n }\n }\n `;\n});\n\nStyledSummaryPrimaryList.defaultProps = defaultThemeProp;\n\nexport const StyledSummarySecondaryList = styled(FieldValueList)(() => {\n return css`\n ${StyledStackedFieldValue} {\n grid-column: 1 / -1;\n }\n `;\n});\n\nexport const StyledCaseSummaryFields = styled.div(({ theme }) => {\n const {\n components: {\n 'field-value-list': {\n inline: { detached }\n }\n }\n } = theme;\n\n return (\n detached &&\n css`\n ${StyledSummaryPrimaryList} {\n padding-block-start: calc(${theme.components.card.padding} * 2);\n padding-inline: calc(${theme.components.card.padding} * 2);\n }\n\n ${StyledSummarySecondaryList} {\n padding: calc(${theme.components.card.padding} * 2);\n }\n `\n );\n});\n\nStyledCaseSummaryFields.defaultProps = defaultThemeProp;\n\nexport const StyledSummaryTabContent = styled(CardContent)(({ theme }) => {\n const {\n base: { spacing }\n } = theme;\n return css`\n ${StyledSummarySecondaryList} {\n > ${StyledStackedFieldValue} {\n max-width: ${oneColumnDetailsColumnWidth};\n }\n\n > ${StyledFieldValue}, > ${StyledInlineFieldValueRow} > ${StyledFieldValue} {\n max-width: calc(${oneColumnDetailsColumnWidth} - ${labelWidth} - 2 * ${spacing});\n }\n }\n `;\n});\n\nStyledSummaryTabContent.defaultProps = defaultThemeProp;\n\nexport const StyledSummaryHeading = styled(Text)(({ theme }) => {\n return css`\n margin-block-end: ${theme.base.spacing};\n `;\n});\n\nStyledSummaryHeading.defaultProps = defaultThemeProp;\n\nexport const StyledCaseViewImage = styled(Image)`\n max-height: 100%;\n`;\n\nexport const StyledCaseHeader = styled.div(({ theme }) => {\n const {\n components: {\n 'case-view': {\n summary: { detached: summaryDetached },\n utilities: { detached: utilitiesDetached }\n }\n },\n base: { 'border-radius': borderRadius, spacing, shadow, 'z-index': zIndex, palette }\n } = theme;\n const { aboveSM, aboveMD, color, persistentUtility, aboveXL, summaryExpanded, isPreview } =\n useCaseViewContext();\n const shouldRenderMobileTabs = !aboveMD || (persistentUtility && !aboveXL) || !summaryExpanded;\n const caseHeaderBorderRadius = shouldRenderMobileTabs\n ? `0 0 ${utilitiesDetached ? borderRadius : 0} ${borderRadius}`\n : `${borderRadius} ${borderRadius} 0 0`;\n\n const { headerBackground, foregroundColor } = getCaseViewColors(theme, color);\n\n return css`\n background: ${headerBackground};\n color: ${foregroundColor};\n padding: ${spacing} calc(2 * ${spacing});\n position: relative;\n\n ${summaryDetached &&\n css`\n border-bottom: 0.0625rem solid ${palette['border-line']};\n `}\n ${summaryDetached &&\n !isPreview &&\n aboveSM &&\n css`\n border-radius: ${caseHeaderBorderRadius};\n `}\n h1:focus-visible {\n outline: transparent;\n box-shadow: ${shadow.focus};\n }\n\n ${StyledMenu} {\n color: ${palette['foreground-color']};\n z-index: ${zIndex.popover + 1};\n }\n `;\n});\n\nStyledCaseHeader.defaultProps = defaultThemeProp;\n\nexport const StyledFollowIconWrap = styled.label`\n font-size: 1.25rem;\n\n input {\n ${hideVisually}\n }\n\n input:focus + svg {\n box-shadow: ${({ theme }) => theme.base.shadow.focus};\n }\n`;\n\nStyledFollowIconWrap.defaultProps = defaultThemeProp;\n\nexport const StyledSubheading = styled.div``;\n\nStyledSubheading.defaultProps = defaultThemeProp;\n\nexport const StyledCaseHeaderPromotedAction = styled(Button)(({ theme }) => {\n const { color: caseTypeColor } = useCaseViewContext();\n\n const { elementBackground, interactiveColor, hoverBackground } = getCaseViewColors(\n theme,\n caseTypeColor\n );\n\n return css`\n --button-background-color: ${elementBackground};\n color: ${interactiveColor};\n background-color: transparent;\n border-color: ${interactiveColor};\n\n @media (hover: hover) {\n &:hover {\n --button-background-color: ${hoverBackground};\n color: ${interactiveColor};\n background-color: ${hoverBackground};\n border-color: ${interactiveColor};\n }\n\n &:active {\n --button-background-color: ${hoverBackground};\n color: ${interactiveColor};\n background-color: ${hoverBackground};\n border-color: ${interactiveColor};\n }\n }\n `;\n});\n\nStyledCaseHeaderPromotedAction.defaultProps = defaultThemeProp;\n\nexport const StyledHeaderActions = styled.div<{ offsetEnd: boolean }>(({ offsetEnd, theme }) => {\n return css`\n margin-inline-start: auto;\n padding-block: ${theme.base.spacing};\n padding-inline-start: calc(2 * ${theme.base.spacing});\n\n ${offsetEnd &&\n css`\n padding-inline-end: ${inlineEndButtonOffset};\n `};\n\n ${StyledButton}:not(${StyledCaseHeaderPromotedAction}) {\n margin-inline-start: 0;\n }\n\n ${StyledCaseHeaderPromotedAction}:not(:has(+ ${StyledCaseHeaderPromotedAction})) {\n margin-inline-end: ${theme.base.spacing};\n }\n `;\n});\n\nStyledHeaderActions.defaultProps = defaultThemeProp;\n\nexport const StyledCaseHeaderText = styled.div(({ theme }) => {\n const { color } = useCaseViewContext();\n\n const { foregroundColor, interactiveColor } = getCaseViewColors(theme, color);\n\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n const idStyle = css`\n color: ${foregroundColor};\n font-size: ${fontSize.xs};\n font-weight: normal;\n `;\n\n return css`\n word-break: break-word;\n\n ${StyledSubheading} {\n ${idStyle}\n ${StyledText} {\n ${idStyle}\n }\n }\n\n ${StyledBreadcrumbs} {\n max-width: 100%;\n\n > a,\n > span,\n > button,\n > svg {\n ${idStyle}\n }\n\n > a,\n > button {\n &:focus-visible {\n box-shadow: ${theme.base.shadow.focus};\n }\n }\n\n ${StyledPopover}:not(${StyledTooltip}) {\n color: ${theme.base.palette['foreground-color']};\n }\n }\n\n > ${StyledText} > ${StyledLink} {\n color: ${interactiveColor};\n }\n\n + ${StyledHeaderActions} {\n padding-inline-start: 0;\n }\n `;\n});\n\nStyledCaseHeaderText.defaultProps = defaultThemeProp;\n\nexport const StyledHeaderSummaryBlock = styled.div<{ hasItems: boolean }>(({ hasItems, theme }) => {\n const {\n base: {\n spacing,\n palette: { 'brand-primary': primary }\n }\n } = theme;\n\n const color = readableColor(primary);\n const transparentColor = tryCatch(() => transparentize(0.5, color));\n\n return css`\n ${hasItems &&\n css`\n border-inline-start: 0.0625rem solid ${transparentColor};\n `}\n ${StyledStackedFieldValue}:first-child {\n margin-inline-start: calc(2 * ${spacing});\n }\n `;\n});\n\nStyledHeaderSummaryBlock.defaultProps = defaultThemeProp;\n\nconst popoverColorReset = (theme: DefaultTheme) => {\n const {\n base: {\n palette: { interactive, light, 'foreground-color': baseForeground }\n }\n } = theme;\n\n return css`\n ${StyledPopover}:not(${StyledTooltip}) {\n color: ${baseForeground};\n\n ${StyledButtonLink},\n ${StyledLink} {\n color: ${interactive};\n text-decoration: none;\n\n &:hover,\n &:active {\n text-decoration: underline;\n }\n\n &:focus-visible {\n box-shadow:\n inset 0 0 0 0.0625rem ${light},\n 0 0 0.125rem 0.0625rem ${interactive};\n }\n }\n }\n `;\n};\n\nexport const StyledHeaderSummary = styled.dl(({ theme }) => {\n const { color: caseTypeColor } = useCaseViewContext();\n\n const { foregroundColor, interactiveUsable } = getCaseViewColors(theme, caseTypeColor);\n\n return css`\n max-width: 100%;\n min-width: 0;\n\n > ${StyledStackedFieldValue} {\n > ${StyledLabel} {\n color: ${foregroundColor};\n white-space: nowrap;\n }\n\n > ${StyledFieldValue} {\n color: ${foregroundColor};\n white-space: nowrap;\n }\n\n ${StyledButtonLink},\n ${StyledLink} {\n &:focus-visible {\n box-shadow: inset 0 0 0 0.0625rem ${foregroundColor};\n }\n\n ${!interactiveUsable &&\n css`\n color: ${foregroundColor};\n text-decoration: underline;\n `}\n }\n\n ${popoverColorReset(theme)}\n }\n `;\n});\n\nStyledHeaderSummary.defaultProps = defaultThemeProp;\n\nexport const StyledHeaderSummaryValue = styled(StyledFieldValue)<{\n bold?: boolean;\n truncate?: boolean;\n theme: DefaultTheme;\n}>(({ bold, truncate, theme }) => {\n const {\n base: {\n 'content-width': { xs }\n },\n components: {\n text: {\n h1: { 'font-weight': h1Weight }\n }\n }\n } = theme;\n\n return css`\n overflow: hidden;\n text-overflow: ellipsis;\n\n ${truncate &&\n css`\n max-width: ${xs};\n `}\n ${bold &&\n css`\n font-weight: ${h1Weight};\n `}\n /*\n * :not([hidden]) necessary to prevent hidden span with preview a11y instructions from\n * factoring into scrollWidth of element when determining truncation.\n */\n > :not([hidden]) {\n display: inline;\n }\n `;\n});\n\nStyledHeaderSummaryValue.defaultProps = defaultThemeProp;\n\nexport const StyledCaseSummaryInfo = styled.div(\n ({\n theme: {\n base: { 'border-radius': borderRadius },\n components: {\n tabs: { detached: tabsDetached },\n card: { background }\n }\n }\n }) => {\n const { intelligentGuidance } = useCaseViewContext();\n\n return css`\n overflow: auto;\n flex: 1;\n ${tabsDetached &&\n css`\n background: ${background};\n border-radius: ${borderRadius};\n border-start-start-radius: 0;\n border-start-end-radius: 0;\n `}\n ${intelligentGuidance &&\n css`\n /* Accounts for collapsed intelligentGuidance list covering summary panel content when fully scrolled. */\n padding-block-end: 4rem;\n `}\n `;\n }\n);\n\nStyledCaseSummaryInfo.defaultProps = defaultThemeProp;\n\nexport const StyledCaseSummaryContainer = styled.div(({ theme }) => {\n const {\n components: {\n 'field-value-list': {\n inline: { detached }\n },\n card: { background }\n }\n } = theme;\n return css`\n padding: calc(1.5 * ${theme.base.spacing}) calc(${theme.components.card.padding} * 2);\n\n ${detached &&\n css`\n padding: 0;\n background: ${background};\n `}\n `;\n});\n\nStyledCaseSummaryContainer.defaultProps = defaultThemeProp;\n\nexport const StyledExpandCollapseButton = styled(Button)(() => {\n return css`\n border: none;\n\n ${StyledIcon} {\n width: 1.5rem;\n height: 1.5rem;\n }\n `;\n});\n\nStyledExpandCollapseButton.defaultProps = defaultThemeProp;\n\nexport const StyledExpandCollapseSummaryButton = styled(StyledExpandCollapseButton)(({ theme }) => {\n const { summaryExpanded } = useCaseViewContext();\n\n return css`\n --half-compact-btn-height: calc(${theme.base['hit-area'].compact} / 2);\n --half-btn-compact-difference: calc(\n (${theme.base['hit-area'].mouse} - ${theme.base['hit-area'].compact}) / 2\n );\n --half-case-icon-compact-difference: calc(\n ((4 * ${theme.base.spacing}) - ${theme.base['hit-area'].compact}) / 2\n );\n @media (pointer: coarse) {\n --half-btn-compact-difference: calc(\n (${theme.base['hit-area'].finger} - ${theme.base['hit-area'].compact}) / 2\n );\n }\n position: absolute;\n z-index: 1;\n box-shadow: ${theme.base.shadow.low};\n\n ${summaryExpanded\n ? css`\n inset-block-start: calc(2 * ${theme.base.spacing} + var(--half-btn-compact-difference));\n inset-inline-start: calc(100% - var(--half-compact-btn-height));\n `\n : css`\n inset-block-end: calc(var(--half-compact-btn-height) * -1);\n inset-inline-start: calc(\n 2 * ${theme.base.spacing} + var(--half-case-icon-compact-difference)\n );\n `}\n `;\n});\n\nStyledExpandCollapseSummaryButton.defaultProps = defaultThemeProp;\n\nexport const StyledCaseSummary = styled.div(\n ({\n theme,\n theme: {\n base: {\n spacing,\n palette: { 'border-line': borderLine },\n 'border-radius': borderRadius,\n 'hit-area': { 'mouse-min': mouseMin, 'finger-min': fingerMin }\n },\n components: {\n 'case-view': {\n summary: { detached }\n },\n card: { background: cardBackground },\n tabs: { detached: tabsDetached }\n }\n }\n }) => {\n const { summaryExpanded, aboveMD, color } = useCaseViewContext();\n const { caseTypeColor, headerBackground, interactiveColor } = getCaseViewColors(theme, color);\n\n return css`\n background: ${cardBackground};\n position: relative;\n height: 100%;\n ${aboveMD &&\n summaryExpanded &&\n css`\n width: 25rem;\n `}\n\n ${detached &&\n css`\n border-radius: ${borderRadius};\n --border-radius: calc(${borderRadius} * 0.5);\n `}\n\n ${tabsDetached &&\n css`\n & ${StyledTabs} {\n &[aria-orientation='vertical'] {\n padding-top: calc(1.5 * ${spacing});\n border-block-start: 0.0625rem solid ${borderLine};\n\n & ${StyledTab} {\n height: ${mouseMin};\n\n @media (pointer: coarse) {\n height: ${fingerMin};\n }\n }\n }\n }\n `}\n\n ${caseTypeColor &&\n theme.base['case-type-colors'] === 'header-and-icon' &&\n css`\n & ${StyledTabs} {\n &[aria-orientation='vertical']::after {\n background: ${caseTypeColor};\n }\n\n &[aria-orientation='vertical']::before {\n background: ${headerBackground};\n }\n }\n\n & ${StyledTab}[aria-selected='true'] {\n background-color: ${headerBackground};\n\n span {\n color: ${interactiveColor};\n }\n }\n `}\n `;\n }\n);\n\nStyledCaseSummary.defaultProps = defaultThemeProp;\n\nexport const StyledTasks = styled.div(\n ({\n theme: {\n base: { spacing }\n }\n }) => {\n return css`\n &:not(:has(${StyledCard})) {\n /* Add negative top margin to compensate extra row-gap due to empty Tasks container */\n margin-block-start: calc(-2 * ${spacing});\n }\n `;\n }\n);\nStyledTasks.defaultProps = defaultThemeProp;\n\nexport const StyledTabPanelWrapper = styled.div(\n ({\n theme: {\n base: {\n animation: { speed, timing }\n },\n components: {\n card: { 'border-radius': cardBorderRadius }\n }\n }\n }) => {\n const { start } = useDirection();\n\n return css`\n ${StyledTabPanel} {\n ${StyledProgressBackdrop} {\n border-radius: ${cardBorderRadius};\n }\n }\n\n /* Top-level horizontal tabs (with or without overflow \"All tabs\" button) - slide in from top */\n ${StyledTabs} ~ &,\n ${StyledAllTabsWrapper} ~ & {\n position: relative;\n z-index: 0;\n\n > ${StyledTabPanel} {\n --reveal-from: 0.7;\n --slide-in-y-start-offset: -0.8rem;\n animation-name: ${animations.reveal}, ${animations.slideInYStart};\n animation-duration: max(calc(${speed} * 2), 1ms);\n animation-timing-function: ${timing.ease};\n\n @media (prefers-reduced-motion: reduce) {\n animation-duration: 1ms;\n }\n }\n }\n\n /* Top-level vertical tabs - slide in from start*/\n &:not(${StyledTabs} ~ &):not(${StyledAllTabsWrapper} ~ &) > ${StyledTabPanel} {\n ${start === 'right'\n ? css`\n --slide-in-x-end-offset: 1.5rem;\n animation-name: ${animations.reveal}, ${animations.slideInXEnd};\n `\n : css`\n --slide-in-x-start-offset: -1.5rem;\n animation-name: ${animations.reveal}, ${animations.slideInXStart};\n `}\n animation-duration: max(calc(${speed} * 2), 1ms);\n animation-timing-function: ${timing.ease};\n\n @media (prefers-reduced-motion: reduce) {\n animation-duration: 1ms;\n }\n }\n\n /* Nested tab panels - always fade only */\n ${StyledTabPanel} & ${StyledTabPanel} {\n --reveal-from: 0.7;\n animation-name: ${animations.reveal};\n animation-duration: max(calc(${speed} * 2), 1ms);\n animation-timing-function: ${timing.ease};\n\n @media (prefers-reduced-motion: reduce) {\n animation-duration: 1ms;\n }\n }\n `;\n }\n);\n\nStyledTabPanelWrapper.defaultProps = defaultThemeProp;\n\n// This component defintion was primarily required to conditionally hide empty div and avoid unnecessary row gap in work area.\nexport const StyledBannersStagesTasksContainer = styled.div(() => {\n return css`\n &:has(> ${StyledTasks}:only-child > :only-child:empty[data-flow]) {\n display: none;\n }\n `;\n});\n\nexport const StyledWorkArea = styled.div(\n ({\n theme: {\n base: {\n palette: { 'border-line': borderLine },\n spacing,\n 'border-radius': borderRadius,\n breakpoints\n },\n components: {\n 'case-view': {\n assignments: {\n detached: assignmentDetached,\n background: assignmentBackground,\n 'foreground-color': assignmentForegroundColor\n }\n },\n tabs: { detached: tabsDetached },\n card: { background, 'foreground-color': foregroundColor, 'border-radius': cardBorderRadius }\n }\n }\n }) => {\n const { backgroundColor } = calculateBackgroundAndContrastColor(background, foregroundColor);\n const foregroundColorForAssignment = calculateForegroundColor(\n assignmentBackground,\n assignmentForegroundColor\n );\n const { summaryExpanded, aboveMD, intelligentGuidance, isPreview } = useCaseViewContext();\n let pbeRem = 0;\n\n if (intelligentGuidance) {\n pbeRem = aboveMD && !summaryExpanded ? 4 : 6;\n }\n\n return css`\n grid-area: work-area;\n padding: calc(2 * ${spacing});\n @media (width < ${breakpoints.sm}) {\n padding: calc(2 * ${spacing}) calc(0.75 * ${spacing});\n }\n\n /* Prevents unnecessary gap when case view has neither stages nor assignments */\n &:has(> ${StyledBannersStagesTasksContainer} > ${StyledTasks}:first-child:empty) {\n ${StyledBannersStagesTasksContainer} {\n display: none;\n }\n }\n\n ${aboveMD &&\n css`\n padding: calc(2 * ${spacing}) 0;\n\n /* This is required to make scrollStick work. */\n ${!isPreview &&\n css`\n height: max-content;\n `}\n\n ${!summaryExpanded &&\n css`\n margin-inline-start: calc(2 * ${spacing});\n `}\n `}\n /* Order of style here is necessary for overriding styles above. */\n ${pbeRem > 0 &&\n css`\n /* Accounts for collapsed intelligentGuidance bubble covering work area content when fully scrolled. */\n padding-block-end: ${pbeRem}rem;\n `}\n &:has(${StyledAssignments}),\n &:has(${StyledHierarchicalAssignments}) {\n ${StyledStages} {\n border-block-end: 0.0625rem solid ${borderLine};\n\n &,\n ${StyledStageContainer}:first-of-type > ${StyledStage} {\n border-end-start-radius: 0;\n }\n\n &,\n ${StyledStageContainer}:last-of-type > ${StyledStage} {\n border-end-end-radius: 0;\n }\n }\n }\n\n ${tabsDetached &&\n css`\n ${StyledAllTabsWrapper} {\n border-start-start-radius: ${cardBorderRadius};\n border-start-end-radius: ${cardBorderRadius};\n\n ${StyledTabs} {\n border-radius: unset;\n border-start-end-radius: inherit;\n }\n\n ${StylesAllTabsButtonWrapper}, ${StyledMenuButton} {\n border-start-start-radius: inherit;\n }\n }\n `}\n\n /* Ensure horizontal tabs stay above sliding tab content */\n ${StyledTabs}[aria-orientation='horizontal'],\n ${StyledAllTabsWrapper} {\n z-index: 1;\n }\n\n &:has(${StyledStages}) {\n ${StyledCard}${StyledAssignments},\n ${StyledCard}${StyledHierarchicalAssignments} {\n margin-block-start: calc(-2 * ${spacing});\n border-start-start-radius: 0;\n border-start-end-radius: 0;\n }\n\n &:has(${StyledCard}${StyledAssignments} > ${StyledCardHeader}),\n &:has(${StyledCard}${StyledHierarchicalAssignments} > ${StyledCardHeader}) {\n ${StyledCard}${StyledAssignments},\n ${StyledCard}${StyledHierarchicalAssignments} {\n background: ${assignmentBackground};\n color: ${foregroundColorForAssignment};\n ${assignmentDetached &&\n css`\n ${StyledTaskList} {\n background-color: ${backgroundColor};\n border: solid 0.0625rem ${borderLine};\n border-radius: var(--border-radius, ${borderRadius});\n\n ${StyledSummaryListItem} {\n padding: calc(${spacing} / 2) ${spacing};\n }\n }\n `}\n }\n }\n }\n `;\n }\n);\n\nStyledWorkArea.defaultProps = defaultThemeProp;\n\nexport const StyledUtilitiesHeading = styled(Text)``;\n\nexport const StyledExpandCollapseUtilitiesButton = styled(StyledExpandCollapseButton)(() => {\n const { utilitiesExpanded } = useCaseViewContext();\n\n return css`\n /* Centers button over the utilities summary */\n margin-inline-end: ${utilitiesExpanded && '0.625rem'};\n `;\n});\n\nStyledExpandCollapseUtilitiesButton.defaultProps = defaultThemeProp;\n\nconst genAICoachReservedSpace = '4rem';\n\nexport const StyledUtilities = styled.div(({ theme }) => {\n const { utilitiesExpanded, aboveLG, aboveMD, hasGenAICoach } = useCaseViewContext();\n\n return css`\n height: max-content;\n margin-block: calc(2 * ${theme.base.spacing});\n\n ${StyledCardContent} ${StyledProgressBackdrop} {\n border-radius: ${theme.components.card['border-radius']};\n }\n\n /* If utilities are in an expanded drawer. */\n\n ${utilitiesExpanded &&\n aboveMD &&\n !aboveLG &&\n css`\n /* Maintains the column width to avoid page content shift. */\n visibility: hidden;\n `}\n ${aboveLG &&\n utilitiesExpanded &&\n css`\n width: 25rem;\n `}\n /* Selects the h2 in the utilities column, not the drawer. */\n ${StyledUtilitiesHeading} {\n /* Hide the utilities h2 under certain conditions.*/\n ${((aboveMD && !utilitiesExpanded) || (aboveMD && utilitiesExpanded && !aboveLG)) &&\n hideVisually()}\n }\n\n /* Reserve space below so the docked GenAI coach doesn't overlap utility items. */\n ${hasGenAICoach &&\n css`\n margin-block-end: ${genAICoachReservedSpace};\n `}\n `;\n});\n\nStyledUtilities.defaultProps = defaultThemeProp;\n\nexport const StyledSummary = styled.div(\n ({\n theme: {\n base: {\n spacing,\n breakpoints,\n 'z-index': zIndex,\n palette: { 'app-background': appBackground }\n },\n components: {\n 'app-shell': {\n nav: { background: navBackground }\n },\n 'case-view': {\n summary: { detached: summaryDetached },\n utilities: { detached: utilitiesDetached }\n }\n }\n }\n }) => {\n const { aboveSM, aboveMD, persistentUtility, aboveXL, summaryExpanded, isPreview } =\n useCaseViewContext();\n const shouldRenderMobileTabs = !aboveMD || (persistentUtility && !aboveXL) || !summaryExpanded;\n const inlineStartPadding =\n navBackground === appBackground && summaryExpanded ? `${spacing}` : `calc(${spacing} * 2)`;\n\n return css`\n top: var(--top-offset);\n width: 100%;\n z-index: ${zIndex.popover};\n\n ${aboveMD &&\n summaryExpanded &&\n css`\n height: var(--case-view-height);\n `}\n\n ${summaryDetached &&\n aboveSM &&\n css`\n padding-inline-start: ${inlineStartPadding};\n padding-inline-end: ${utilitiesDetached && shouldRenderMobileTabs\n ? `calc(2 * ${spacing})`\n : 0};\n padding-block: ${shouldRenderMobileTabs ? 0 : `calc(2 * ${spacing})`};\n `}\n\n ${isPreview &&\n css`\n padding: 0;\n `}\n\n ${aboveMD\n ? css`\n position: sticky;\n `\n : css`\n @media (min-height: ${breakpoints.sm}) {\n position: sticky;\n }\n `}\n `;\n }\n);\n\nStyledSummary.defaultProps = defaultThemeProp;\n\nexport const StyledCaseDrawer = styled.div<{\n previewActive?: AppShellContextValue['previewActive'];\n utilitiesExpanded?: boolean;\n}>(({ previewActive, utilitiesExpanded, theme }) => {\n return css`\n background-color: ${theme.base.palette['primary-background']};\n height: calc(100dvh - var(--appshell-total-offset, 0));\n inset-block-start: var(--appshell-top-offset, 0);\n z-index: ${theme.base['z-index'].drawer - 1};\n max-width: ${resizeDrawerMinWidth};\n\n ${previewActive &&\n css`\n @media (min-width: ${theme.base.breakpoints.md}) {\n inset-inline-end: ${resizeDrawerDefaultWidth};\n ${utilitiesExpanded &&\n css`\n inset-inline-end: var(--resize-drawer-width);\n `}\n }\n `}\n ${StyledGenAICoachContainer} {\n width: calc(${resizeDrawerMinWidth} - 2rem);\n }\n `;\n});\n\nStyledCaseDrawer.defaultProps = defaultThemeProp;\n\nexport const StyledCaseDrawerContent = styled.div(\n ({\n theme: {\n base: {\n palette: { 'app-background': appBackground },\n spacing\n }\n }\n }) => {\n const { hasGenAICoach } = useCaseViewContext();\n\n return css`\n background: ${appBackground};\n padding: calc(2 * ${spacing});\n height: 100%;\n overflow: auto;\n\n /* Reserve scroll space so the docked GenAI coach doesn't overlap utility items. */\n ${hasGenAICoach &&\n css`\n padding-block-end: ${genAICoachReservedSpace};\n `}\n `;\n }\n);\n\nStyledCaseDrawerContent.defaultProps = defaultThemeProp;\n\nexport const StyledPersistentUtility = styled.div<{ persistentUtilityExpanded?: boolean }>(\n ({ theme, persistentUtilityExpanded }) => {\n return css`\n width: ${persistentUtilityExpanded ? '100%' : theme.base['content-width'].md};\n overflow: auto;\n position: sticky;\n z-index: 1;\n height: var(--case-view-height);\n inset-block-start: var(--top-offset);\n inset-block-end: var(--appshell-bottom-offset, 0);\n padding-block: calc(2 * ${theme.base.spacing});\n `;\n }\n);\n\nStyledPersistentUtility.defaultProps = defaultThemeProp;\n\nexport const StyledPersistentContainer = styled.div(({ theme }) => {\n return css`\n height: 100%;\n\n &&& ${StyledCardHeader} {\n padding-inline-start: ${theme.base.spacing};\n }\n `;\n});\n\nStyledPersistentContainer.defaultProps = defaultThemeProp;\n\nexport const StyledPersistentContent = styled.div(({ theme }) => {\n return css`\n height: calc(100% - calc(4 * ${theme.base.spacing}));\n `;\n});\n\nStyledPersistentContent.defaultProps = defaultThemeProp;\n\nexport const ScrollStick = styled.div`\n position: sticky;\n top: 0;\n`;\n\nexport const StyledCaseView = styled.div(\n ({\n theme: {\n base: {\n palette: { 'app-background': appBackground },\n spacing,\n 'border-radius': borderRadius\n },\n components: {\n 'case-view': {\n utilities: {\n detached: utilitiesDetached,\n background: utilitiesBackground,\n 'foreground-color': utilitiesForegroundColor\n },\n summary: { detached: summaryDetached }\n }\n }\n }\n }) => {\n const utilitiesForegroundComputed = calculateForegroundColor(\n utilitiesBackground,\n utilitiesForegroundColor\n );\n const { aboveSM, aboveMD, isPreview, summaryExpanded } = useCaseViewContext();\n\n return css`\n --top-offset: calc(\n ${summaryExpanded ? 'var(--summary-height)' : '0rem'} + var(--appshell-top-offset, 0rem)\n );\n --case-view-height: calc(100dvh - var(--top-offset) - var(--appshell-bottom-offset, 0rem));\n position: relative;\n min-height: var(--case-view-height);\n background: ${appBackground};\n\n ${aboveMD &&\n css`\n ${StyledUtilities}:last-child {\n margin-inline-end: calc(2 * ${spacing});\n color: ${utilitiesForegroundComputed};\n\n ${!utilitiesDetached &&\n css`\n background: ${utilitiesBackground};\n margin-inline-end: 0;\n padding: calc(2 * ${spacing});\n padding-inline-end: 0;\n border-start-start-radius: ${borderRadius};\n border-end-start-radius: ${borderRadius};\n border-start-end-radius: 0;\n border-end-end-radius: 0;\n\n ${StyledCard},\n ${StyledGenAICoachContainer} {\n border-start-end-radius: 0;\n border-end-end-radius: 0;\n }\n\n ${StyledGenAICoachContainer} {\n inset-inline-end: 0;\n }\n `}\n }\n `}\n\n ${aboveSM &&\n summaryDetached &&\n !isPreview &&\n css`\n &:not(:has(${StyledUtilities})) {\n ${StyledSummary} {\n padding-inline-end: calc(2 * ${spacing});\n }\n\n ${StyledCaseHeader} {\n border-end-end-radius: ${borderRadius};\n }\n }\n `}\n\n ${!aboveMD &&\n css`\n ${StyledGenAICoachContainer} {\n height: 42.5rem;\n\n ${StyledInitialMessageContainer} {\n justify-content: center;\n }\n }\n `}\n `;\n }\n);\n\nStyledCaseView.defaultProps = defaultThemeProp;\n\nexport const StyledUtilitiesHeader = styled(Text)`\n align-self: center;\n\n &:not(:focus) {\n ${hideVisually}\n }\n`;\n\nStyledUtilitiesHeader.defaultProps = defaultThemeProp;\n\nexport const StyledCoachButton = styled(AIButton)(({\n theme: {\n base: { spacing, breakpoints }\n }\n}) => {\n const { previewActive } = useContext(AppShellContext);\n\n return css`\n position: fixed;\n width: 2.75rem;\n height: 2.75rem;\n inset-block-end: calc(\n var(--footer-height, var(--appshell-bottom-offset, 0rem)) + 2 * ${spacing}\n );\n inset-inline-end: calc(2 * ${spacing});\n ${previewActive &&\n css`\n @media (min-width: ${breakpoints.md}) {\n margin-inline-end: min(var(--resize-drawer-width), ${resizeDrawerMaxWidth});\n }\n `}\n `;\n});\n\nStyledCoachButton.defaultProps = defaultThemeProp;\n\nexport const StyledUtilitiesWrapper = styled.div``;\n\nexport const StyledCaseViewIcon = styled(Icon)(({ theme }) => {\n const { color } = useCaseViewContext();\n const caseTypeColorsEnabled =\n theme.base['case-type-colors'] === 'icon-only' ||\n theme.base['case-type-colors'] === 'header-and-icon';\n const resolvedCaseTypeColor =\n caseTypeColorsEnabled && color !== undefined ? resolveCaseTypeColor(theme, color) : undefined;\n\n return css`\n --icon-color: ${resolvedCaseTypeColor ?? theme.base.palette['brand-accent']};\n --gradient-start: oklch(from var(--icon-color) calc(l - 0.3) calc(c * 1.5) h);\n --gradient-mid: oklch(from var(--icon-color) l c h);\n --gradient-end: oklch(from var(--icon-color) calc(l + 0.5) calc(c * 1.5) h);\n\n ${theme.components['case-view'].icon.color !== 'auto' &&\n css`\n color: ${theme.components['case-view'].icon.color};\n `}\n\n ${theme.components['case-view'].icon.background !== 'auto' &&\n css`\n background: ${theme.components['case-view'].icon.background};\n `}\n\n ${theme.components['case-view'].icon.background === 'auto' &&\n caseTypeColorsEnabled &&\n resolvedCaseTypeColor &&\n css`\n background: ${resolvedCaseTypeColor};\n `}\n\n ${theme.components['case-view'].icon['box-shadow'] !== 'auto' &&\n css`\n box-shadow: ${theme.components['case-view'].icon['box-shadow']};\n `}\n `;\n});\n\nStyledCaseViewIcon.defaultProps = defaultThemeProp;\n"]}
1
+ {"version":3,"file":"CaseView.styles.js","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport type { DefaultTheme } from 'styled-components';\nimport { getContrast, hideVisually, mix, rgba, transparentize } from 'polished';\nimport { useContext } from 'react';\n\nimport {\n Button,\n calculateFontSize,\n CardContent,\n defaultThemeProp,\n resolveSupplementalColor,\n StyledBreadcrumbs,\n StyledButtonLink,\n StyledFieldValue,\n StyledInlineFieldValueRow,\n StyledStackedFieldValue,\n StyledIcon,\n StyledLabel,\n StyledPopover,\n StyledText,\n StyledTooltip,\n tryCatch,\n FieldValueList,\n StyledLink,\n readableHue,\n StyledCard,\n Text,\n readableColor,\n AppShellContext,\n AIButton,\n StyledButton,\n calculateForegroundColor,\n calculateBackgroundAndContrastColor,\n isSolidColor,\n StyledSummaryListItem,\n StyledProgressBackdrop,\n Image,\n Icon,\n animations,\n useDirection\n} from '@pega/cosmos-react-core';\nimport type { FontSize } from '@pega/cosmos-react-core';\nimport { StyledMenu } from '@pega/cosmos-react-core/lib/components/Menu/Menu.styles';\nimport type { AppShellContextValue } from '@pega/cosmos-react-core/lib/components/AppShell/AppShellContext';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport {\n StyledAllTabsWrapper,\n StyledTabs,\n StylesAllTabsButtonWrapper\n} from '@pega/cosmos-react-core/lib/components/Tabs/Tabs.styles';\nimport {\n resizeDrawerMinWidth,\n resizeDrawerMaxWidth,\n resizeDrawerDefaultWidth,\n wcagContrast\n} from '@pega/cosmos-react-core/lib/styles/constants';\nimport { StyledMenuButton } from '@pega/cosmos-react-core/lib/components/MenuButton/MenuButton';\nimport { StyledTab } from '@pega/cosmos-react-core/lib/components/Tabs/Tab';\nimport { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\n\nimport {\n StyledStage,\n StyledStageContainer,\n StyledStages,\n StyledStagesWrapper\n} from '../Stages/Stages.styles';\nimport { StyledAssignments } from '../Assignments/Assignments.styles';\nimport { StyledAssignments as StyledHierarchicalAssignments } from '../HierarchicalAssignments/Assignments.styles';\nimport {\n StyledGenAICoachContainer,\n StyledInitialMessageContainer\n} from '../GenAICoach/GenAICoach.styles';\nimport { StyledTaskList } from '../Tasks/TaskList';\nimport { oneColumnDetailsColumnWidth } from '../Details/Details.styles';\n\nimport { useCaseViewContext } from './CaseView.context';\n\nconst labelWidth = '16ch';\nconst inlineEndButtonOffset = '0.375rem';\n\nexport const resolveCaseTypeColor = (\n theme: DefaultTheme,\n color: string | undefined\n): string | undefined => {\n if (!color) return undefined;\n const supplementalColor = resolveSupplementalColor(theme, color);\n if (supplementalColor !== undefined) return supplementalColor;\n return color;\n};\n\nconst mixCaseColorWithBackground = (color: string, background: string) =>\n mix(0.85, background, color);\n\nconst getCaseTypeHeaderColors = (\n theme: DefaultTheme,\n color: string | undefined\n): { caseTypeColor: string | undefined; headerBackground: string; headerForeground: string } => {\n const resolvedCaseTypeColor = resolveCaseTypeColor(theme, color);\n const headerBackground =\n resolvedCaseTypeColor &&\n theme.base['case-type-colors'] === 'header-and-icon' &&\n isSolidColor(theme.components.card.background)\n ? mixCaseColorWithBackground(resolvedCaseTypeColor, theme.components.card.background)\n : theme.components['case-view'].header.background;\n const headerForeground =\n resolvedCaseTypeColor && theme.base['case-type-colors'] === 'header-and-icon'\n ? readableColor(headerBackground)\n : calculateForegroundColor(\n headerBackground,\n theme.components['case-view'].header['foreground-color']\n );\n return { caseTypeColor: resolvedCaseTypeColor ?? undefined, headerBackground, headerForeground };\n};\n\ninterface CaseViewColors {\n caseTypeColor: string | undefined;\n headerBackground: string;\n foregroundColor: string;\n elementBackground: string;\n interactiveColor: string;\n interactiveUsable: boolean;\n hoverBackground: string;\n}\n\nconst getCaseViewColors = (\n theme: DefaultTheme,\n caseTypeColor: string | undefined\n): CaseViewColors => {\n const interactive = theme.base.palette.interactive;\n\n const caseTypeHeaderColors = getCaseTypeHeaderColors(theme, caseTypeColor);\n const headerBackground = caseTypeHeaderColors.headerBackground;\n const foregroundColor = caseTypeHeaderColors.headerForeground;\n\n const isGradientBackground = !isSolidColor(headerBackground);\n\n const elementBackground = isGradientBackground\n ? readableColor(foregroundColor)\n : headerBackground;\n\n const interactiveUsable = getContrast(elementBackground, interactive) >= wcagContrast.AA;\n const interactiveColor =\n !isGradientBackground && interactiveUsable ? interactive : foregroundColor;\n\n let hoverBackground = rgba(interactiveColor, 0.15);\n\n if (!isGradientBackground && interactiveUsable) {\n hoverBackground = readableHue(interactive, interactiveColor);\n }\n\n return {\n caseTypeColor: caseTypeHeaderColors.caseTypeColor,\n headerBackground,\n foregroundColor,\n elementBackground,\n interactiveColor,\n interactiveUsable,\n hoverBackground\n };\n};\n\nexport const StyledSummaryPrimaryList = styled(FieldValueList)<{\n wrapped?: boolean;\n}>(({ theme, wrapped }) => {\n const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n const detached = theme.components['field-value-list'].inline.detached;\n\n return css`\n ${wrapped\n ? css`\n grid-template-columns: minmax(0, 1fr);\n `\n : css`\n ${detached &&\n css`\n gap: calc(${theme.base.spacing});\n `}\n grid-template-columns: ${labelWidth} auto;\n `}\n ${StyledFieldValue} {\n font-size: ${fontSizes[theme.components.text.h1['font-size'] as FontSize]};\n font-weight: ${theme.components.text.h1['font-weight']};\n\n > ${StyledButtonLink} {\n font-weight: inherit;\n }\n }\n `;\n});\n\nStyledSummaryPrimaryList.defaultProps = defaultThemeProp;\n\nexport const StyledSummarySecondaryList = styled(FieldValueList)(() => {\n return css`\n ${StyledStackedFieldValue} {\n grid-column: 1 / -1;\n }\n `;\n});\n\nexport const StyledCaseSummaryFields = styled.div(({ theme }) => {\n const {\n components: {\n 'field-value-list': {\n inline: { detached }\n }\n }\n } = theme;\n\n return (\n detached &&\n css`\n ${StyledSummaryPrimaryList} {\n padding-block-start: calc(${theme.components.card.padding} * 2);\n padding-inline: calc(${theme.components.card.padding} * 2);\n }\n\n ${StyledSummarySecondaryList} {\n padding: calc(${theme.components.card.padding} * 2);\n }\n `\n );\n});\n\nStyledCaseSummaryFields.defaultProps = defaultThemeProp;\n\nexport const StyledSummaryTabContent = styled(CardContent)(({ theme }) => {\n const {\n base: { spacing }\n } = theme;\n return css`\n ${StyledSummarySecondaryList} {\n > ${StyledStackedFieldValue} {\n max-width: ${oneColumnDetailsColumnWidth};\n }\n\n > ${StyledFieldValue}, > ${StyledInlineFieldValueRow} > ${StyledFieldValue} {\n max-width: calc(${oneColumnDetailsColumnWidth} - ${labelWidth} - 2 * ${spacing});\n }\n }\n `;\n});\n\nStyledSummaryTabContent.defaultProps = defaultThemeProp;\n\nexport const StyledSummaryHeading = styled(Text)(({ theme }) => {\n return css`\n margin-block-end: ${theme.base.spacing};\n `;\n});\n\nStyledSummaryHeading.defaultProps = defaultThemeProp;\n\nexport const StyledCaseViewImage = styled(Image)`\n max-height: 100%;\n`;\n\nexport const StyledCaseHeader = styled.div(({ theme }) => {\n const {\n components: {\n 'case-view': {\n summary: { detached: summaryDetached },\n utilities: { detached: utilitiesDetached }\n }\n },\n base: { 'border-radius': borderRadius, spacing, shadow, 'z-index': zIndex, palette }\n } = theme;\n const { aboveSM, aboveMD, color, persistentUtility, aboveXL, summaryExpanded, isPreview } =\n useCaseViewContext();\n const shouldRenderMobileTabs = !aboveMD || (persistentUtility && !aboveXL) || !summaryExpanded;\n const caseHeaderBorderRadius = shouldRenderMobileTabs\n ? `0 0 ${utilitiesDetached ? borderRadius : 0} ${borderRadius}`\n : `${borderRadius} ${borderRadius} 0 0`;\n\n const { headerBackground, foregroundColor } = getCaseViewColors(theme, color);\n\n return css`\n background: ${headerBackground};\n color: ${foregroundColor};\n padding: ${spacing} calc(2 * ${spacing});\n position: relative;\n\n ${summaryDetached &&\n css`\n border-bottom: 0.0625rem solid ${palette['border-line']};\n `}\n ${summaryDetached &&\n !isPreview &&\n aboveSM &&\n css`\n border-radius: ${caseHeaderBorderRadius};\n `}\n h1:focus-visible {\n outline: transparent;\n box-shadow: ${shadow.focus};\n }\n\n ${StyledMenu} {\n color: ${palette['foreground-color']};\n z-index: ${zIndex.popover + 1};\n }\n `;\n});\n\nStyledCaseHeader.defaultProps = defaultThemeProp;\n\nexport const StyledFollowIconWrap = styled.label`\n font-size: 1.25rem;\n\n input {\n ${hideVisually}\n }\n\n input:focus + svg {\n box-shadow: ${({ theme }) => theme.base.shadow.focus};\n }\n`;\n\nStyledFollowIconWrap.defaultProps = defaultThemeProp;\n\nexport const StyledSubheading = styled.div``;\n\nStyledSubheading.defaultProps = defaultThemeProp;\n\nexport const StyledCaseHeaderPromotedAction = styled(Button)(({ theme }) => {\n const { color: caseTypeColor } = useCaseViewContext();\n\n const { elementBackground, interactiveColor, hoverBackground } = getCaseViewColors(\n theme,\n caseTypeColor\n );\n\n return css`\n --button-background-color: ${elementBackground};\n color: ${interactiveColor};\n background-color: transparent;\n border-color: ${interactiveColor};\n\n @media (hover: hover) {\n &:hover {\n --button-background-color: ${hoverBackground};\n color: ${interactiveColor};\n background-color: ${hoverBackground};\n border-color: ${interactiveColor};\n }\n\n &:active {\n --button-background-color: ${hoverBackground};\n color: ${interactiveColor};\n background-color: ${hoverBackground};\n border-color: ${interactiveColor};\n }\n }\n `;\n});\n\nStyledCaseHeaderPromotedAction.defaultProps = defaultThemeProp;\n\nexport const StyledHeaderActions = styled.div<{ offsetEnd: boolean }>(({ offsetEnd, theme }) => {\n return css`\n margin-inline-start: auto;\n padding-block: ${theme.base.spacing};\n padding-inline-start: calc(2 * ${theme.base.spacing});\n\n ${offsetEnd &&\n css`\n padding-inline-end: ${inlineEndButtonOffset};\n `};\n\n ${StyledButton}:not(${StyledCaseHeaderPromotedAction}) {\n margin-inline-start: 0;\n }\n\n ${StyledCaseHeaderPromotedAction}:not(:has(+ ${StyledCaseHeaderPromotedAction})) {\n margin-inline-end: ${theme.base.spacing};\n }\n `;\n});\n\nStyledHeaderActions.defaultProps = defaultThemeProp;\n\nexport const StyledCaseHeaderText = styled.div(({ theme }) => {\n const { color } = useCaseViewContext();\n\n const { foregroundColor, interactiveColor } = getCaseViewColors(theme, color);\n\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n const idStyle = css`\n color: ${foregroundColor};\n font-size: ${fontSize.xs};\n font-weight: normal;\n `;\n\n return css`\n word-break: break-word;\n\n ${StyledSubheading} {\n ${idStyle}\n ${StyledText} {\n ${idStyle}\n }\n }\n\n ${StyledBreadcrumbs} {\n max-width: 100%;\n\n > a,\n > span,\n > button,\n > svg {\n ${idStyle}\n }\n\n > a,\n > button {\n &:focus-visible {\n box-shadow: ${theme.base.shadow.focus};\n }\n }\n\n ${StyledPopover}:not(${StyledTooltip}) {\n color: ${theme.base.palette['foreground-color']};\n }\n }\n\n > ${StyledText} > ${StyledLink} {\n color: ${interactiveColor};\n }\n\n + ${StyledHeaderActions} {\n padding-inline-start: 0;\n }\n `;\n});\n\nStyledCaseHeaderText.defaultProps = defaultThemeProp;\n\nexport const StyledHeaderSummaryBlock = styled.div<{ hasItems: boolean }>(({ hasItems, theme }) => {\n const {\n base: {\n spacing,\n palette: { 'brand-primary': primary }\n }\n } = theme;\n\n const color = readableColor(primary);\n const transparentColor = tryCatch(() => transparentize(0.5, color));\n\n return css`\n ${hasItems &&\n css`\n border-inline-start: 0.0625rem solid ${transparentColor};\n `}\n ${StyledStackedFieldValue}:first-child {\n margin-inline-start: calc(2 * ${spacing});\n }\n `;\n});\n\nStyledHeaderSummaryBlock.defaultProps = defaultThemeProp;\n\nconst popoverColorReset = (theme: DefaultTheme) => {\n const {\n base: {\n palette: { interactive, light, 'foreground-color': baseForeground }\n }\n } = theme;\n\n return css`\n ${StyledPopover}:not(${StyledTooltip}) {\n color: ${baseForeground};\n\n ${StyledButtonLink},\n ${StyledLink} {\n color: ${interactive};\n text-decoration: none;\n\n &:hover,\n &:active {\n text-decoration: underline;\n }\n\n &:focus-visible {\n box-shadow:\n inset 0 0 0 0.0625rem ${light},\n 0 0 0.125rem 0.0625rem ${interactive};\n }\n }\n }\n `;\n};\n\nexport const StyledHeaderSummary = styled.dl(({ theme }) => {\n const { color: caseTypeColor } = useCaseViewContext();\n\n const { foregroundColor, interactiveUsable } = getCaseViewColors(theme, caseTypeColor);\n\n return css`\n max-width: 100%;\n min-width: 0;\n\n > ${StyledStackedFieldValue} {\n > ${StyledLabel} {\n color: ${foregroundColor};\n white-space: nowrap;\n }\n\n > ${StyledFieldValue} {\n color: ${foregroundColor};\n white-space: nowrap;\n }\n\n ${StyledButtonLink},\n ${StyledLink} {\n &:focus-visible {\n box-shadow: inset 0 0 0 0.0625rem ${foregroundColor};\n }\n\n ${!interactiveUsable &&\n css`\n color: ${foregroundColor};\n text-decoration: underline;\n `}\n }\n\n ${popoverColorReset(theme)}\n }\n `;\n});\n\nStyledHeaderSummary.defaultProps = defaultThemeProp;\n\nexport const StyledHeaderSummaryValue = styled(StyledFieldValue)<{\n bold?: boolean;\n truncate?: boolean;\n theme: DefaultTheme;\n}>(({ bold, truncate, theme }) => {\n const {\n base: {\n 'content-width': { xs }\n },\n components: {\n text: {\n h1: { 'font-weight': h1Weight }\n }\n }\n } = theme;\n\n return css`\n overflow: hidden;\n text-overflow: ellipsis;\n\n ${truncate &&\n css`\n max-width: ${xs};\n `}\n ${bold &&\n css`\n font-weight: ${h1Weight};\n `}\n /*\n * :not([hidden]) necessary to prevent hidden span with preview a11y instructions from\n * factoring into scrollWidth of element when determining truncation.\n */\n > :not([hidden]) {\n display: inline;\n }\n `;\n});\n\nStyledHeaderSummaryValue.defaultProps = defaultThemeProp;\n\nexport const StyledCaseSummaryInfo = styled.div(\n ({\n theme: {\n base: { 'border-radius': borderRadius },\n components: {\n tabs: { detached: tabsDetached },\n card: { background }\n }\n }\n }) => {\n const { intelligentGuidance } = useCaseViewContext();\n\n return css`\n overflow: auto;\n flex: 1;\n ${tabsDetached &&\n css`\n background: ${background};\n border-radius: ${borderRadius};\n border-start-start-radius: 0;\n border-start-end-radius: 0;\n `}\n ${intelligentGuidance &&\n css`\n /* Accounts for collapsed intelligentGuidance list covering summary panel content when fully scrolled. */\n padding-block-end: 4rem;\n `}\n `;\n }\n);\n\nStyledCaseSummaryInfo.defaultProps = defaultThemeProp;\n\nexport const StyledCaseSummaryContainer = styled.div(({ theme }) => {\n const {\n components: {\n 'field-value-list': {\n inline: { detached }\n },\n card: { background }\n }\n } = theme;\n return css`\n padding: calc(1.5 * ${theme.base.spacing}) calc(${theme.components.card.padding} * 2);\n\n ${detached &&\n css`\n padding: 0;\n background: ${background};\n `}\n `;\n});\n\nStyledCaseSummaryContainer.defaultProps = defaultThemeProp;\n\nexport const StyledExpandCollapseButton = styled(Button)(() => {\n return css`\n border: none;\n\n ${StyledIcon} {\n width: 1.5rem;\n height: 1.5rem;\n }\n `;\n});\n\nStyledExpandCollapseButton.defaultProps = defaultThemeProp;\n\nexport const StyledExpandCollapseSummaryButton = styled(StyledExpandCollapseButton)(({ theme }) => {\n const { summaryExpanded } = useCaseViewContext();\n\n return css`\n --half-compact-btn-height: calc(${theme.base['hit-area'].compact} / 2);\n --half-btn-compact-difference: calc(\n (${theme.base['hit-area'].mouse} - ${theme.base['hit-area'].compact}) / 2\n );\n --half-case-icon-compact-difference: calc(\n ((4 * ${theme.base.spacing}) - ${theme.base['hit-area'].compact}) / 2\n );\n @media (pointer: coarse) {\n --half-btn-compact-difference: calc(\n (${theme.base['hit-area'].finger} - ${theme.base['hit-area'].compact}) / 2\n );\n }\n position: absolute;\n z-index: 1;\n box-shadow: ${theme.base.shadow.low};\n\n ${summaryExpanded\n ? css`\n inset-block-start: calc(2 * ${theme.base.spacing} + var(--half-btn-compact-difference));\n inset-inline-start: calc(100% - var(--half-compact-btn-height));\n `\n : css`\n inset-block-end: calc(var(--half-compact-btn-height) * -1);\n inset-inline-start: calc(\n 2 * ${theme.base.spacing} + var(--half-case-icon-compact-difference)\n );\n `}\n `;\n});\n\nStyledExpandCollapseSummaryButton.defaultProps = defaultThemeProp;\n\nexport const StyledCaseSummary = styled.div(\n ({\n theme,\n theme: {\n base: {\n spacing,\n palette: { 'border-line': borderLine },\n 'border-radius': borderRadius,\n 'hit-area': { 'mouse-min': mouseMin, 'finger-min': fingerMin }\n },\n components: {\n 'case-view': {\n summary: { detached }\n },\n card: { background: cardBackground },\n tabs: { detached: tabsDetached }\n }\n }\n }) => {\n const { summaryExpanded, aboveMD, color } = useCaseViewContext();\n const { caseTypeColor, headerBackground, interactiveColor } = getCaseViewColors(theme, color);\n\n return css`\n background: ${cardBackground};\n position: relative;\n height: 100%;\n ${aboveMD &&\n summaryExpanded &&\n css`\n width: 25rem;\n `}\n\n ${detached &&\n css`\n border-radius: ${borderRadius};\n --border-radius: calc(${borderRadius} * 0.5);\n `}\n\n ${tabsDetached &&\n css`\n & ${StyledTabs} {\n &[aria-orientation='vertical'] {\n padding-top: calc(1.5 * ${spacing});\n border-block-start: 0.0625rem solid ${borderLine};\n\n & ${StyledTab} {\n height: ${mouseMin};\n\n @media (pointer: coarse) {\n height: ${fingerMin};\n }\n }\n }\n }\n `}\n\n ${caseTypeColor &&\n theme.base['case-type-colors'] === 'header-and-icon' &&\n css`\n & ${StyledTabs} {\n &[aria-orientation='vertical']::after {\n background: ${caseTypeColor};\n }\n\n &[aria-orientation='vertical']::before {\n background: ${headerBackground};\n }\n }\n\n & ${StyledTab}[aria-selected='true'] {\n background-color: ${headerBackground};\n\n span {\n color: ${interactiveColor};\n }\n }\n `}\n `;\n }\n);\n\nStyledCaseSummary.defaultProps = defaultThemeProp;\n\nexport const StyledTasks = styled.div(\n ({\n theme: {\n base: { spacing }\n }\n }) => {\n return css`\n &:not(:has(${StyledCard})) {\n /* Add negative top margin to compensate extra row-gap due to empty Tasks container */\n margin-block-start: calc(-2 * ${spacing});\n }\n `;\n }\n);\nStyledTasks.defaultProps = defaultThemeProp;\n\nexport const StyledTabPanelWrapper = styled.div(\n ({\n theme: {\n base: {\n animation: { speed, timing }\n },\n components: {\n card: { 'border-radius': cardBorderRadius }\n }\n }\n }) => {\n const { start } = useDirection();\n\n return css`\n ${StyledTabPanel} {\n ${StyledProgressBackdrop} {\n border-radius: ${cardBorderRadius};\n }\n }\n\n /* Top-level horizontal tabs (with or without overflow \"All tabs\" button) - slide in from top */\n ${StyledTabs} ~ &,\n ${StyledAllTabsWrapper} ~ & {\n position: relative;\n z-index: 0;\n\n > ${StyledTabPanel} {\n --reveal-from: 0.7;\n --slide-in-y-start-offset: -0.8rem;\n animation-name: ${animations.reveal}, ${animations.slideInYStart};\n animation-duration: max(calc(${speed} * 2), 1ms);\n animation-timing-function: ${timing.ease};\n\n @media (prefers-reduced-motion: reduce) {\n animation-duration: 1ms;\n }\n }\n }\n\n /* Top-level vertical tabs - slide in from start*/\n &:not(${StyledTabs} ~ &):not(${StyledAllTabsWrapper} ~ &) > ${StyledTabPanel} {\n ${start === 'right'\n ? css`\n --slide-in-x-end-offset: 1.5rem;\n animation-name: ${animations.reveal}, ${animations.slideInXEnd};\n `\n : css`\n --slide-in-x-start-offset: -1.5rem;\n animation-name: ${animations.reveal}, ${animations.slideInXStart};\n `}\n animation-duration: max(calc(${speed} * 2), 1ms);\n animation-timing-function: ${timing.ease};\n\n @media (prefers-reduced-motion: reduce) {\n animation-duration: 1ms;\n }\n }\n\n /* Nested tab panels - always fade only */\n ${StyledTabPanel} & ${StyledTabPanel} {\n --reveal-from: 0.7;\n animation-name: ${animations.reveal};\n animation-duration: max(calc(${speed} * 2), 1ms);\n animation-timing-function: ${timing.ease};\n\n @media (prefers-reduced-motion: reduce) {\n animation-duration: 1ms;\n }\n }\n `;\n }\n);\n\nStyledTabPanelWrapper.defaultProps = defaultThemeProp;\n\n// This component defintion was primarily required to conditionally hide empty div and avoid unnecessary row gap in work area.\nexport const StyledBannersStagesTasksContainer = styled.div(() => {\n return css`\n &:has(> ${StyledTasks}:only-child > :only-child:empty[data-flow]) {\n display: none;\n }\n `;\n});\n\nexport const StyledWorkArea = styled.div(\n ({\n theme: {\n base: {\n palette: { 'border-line': borderLine },\n spacing,\n 'border-radius': borderRadius,\n breakpoints\n },\n components: {\n 'case-view': {\n assignments: {\n detached: assignmentDetached,\n background: assignmentBackground,\n 'foreground-color': assignmentForegroundColor\n }\n },\n tabs: { detached: tabsDetached },\n card: { background, 'foreground-color': foregroundColor, 'border-radius': cardBorderRadius }\n }\n }\n }) => {\n const { backgroundColor } = calculateBackgroundAndContrastColor(background, foregroundColor);\n const foregroundColorForAssignment = calculateForegroundColor(\n assignmentBackground,\n assignmentForegroundColor\n );\n const { summaryExpanded, aboveMD, intelligentGuidance, isPreview } = useCaseViewContext();\n let pbeRem = 0;\n\n if (intelligentGuidance) {\n pbeRem = aboveMD && !summaryExpanded ? 4 : 6;\n }\n\n return css`\n grid-area: work-area;\n padding: calc(2 * ${spacing});\n @media (width < ${breakpoints.sm}) {\n padding: calc(2 * ${spacing}) calc(0.75 * ${spacing});\n }\n\n /* Prevents unnecessary gap when case view has neither stages nor assignments */\n &:has(> ${StyledBannersStagesTasksContainer} > ${StyledTasks}:first-child:empty) {\n ${StyledBannersStagesTasksContainer} {\n display: none;\n }\n }\n\n ${aboveMD &&\n css`\n padding: calc(2 * ${spacing}) 0;\n\n /* This is required to make scrollStick work. */\n ${!isPreview &&\n css`\n height: max-content;\n `}\n\n ${!summaryExpanded &&\n css`\n margin-inline-start: calc(2 * ${spacing});\n `}\n `}\n /* Order of style here is necessary for overriding styles above. */\n ${pbeRem > 0 &&\n css`\n /* Accounts for collapsed intelligentGuidance bubble covering work area content when fully scrolled. */\n padding-block-end: ${pbeRem}rem;\n `}\n &:has(${StyledAssignments}),\n &:has(${StyledHierarchicalAssignments}) {\n ${StyledStagesWrapper} {\n --stages-wrapper-bottom-radius: 0;\n }\n\n ${StyledStages} {\n border-block-end: 0.0625rem solid ${borderLine};\n\n &,\n ${StyledStageContainer}:nth-of-type(2) > ${StyledStage} {\n border-end-start-radius: 0;\n }\n\n &,\n ${StyledStageContainer}:nth-last-of-type(2) > ${StyledStage} {\n border-end-end-radius: 0;\n }\n }\n }\n\n ${tabsDetached &&\n css`\n ${StyledAllTabsWrapper} {\n border-start-start-radius: ${cardBorderRadius};\n border-start-end-radius: ${cardBorderRadius};\n\n ${StyledTabs} {\n border-radius: unset;\n border-start-end-radius: inherit;\n }\n\n ${StylesAllTabsButtonWrapper}, ${StyledMenuButton} {\n border-start-start-radius: inherit;\n }\n }\n `}\n\n /* Ensure horizontal tabs stay above sliding tab content */\n ${StyledTabs}[aria-orientation='horizontal'],\n ${StyledAllTabsWrapper} {\n z-index: 1;\n }\n\n &:has(${StyledStages}) {\n ${StyledCard}${StyledAssignments},\n ${StyledCard}${StyledHierarchicalAssignments} {\n margin-block-start: calc(-2 * ${spacing});\n border-start-start-radius: 0;\n border-start-end-radius: 0;\n }\n\n &:has(${StyledCard}${StyledAssignments} > ${StyledCardHeader}),\n &:has(${StyledCard}${StyledHierarchicalAssignments} > ${StyledCardHeader}) {\n ${StyledCard}${StyledAssignments},\n ${StyledCard}${StyledHierarchicalAssignments} {\n background: ${assignmentBackground};\n color: ${foregroundColorForAssignment};\n ${assignmentDetached &&\n css`\n ${StyledTaskList} {\n background-color: ${backgroundColor};\n border: solid 0.0625rem ${borderLine};\n border-radius: var(--border-radius, ${borderRadius});\n\n ${StyledSummaryListItem} {\n padding: calc(${spacing} / 2) ${spacing};\n }\n }\n `}\n }\n }\n }\n `;\n }\n);\n\nStyledWorkArea.defaultProps = defaultThemeProp;\n\nexport const StyledUtilitiesHeading = styled(Text)``;\n\nexport const StyledExpandCollapseUtilitiesButton = styled(StyledExpandCollapseButton)(() => {\n const { utilitiesExpanded } = useCaseViewContext();\n\n return css`\n /* Centers button over the utilities summary */\n margin-inline-end: ${utilitiesExpanded && '0.625rem'};\n `;\n});\n\nStyledExpandCollapseUtilitiesButton.defaultProps = defaultThemeProp;\n\nconst genAICoachReservedSpace = '4rem';\n\nexport const StyledUtilities = styled.div(({ theme }) => {\n const { utilitiesExpanded, aboveLG, aboveMD, hasGenAICoach } = useCaseViewContext();\n\n return css`\n height: max-content;\n margin-block: calc(2 * ${theme.base.spacing});\n\n ${StyledCardContent} ${StyledProgressBackdrop} {\n border-radius: ${theme.components.card['border-radius']};\n }\n\n /* If utilities are in an expanded drawer. */\n\n ${utilitiesExpanded &&\n aboveMD &&\n !aboveLG &&\n css`\n /* Maintains the column width to avoid page content shift. */\n visibility: hidden;\n `}\n ${aboveLG &&\n utilitiesExpanded &&\n css`\n width: 25rem;\n `}\n /* Selects the h2 in the utilities column, not the drawer. */\n ${StyledUtilitiesHeading} {\n /* Hide the utilities h2 under certain conditions.*/\n ${((aboveMD && !utilitiesExpanded) || (aboveMD && utilitiesExpanded && !aboveLG)) &&\n hideVisually()}\n }\n\n /* Reserve space below so the docked GenAI coach doesn't overlap utility items. */\n ${hasGenAICoach &&\n css`\n margin-block-end: ${genAICoachReservedSpace};\n `}\n `;\n});\n\nStyledUtilities.defaultProps = defaultThemeProp;\n\nexport const StyledSummary = styled.div(\n ({\n theme: {\n base: {\n spacing,\n breakpoints,\n 'z-index': zIndex,\n palette: { 'app-background': appBackground }\n },\n components: {\n 'app-shell': {\n nav: { background: navBackground }\n },\n 'case-view': {\n summary: { detached: summaryDetached },\n utilities: { detached: utilitiesDetached }\n }\n }\n }\n }) => {\n const { aboveSM, aboveMD, persistentUtility, aboveXL, summaryExpanded, isPreview } =\n useCaseViewContext();\n const shouldRenderMobileTabs = !aboveMD || (persistentUtility && !aboveXL) || !summaryExpanded;\n const inlineStartPadding =\n navBackground === appBackground && summaryExpanded ? `${spacing}` : `calc(${spacing} * 2)`;\n\n return css`\n top: var(--top-offset);\n width: 100%;\n z-index: ${zIndex.popover};\n\n ${aboveMD &&\n summaryExpanded &&\n css`\n height: var(--case-view-height);\n `}\n\n ${summaryDetached &&\n aboveSM &&\n css`\n padding-inline-start: ${inlineStartPadding};\n padding-inline-end: ${utilitiesDetached && shouldRenderMobileTabs\n ? `calc(2 * ${spacing})`\n : 0};\n padding-block: ${shouldRenderMobileTabs ? 0 : `calc(2 * ${spacing})`};\n `}\n\n ${isPreview &&\n css`\n padding: 0;\n `}\n\n ${aboveMD\n ? css`\n position: sticky;\n `\n : css`\n @media (min-height: ${breakpoints.sm}) {\n position: sticky;\n }\n `}\n `;\n }\n);\n\nStyledSummary.defaultProps = defaultThemeProp;\n\nexport const StyledCaseDrawer = styled.div<{\n previewActive?: AppShellContextValue['previewActive'];\n utilitiesExpanded?: boolean;\n}>(({ previewActive, utilitiesExpanded, theme }) => {\n return css`\n background-color: ${theme.base.palette['primary-background']};\n height: calc(100dvh - var(--appshell-total-offset, 0));\n inset-block-start: var(--appshell-top-offset, 0);\n z-index: ${theme.base['z-index'].drawer - 1};\n max-width: ${resizeDrawerMinWidth};\n\n ${previewActive &&\n css`\n @media (min-width: ${theme.base.breakpoints.md}) {\n inset-inline-end: ${resizeDrawerDefaultWidth};\n ${utilitiesExpanded &&\n css`\n inset-inline-end: var(--resize-drawer-width);\n `}\n }\n `}\n ${StyledGenAICoachContainer} {\n width: calc(${resizeDrawerMinWidth} - 2rem);\n }\n `;\n});\n\nStyledCaseDrawer.defaultProps = defaultThemeProp;\n\nexport const StyledCaseDrawerContent = styled.div(\n ({\n theme: {\n base: {\n palette: { 'app-background': appBackground },\n spacing\n }\n }\n }) => {\n const { hasGenAICoach } = useCaseViewContext();\n\n return css`\n background: ${appBackground};\n padding: calc(2 * ${spacing});\n height: 100%;\n overflow: auto;\n\n /* Reserve scroll space so the docked GenAI coach doesn't overlap utility items. */\n ${hasGenAICoach &&\n css`\n padding-block-end: ${genAICoachReservedSpace};\n `}\n `;\n }\n);\n\nStyledCaseDrawerContent.defaultProps = defaultThemeProp;\n\nexport const StyledPersistentUtility = styled.div<{ persistentUtilityExpanded?: boolean }>(\n ({ theme, persistentUtilityExpanded }) => {\n return css`\n width: ${persistentUtilityExpanded ? '100%' : theme.base['content-width'].md};\n overflow: auto;\n position: sticky;\n z-index: 1;\n height: var(--case-view-height);\n inset-block-start: var(--top-offset);\n inset-block-end: var(--appshell-bottom-offset, 0);\n padding-block: calc(2 * ${theme.base.spacing});\n `;\n }\n);\n\nStyledPersistentUtility.defaultProps = defaultThemeProp;\n\nexport const StyledPersistentContainer = styled.div(({ theme }) => {\n return css`\n height: 100%;\n\n &&& ${StyledCardHeader} {\n padding-inline-start: ${theme.base.spacing};\n }\n `;\n});\n\nStyledPersistentContainer.defaultProps = defaultThemeProp;\n\nexport const StyledPersistentContent = styled.div(({ theme }) => {\n return css`\n height: calc(100% - calc(4 * ${theme.base.spacing}));\n `;\n});\n\nStyledPersistentContent.defaultProps = defaultThemeProp;\n\nexport const ScrollStick = styled.div`\n position: sticky;\n top: 0;\n`;\n\nexport const StyledCaseView = styled.div(\n ({\n theme: {\n base: {\n palette: { 'app-background': appBackground },\n spacing,\n 'border-radius': borderRadius\n },\n components: {\n 'case-view': {\n utilities: {\n detached: utilitiesDetached,\n background: utilitiesBackground,\n 'foreground-color': utilitiesForegroundColor\n },\n summary: { detached: summaryDetached }\n }\n }\n }\n }) => {\n const utilitiesForegroundComputed = calculateForegroundColor(\n utilitiesBackground,\n utilitiesForegroundColor\n );\n const { aboveSM, aboveMD, isPreview, summaryExpanded } = useCaseViewContext();\n\n return css`\n --top-offset: calc(\n ${summaryExpanded ? 'var(--summary-height)' : '0rem'} + var(--appshell-top-offset, 0rem)\n );\n --case-view-height: calc(100dvh - var(--top-offset) - var(--appshell-bottom-offset, 0rem));\n position: relative;\n min-height: var(--case-view-height);\n background: ${appBackground};\n\n ${aboveMD &&\n css`\n ${StyledUtilities}:last-child {\n margin-inline-end: calc(2 * ${spacing});\n color: ${utilitiesForegroundComputed};\n\n ${!utilitiesDetached &&\n css`\n background: ${utilitiesBackground};\n margin-inline-end: 0;\n padding: calc(2 * ${spacing});\n padding-inline-end: 0;\n border-start-start-radius: ${borderRadius};\n border-end-start-radius: ${borderRadius};\n border-start-end-radius: 0;\n border-end-end-radius: 0;\n\n ${StyledCard},\n ${StyledGenAICoachContainer} {\n border-start-end-radius: 0;\n border-end-end-radius: 0;\n }\n\n ${StyledGenAICoachContainer} {\n inset-inline-end: 0;\n }\n `}\n }\n `}\n\n ${aboveSM &&\n summaryDetached &&\n !isPreview &&\n css`\n &:not(:has(${StyledUtilities})) {\n ${StyledSummary} {\n padding-inline-end: calc(2 * ${spacing});\n }\n\n ${StyledCaseHeader} {\n border-end-end-radius: ${borderRadius};\n }\n }\n `}\n\n ${!aboveMD &&\n css`\n ${StyledGenAICoachContainer} {\n height: 42.5rem;\n\n ${StyledInitialMessageContainer} {\n justify-content: center;\n }\n }\n `}\n `;\n }\n);\n\nStyledCaseView.defaultProps = defaultThemeProp;\n\nexport const StyledUtilitiesHeader = styled(Text)`\n align-self: center;\n\n &:not(:focus) {\n ${hideVisually}\n }\n`;\n\nStyledUtilitiesHeader.defaultProps = defaultThemeProp;\n\nexport const StyledCoachButton = styled(AIButton)(({\n theme: {\n base: { spacing, breakpoints }\n }\n}) => {\n const { previewActive } = useContext(AppShellContext);\n\n return css`\n position: fixed;\n width: 2.75rem;\n height: 2.75rem;\n inset-block-end: calc(\n var(--footer-height, var(--appshell-bottom-offset, 0rem)) + 2 * ${spacing}\n );\n inset-inline-end: calc(2 * ${spacing});\n ${previewActive &&\n css`\n @media (min-width: ${breakpoints.md}) {\n margin-inline-end: min(var(--resize-drawer-width), ${resizeDrawerMaxWidth});\n }\n `}\n `;\n});\n\nStyledCoachButton.defaultProps = defaultThemeProp;\n\nexport const StyledUtilitiesWrapper = styled.div``;\n\nexport const StyledCaseViewIcon = styled(Icon)(({ theme }) => {\n const { color } = useCaseViewContext();\n const caseTypeColorsEnabled =\n theme.base['case-type-colors'] === 'icon-only' ||\n theme.base['case-type-colors'] === 'header-and-icon';\n const resolvedCaseTypeColor =\n caseTypeColorsEnabled && color !== undefined ? resolveCaseTypeColor(theme, color) : undefined;\n\n return css`\n --icon-color: ${resolvedCaseTypeColor ?? theme.base.palette['brand-accent']};\n --gradient-start: oklch(from var(--icon-color) calc(l - 0.3) calc(c * 1.5) h);\n --gradient-mid: oklch(from var(--icon-color) l c h);\n --gradient-end: oklch(from var(--icon-color) calc(l + 0.5) calc(c * 1.5) h);\n\n ${theme.components['case-view'].icon.color !== 'auto' &&\n css`\n color: ${theme.components['case-view'].icon.color};\n `}\n\n ${theme.components['case-view'].icon.background !== 'auto' &&\n css`\n background: ${theme.components['case-view'].icon.background};\n `}\n\n ${theme.components['case-view'].icon.background === 'auto' &&\n caseTypeColorsEnabled &&\n resolvedCaseTypeColor &&\n css`\n background: ${resolvedCaseTypeColor};\n `}\n\n ${theme.components['case-view'].icon['box-shadow'] !== 'auto' &&\n css`\n box-shadow: ${theme.components['case-view'].icon['box-shadow']};\n `}\n `;\n});\n\nStyledCaseViewIcon.defaultProps = defaultThemeProp;\n"]}
package/lib/components/Stages/Stages.styles.d.ts CHANGED
@@ -1,4 +1,12 @@
1
+ /**
2
+ * Outer wrapper `<div>` for the stages bar. Applies layered scroll-fade masks and
3
+ * reserves scrollbar space so the fade gradient does not overlap the scrollbar track.
4
+ */
1
5
  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;
6
+ /**
7
+ * Scrollable `<ol>` containing all stage chevron items. Sets the `--chevron-spacing`
8
+ * and `--chevron-border-thickness` custom properties consumed by child elements.
9
+ */
2
10
  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;
3
11
  /**
4
12
  * 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
13
21
  * offset by 1 at each end to skip the sentinels and target only real stage items.
14
22
  */
15
23
  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;
24
+ /**
25
+ * Inner `<span>` holding stage label content. Optionally applies `text-overflow: ellipsis`
26
+ * for stages with long labels.
27
+ */
16
28
  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>, {
17
29
  ellipsis?: boolean;
18
30
  }>> & string;
31
+ /**
32
+ * Clickable `<button>` for a single stage. Renders the chevron clip-path shape and
33
+ * applies status-based background and foreground colours.
34
+ */
19
35
  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>, {
20
36
  status: "completed" | "current" | "pending";
21
37
  readOnly?: boolean;
22
38
  }>> & string;
39
+ /**
40
+ * Checkmark icon shown inside completed stages, tinted to match the stage foreground colour.
41
+ */
23
42
  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>>;
43
+ /**
44
+ * Stage label text. Renders in bold weight when the stage is the current active stage.
45
+ */
24
46
  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"> & {
25
47
  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;
26
48
  }, {
27
49
  isCurrent?: boolean;
28
50
  }>> & string & Omit<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").TextProps>, keyof import("react").Component<any, {}, any>>;
51
+ /**
52
+ * `<li>` container for a single stage item. Manages negative-margin chevron overlap,
53
+ * pseudo-element positioning, and z-index stacking for interactive states.
54
+ */
29
55
  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>, {
30
56
  readOnly?: boolean;
31
57
  }>> & string;
58
+ /**
59
+ * `<ol>` list of sub-step items displayed below the stages bar when a stage is expanded.
60
+ */
32
61
  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;
62
+ /**
63
+ * Individual step `<li>` within a stage. Dims text and icon at reduced opacity when completed.
64
+ */
33
65
  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>, {
34
66
  completed: boolean;
35
67
  }>> & string;
68
+ /**
69
+ * Small datetime label rendered beneath a step. Displayed at the `xs` font size
70
+ * and reduced opacity.
71
+ */
36
72
  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"> & {
37
73
  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;
38
74
  }, never>> & string & Omit<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").DateTimeDisplayProps>, keyof import("react").Component<any, {}, any>>;
75
+ /**
76
+ * Container `<div>` for the stage glimpse preview panel, constrained to a small max-width.
77
+ */
39
78
  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;
79
+ /**
80
+ * Visually hidden `<p>` providing an accessible description for the stages list,
81
+ * announced by screen readers but not displayed on screen.
82
+ */
40
83
  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;
41
84
  //# sourceMappingURL=Stages.styles.d.ts.map
package/lib/components/Stages/Stages.styles.d.ts.map CHANGED
@@ -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
@@ -35,22 +35,23 @@ const stageClipPath = (leftNotch, rightPoint, mirrored = false) => {
35
35
  const chevronConfig = {
36
36
  // Horizontal projection of the rotated border-square forming the chevron point (fine pointer).
37
37
  // Derived from the border-square size × cos(45° + skew). Tuned to visually align with the stage height.
38
- width: 'calc(1.156 * var(--chevron-spacing))',
38
+ // All values scaled by 1.25× relative to the original 4× spacing design (now 5× spacing height).
39
+ width: 'calc(1.445 * var(--chevron-spacing))',
39
40
  // Same horizontal projection for coarse/touch pointer (larger square, proportionally wider point).
40
- coarseWidth: 'calc(1.4375 * var(--chevron-spacing))',
41
- // Side length of the rotated border-square forming the chevron (fine pointer: 3× base spacing).
42
- squareSize: 'calc(3 * var(--chevron-spacing))',
43
- // Side length of the rotated border-square for coarse/touch pointer (4× base spacing).
44
- coarseSquareSize: 'calc(4 * var(--chevron-spacing))',
41
+ coarseWidth: 'calc(1.797 * var(--chevron-spacing))',
42
+ // Side length of the rotated border-square forming the chevron (fine pointer: 3.75× base spacing).
43
+ squareSize: 'calc(3.75 * var(--chevron-spacing))',
44
+ // Side length of the rotated border-square for coarse/touch pointer (5× base spacing).
45
+ coarseSquareSize: 'calc(5 * var(--chevron-spacing))',
45
46
  // Distance to inset the ::before notch from the left edge of the stage (fine pointer).
46
- // 0.688 ≈ width − half-border-overlap, keeps the notch flush with the preceding chevron point.
47
- offsetLeft: 'calc(0.688 * var(--chevron-spacing))',
47
+ // 0.86 ≈ width − half-border-overlap, keeps the notch flush with the preceding chevron point.
48
+ offsetLeft: 'calc(0.86 * var(--chevron-spacing))',
48
49
  // Distance to inset the ::after point from the right edge of the stage (fine pointer).
49
50
  // Equal to `width` so the point extends exactly one chevron-width beyond the stage boundary.
50
- offsetRight: 'calc(1.156 * var(--chevron-spacing))',
51
+ offsetRight: 'calc(1.445 * var(--chevron-spacing))',
51
52
  // Coarse-pointer equivalents of offsetLeft/offsetRight, scaled to match coarseWidth/coarseSquareSize.
52
- coarseOffsetLeft: 'calc(1.03 * var(--chevron-spacing))',
53
- coarseOffsetRight: 'calc(1.4375 * var(--chevron-spacing))'
53
+ coarseOffsetLeft: 'calc(1.2875 * var(--chevron-spacing))',
54
+ coarseOffsetRight: 'calc(1.797 * var(--chevron-spacing))'
54
55
  };
55
56
  // === Chevron Helpers ===
56
57
  // After team discussion we decided to use logical properties throughout — `inset-block-start`
@@ -104,23 +105,45 @@ const createChevronInteractiveStates = (config, borderThicknessVar, includeHover
104
105
  border-block-start-width: calc(2 * ${borderThicknessVar});
105
106
  }
106
107
  `;
108
+ /**
109
+ * Outer wrapper `<div>` for the stages bar. Applies layered scroll-fade masks and
110
+ * reserves scrollbar space so the fade gradient does not overlap the scrollbar track.
111
+ */
107
112
  export const StyledStagesWrapper = styled.div(({ theme }) => {
108
113
  return css `
109
114
  --stages-fade-width: calc(${theme.base.spacing} * 2);
110
115
  --stages-fade-start: 0;
111
116
  --stages-fade-end: 0;
112
117
  --stages-scrollbar-reserve: calc(${theme.base.spacing} * 0.25);
118
+
119
+ /* Places gradient stops one physical pixel outside the element boundary,
120
+ * preventing browser anti-aliasing from creating a semi-transparent seam
121
+ * at mask edges. 1px is the correct unit here: it must be exactly one CSS pixel
122
+ * (independent of font-size), so the mask boundary doesn't introduce a seam at the
123
+ * element edge due to anti-aliasing.
124
+ * See also StyledSentinel, which uses 1px for the same reason.
125
+ */
126
+ /* stylelint-disable-next-line unit-allowed-list -- 1px is intentional; see comment above */
127
+ --mask-edge-overhang: 1px;
113
128
  position: relative;
114
129
  width: 100%;
115
130
  overflow: hidden;
116
131
  border-radius: ${theme.components.card['border-radius']};
132
+ border-end-start-radius: var(
133
+ --stages-wrapper-bottom-radius,
134
+ ${theme.components.card['border-radius']}
135
+ );
136
+ border-end-end-radius: var(
137
+ --stages-wrapper-bottom-radius,
138
+ ${theme.components.card['border-radius']}
139
+ );
117
140
  mask-image: linear-gradient(black, black),
118
141
  linear-gradient(
119
142
  to right,
120
- transparent 0,
143
+ transparent calc(-1 * var(--mask-edge-overhang)),
121
144
  black var(--stages-fade-start),
122
145
  black calc(100% - var(--stages-fade-end)),
123
- transparent 100%
146
+ transparent calc(100% + var(--mask-edge-overhang))
124
147
  );
125
148
  mask-size:
126
149
  100% var(--stages-scrollbar-reserve),
@@ -134,10 +157,10 @@ export const StyledStagesWrapper = styled.div(({ theme }) => {
134
157
  mask-image: linear-gradient(black, black),
135
158
  linear-gradient(
136
159
  to right,
137
- transparent 0,
160
+ transparent calc(-1 * var(--mask-edge-overhang)),
138
161
  black var(--stages-fade-end),
139
162
  black calc(100% - var(--stages-fade-start)),
140
- transparent 100%
163
+ transparent calc(100% + var(--mask-edge-overhang))
141
164
  );
142
165
  }
143
166
 
@@ -149,10 +172,10 @@ export const StyledStagesWrapper = styled.div(({ theme }) => {
149
172
  --stages-fade-width: calc(${theme.base.spacing} * 3);
150
173
  mask-image: linear-gradient(
151
174
  to right,
152
- transparent 0,
175
+ transparent calc(-1 * var(--mask-edge-overhang)),
153
176
  black var(--stages-fade-start),
154
177
  black calc(100% - var(--stages-fade-end)),
155
- transparent 100%
178
+ transparent calc(100% + var(--mask-edge-overhang))
156
179
  );
157
180
  mask-size: 100% 100%;
158
181
  mask-position: 0 0;
@@ -161,16 +184,20 @@ export const StyledStagesWrapper = styled.div(({ theme }) => {
161
184
  [dir='rtl'] & {
162
185
  mask-image: linear-gradient(
163
186
  to right,
164
- transparent 0,
187
+ transparent calc(-1 * var(--mask-edge-overhang)),
165
188
  black var(--stages-fade-end),
166
189
  black calc(100% - var(--stages-fade-start)),
167
- transparent 100%
190
+ transparent calc(100% + var(--mask-edge-overhang))
168
191
  );
169
192
  }
170
193
  }
171
194
  `;
172
195
  });
173
196
  StyledStagesWrapper.defaultProps = defaultThemeProp;
197
+ /**
198
+ * Scrollable `<ol>` containing all stage chevron items. Sets the `--chevron-spacing`
199
+ * and `--chevron-border-thickness` custom properties consumed by child elements.
200
+ */
174
201
  export const StyledStages = styled.ol(({ theme }) => {
175
202
  return css `
176
203
  --chevron-spacing: ${theme.base.spacing};
@@ -224,8 +251,9 @@ export const StyledSentinel = styled.li `
224
251
  flex-shrink: 0;
225
252
 
226
253
  /* NOTE: the sentinel must occupy
227
- a single physical pixel so IntersectionObserver can detect it at threshold 0 while having
228
- negligible layout impact. A rem value could collapse to zero at small font sizes. */
254
+ * a single physical pixel so IntersectionObserver can detect it at threshold 0 while having
255
+ * negligible layout impact. A rem value could collapse to zero at small font sizes.
256
+ */
229
257
  /* stylelint-disable-next-line unit-allowed-list -- 1px is intentional */
230
258
  width: 1px;
231
259
  /* stylelint-disable-next-line unit-allowed-list -- 1px is intentional */
@@ -233,8 +261,27 @@ export const StyledSentinel = styled.li `
233
261
  padding: 0;
234
262
  margin: 0;
235
263
  pointer-events: none;
264
+
265
+ /* Collapse the sentinel's layout footprint to zero on the side facing the stages.
266
+ * Without this, each 1px sentinel creates a visible gap between the stage buttons
267
+ * and the left/right edges of the wrapper. The sentinel remains in flow (required
268
+ * for IntersectionObserver scroll detection) but no longer displaces stage content.
269
+ */
270
+ &:first-of-type {
271
+ /* stylelint-disable-next-line unit-allowed-list -- 1px matches sentinel width */
272
+ margin-inline-end: -1px;
273
+ }
274
+
275
+ &:last-of-type {
276
+ /* stylelint-disable-next-line unit-allowed-list -- 1px matches sentinel width */
277
+ margin-inline-start: -1px;
278
+ }
236
279
  `;
237
280
  StyledSentinel.defaultProps = defaultThemeProp;
281
+ /**
282
+ * Inner `<span>` holding stage label content. Optionally applies `text-overflow: ellipsis`
283
+ * for stages with long labels.
284
+ */
238
285
  export const StyledInnerStage = styled.span(({ theme, ellipsis }) => {
239
286
  return css `
240
287
  display: inline-flex;
@@ -252,6 +299,10 @@ export const StyledInnerStage = styled.span(({ theme, ellipsis }) => {
252
299
  `;
253
300
  });
254
301
  StyledInnerStage.defaultProps = defaultThemeProp;
302
+ /**
303
+ * Clickable `<button>` for a single stage. Renders the chevron clip-path shape and
304
+ * applies status-based background and foreground colours.
305
+ */
255
306
  export const StyledStage = styled.button(({ theme: { base: { palette, 'hit-area': hitArea, transparency, 'font-weight': fontWeight }, components: { 'case-view': { stages } } }, status, readOnly }) => {
256
307
  const stageForeground = calculateForegroundColor(stages.status[status].background, stages.status[status]['foreground-color']);
257
308
  return css `
@@ -266,7 +317,7 @@ export const StyledStage = styled.button(({ theme: { base: { palette, 'hit-area'
266
317
  /* Browsers do not reliably apply flex align-items: stretch to <button> elements.
267
318
  * Adding 0.0625rem (1px at default font size) to min-height compensates so the button fills its <li> container,
268
319
  * keeping the clipped chevron background flush with the top and bottom borders. */
269
- min-height: calc(4 * var(--chevron-spacing) + 0.0625rem);
320
+ min-height: calc(5 * var(--chevron-spacing) + 0.0625rem);
270
321
  padding-inline-start: calc(2 * var(--chevron-spacing));
271
322
  padding-inline-end: var(--chevron-spacing);
272
323
  margin-inline-start: 0;
@@ -332,6 +383,9 @@ export const StyledStage = styled.button(({ theme: { base: { palette, 'hit-area'
332
383
  `;
333
384
  });
334
385
  StyledStage.defaultProps = defaultThemeProp;
386
+ /**
387
+ * Checkmark icon shown inside completed stages, tinted to match the stage foreground colour.
388
+ */
335
389
  export const StyledStageCompleteIcon = styled(Icon)(({ theme: { components: { 'case-view': { stages: { status: { completed: { 'foreground-color': foregroundColor, background } } } } } } }) => {
336
390
  const stageForeground = calculateForegroundColor(background, foregroundColor);
337
391
  return css `
@@ -339,10 +393,17 @@ export const StyledStageCompleteIcon = styled(Icon)(({ theme: { components: { 'c
339
393
  `;
340
394
  });
341
395
  StyledStageCompleteIcon.defaultProps = defaultThemeProp;
396
+ /**
397
+ * Stage label text. Renders in bold weight when the stage is the current active stage.
398
+ */
342
399
  export const StyledStageText = styled(Text)(({ theme, isCurrent }) => css `
343
400
  font-weight: ${isCurrent ? theme.base['font-weight'].bold : theme.base['font-weight'].normal};
344
401
  `);
345
402
  StyledStageText.defaultProps = defaultThemeProp;
403
+ /**
404
+ * `<li>` container for a single stage item. Manages negative-margin chevron overlap,
405
+ * pseudo-element positioning, and z-index stacking for interactive states.
406
+ */
346
407
  export const StyledStageContainer = styled.li(({ theme: { base: { palette }, components: { card: { 'border-radius': borderRadius } } }, readOnly }) => {
347
408
  return css `
348
409
  display: flex;
@@ -357,7 +418,8 @@ export const StyledStageContainer = styled.li(({ theme: { base: { palette }, com
357
418
  * All non-last <li>s have z-index:1 so the later (right) <li>'s ::before paints on top
358
419
  * at internal boundaries; the last <li> has no z-index so its left neighbor's ::after
359
420
  * wins at the final boundary. On hover/focus/active, the interacting <li> gains z:2/3
360
- * and its own pseudo-element surfaces for that boundary, regardless of which side. */
421
+ * and its own pseudo-element surfaces for that boundary, regardless of which side.
422
+ */
361
423
  &:not(:nth-last-of-type(-n + 2)) {
362
424
  z-index: 1;
363
425
  }
@@ -386,7 +448,8 @@ export const StyledStageContainer = styled.li(({ theme: { base: { palette }, com
386
448
  * causes thicker interactive-state borders (3×) to look thinner on the left boundary
387
449
  * than on the right (::after, which paints last and is always fully visible).
388
450
  * The ::before tip's rightmost extent is at --stage-chevron-width from the <li> start,
389
- * which is before the stage text (padding-inline-start: 2 × spacing), so no content overlap. */
451
+ * which is before the stage text (padding-inline-start: 2 × spacing), so no content overlap.
452
+ */
390
453
  z-index: 1;
391
454
  }
392
455
 
@@ -395,7 +458,8 @@ export const StyledStageContainer = styled.li(({ theme: { base: { palette }, com
395
458
  }
396
459
 
397
460
  /* Chevron positioning: 45° rotated squares create visual tips via offsets:
398
- * left ≈ 0.688 × spacing, right ≈ 1.15 × spacing (accounts for skew correction) */
461
+ * left ≈ 0.86 × spacing, right ≈ 1.445 × spacing (accounts for skew correction)
462
+ */
399
463
 
400
464
  [dir='rtl'] &::before,
401
465
  [dir='rtl'] &::after {
@@ -403,19 +467,18 @@ export const StyledStageContainer = styled.li(({ theme: { base: { palette }, com
403
467
  }
404
468
 
405
469
  /* Thicken chevrons to visually match button top/bottom border on any colored state.
406
- * At 45° rotation, border appears 1/sin(45°) ≈ 0.707× thinner, so 2× border ≈ 1.4× horizontal border weight. */
470
+ * At 45° rotation, border appears 1/sin(45°) ≈ 0.707× thinner, so 2× border ≈ 1.4× horizontal border weight.
471
+ */
407
472
  ${createChevronBaseStyles(chevronConfig, 'var(--chevron-border-thickness)')}
408
473
  ${createChevronInteractiveStates(chevronConfig, 'var(--chevron-border-thickness)', !readOnly)}
409
-
410
- ${!readOnly &&
474
+ ${!readOnly &&
411
475
  css `
412
476
  &:has(button:hover)::before,
413
477
  &:has(button:hover)::after {
414
478
  border-color: ${palette['border-line']};
415
479
  }
416
480
  `}
417
-
418
- &:has(button:focus-visible)::before,
481
+ &:has(button:focus-visible)::before,
419
482
  &:has(button:focus-visible)::after {
420
483
  border-color: ${palette.interactive};
421
484
  }
@@ -529,6 +592,9 @@ export const StyledStageContainer = styled.li(({ theme: { base: { palette }, com
529
592
  `;
530
593
  });
531
594
  StyledStageContainer.defaultProps = defaultThemeProp;
595
+ /**
596
+ * `<ol>` list of sub-step items displayed below the stages bar when a stage is expanded.
597
+ */
532
598
  export const StyledStepsContainer = styled.ol(({ theme }) => {
533
599
  return css `
534
600
  list-style-type: none;
@@ -540,6 +606,9 @@ export const StyledStepsContainer = styled.ol(({ theme }) => {
540
606
  `;
541
607
  });
542
608
  StyledStepsContainer.defaultProps = defaultThemeProp;
609
+ /**
610
+ * Individual step `<li>` within a stage. Dims text and icon at reduced opacity when completed.
611
+ */
543
612
  export const StyledStep = styled.li(({ completed, theme }) => {
544
613
  const textOpacity = completed ? theme.base.transparency['transparent-2'] : 1;
545
614
  return css `
@@ -561,6 +630,10 @@ export const StyledStep = styled.li(({ completed, theme }) => {
561
630
  `;
562
631
  });
563
632
  StyledStep.defaultProps = defaultThemeProp;
633
+ /**
634
+ * Small datetime label rendered beneath a step. Displayed at the `xs` font size
635
+ * and reduced opacity.
636
+ */
564
637
  export const StyledDateTimeDisplay = styled(DateTimeDisplay)(({ theme }) => {
565
638
  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
566
639
  return css `
@@ -569,12 +642,19 @@ export const StyledDateTimeDisplay = styled(DateTimeDisplay)(({ theme }) => {
569
642
  `;
570
643
  });
571
644
  StyledDateTimeDisplay.defaultProps = defaultThemeProp;
645
+ /**
646
+ * Container `<div>` for the stage glimpse preview panel, constrained to a small max-width.
647
+ */
572
648
  export const StyledStageGlimpse = styled.div(({ theme }) => {
573
649
  return css `
574
650
  max-width: ${theme.base['content-width'].sm};
575
651
  `;
576
652
  });
577
653
  StyledStageGlimpse.defaultProps = defaultThemeProp;
654
+ /**
655
+ * Visually hidden `<p>` providing an accessible description for the stages list,
656
+ * announced by screen readers but not displayed on screen.
657
+ */
578
658
  export const StyledStagesDescription = styled.p `
579
659
  display: none;
580
660
  `;
package/lib/components/Stages/Stages.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Stages.styles.js","sourceRoot":"","sources":["../../../src/components/Stages/Stages.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { transparentize } from 'polished';\n\nimport {\n calculateFontSize,\n DateTimeDisplay,\n defaultThemeProp,\n Icon,\n Text,\n StyledIcon,\n calculateForegroundColor\n} from '@pega/cosmos-react-core';\n\nconst stageClipPath = (leftNotch: boolean, rightPoint: boolean, mirrored = false): string => {\n if (mirrored) {\n // RTL: mirror the LTR clip-path polygon\n const points = ['100% 0', '0 0'];\n if (leftNotch) {\n points.push('var(--stage-chevron-width) 0', '0 50%', 'var(--stage-chevron-width) 100%');\n } else {\n points.push('0 100%');\n }\n points.push('100% 100%');\n if (rightPoint) {\n points.push('calc(100% - var(--stage-chevron-width)) 50%');\n }\n return `clip-path: polygon(${points.join(', ')});`;\n }\n\n const points = ['0 0', '100% 0'];\n if (rightPoint) {\n points.push(\n 'calc(100% - var(--stage-chevron-width)) 0',\n '100% 50%',\n 'calc(100% - var(--stage-chevron-width)) 100%'\n );\n } else {\n points.push('100% 100%');\n }\n points.push('0 100%');\n if (leftNotch) {\n points.push('var(--stage-chevron-width) 50%');\n }\n return `clip-path: polygon(${points.join(', ')});`;\n};\n\n// === Chevron Configuration ===\n// Centralizes spacing and border thickness via CSS custom properties set at StyledStages\nconst chevronConfig = {\n // Horizontal projection of the rotated border-square forming the chevron point (fine pointer).\n // Derived from the border-square size × cos(45° + skew). Tuned to visually align with the stage height.\n width: 'calc(1.156 * var(--chevron-spacing))',\n // Same horizontal projection for coarse/touch pointer (larger square, proportionally wider point).\n coarseWidth: 'calc(1.4375 * var(--chevron-spacing))',\n // Side length of the rotated border-square forming the chevron (fine pointer: 3× base spacing).\n squareSize: 'calc(3 * var(--chevron-spacing))',\n // Side length of the rotated border-square for coarse/touch pointer (4× base spacing).\n coarseSquareSize: 'calc(4 * var(--chevron-spacing))',\n // Distance to inset the ::before notch from the left edge of the stage (fine pointer).\n // 0.688 ≈ width − half-border-overlap, keeps the notch flush with the preceding chevron point.\n offsetLeft: 'calc(0.688 * var(--chevron-spacing))',\n // Distance to inset the ::after point from the right edge of the stage (fine pointer).\n // Equal to `width` so the point extends exactly one chevron-width beyond the stage boundary.\n offsetRight: 'calc(1.156 * var(--chevron-spacing))',\n // Coarse-pointer equivalents of offsetLeft/offsetRight, scaled to match coarseWidth/coarseSquareSize.\n coarseOffsetLeft: 'calc(1.03 * var(--chevron-spacing))',\n coarseOffsetRight: 'calc(1.4375 * var(--chevron-spacing))'\n} as const;\n\n// === Chevron Helpers ===\n// After team discussion we decided to use logical properties throughout — `inset-block-start`\n// instead of `top`, and `border-block-start/end-width` instead of `border-top/bottom-width` —\n// for consistency with the rest of the file (which already uses logical inline-axis properties).\nconst createChevronPseudo = (borderWidth: string, borderColor: string, size: string): string => `\n content: '';\n position: absolute;\n display: block;\n inset-block-start: calc(50% - ${size} / 2);\n width: ${size};\n height: ${size};\n border-style: solid;\n border-color: ${borderColor};\n border-inline-end-width: ${borderWidth};\n border-inline-start-width: 0;\n border-block-start-width: ${borderWidth};\n border-block-end-width: 0;\n transform: rotateZ(45deg) skew(15deg, 15deg);\n pointer-events: none;\n`;\n\nconst createChevronBaseStyles = (config: typeof chevronConfig, borderThicknessVar: string) => css`\n &:not(:nth-of-type(-n + 2))::before,\n &:not(:nth-last-of-type(-n + 2))::after {\n border-inline-end-width: calc(1.5 * ${borderThicknessVar});\n border-block-start-width: calc(1.5 * ${borderThicknessVar});\n }\n\n &:not(:nth-of-type(-n + 2))::before {\n inset-inline-start: calc(-1 * ${config.width} - ${config.offsetLeft});\n }\n\n &:not(:nth-last-of-type(-n + 2))::after {\n inset-inline-end: calc(-1 * ${config.width} + ${config.offsetRight});\n }\n`;\n\nconst createChevronInteractiveStates = (\n config: typeof chevronConfig,\n borderThicknessVar: string,\n includeHover = true\n) => css`\n ${includeHover &&\n css`\n &:has(button:hover)::before,\n &:has(button:hover)::after {\n border-inline-end-width: calc(2 * ${borderThicknessVar});\n border-block-start-width: calc(2 * ${borderThicknessVar});\n }\n `}\n &:has(button:focus-visible)::before,\n &:has(button:focus-visible)::after,\n &:has(button:active)::before,\n &:has(button:active)::after {\n border-inline-end-width: calc(2 * ${borderThicknessVar});\n border-block-start-width: calc(2 * ${borderThicknessVar});\n }\n`;\n\nexport const StyledStagesWrapper = styled.div(({ theme }) => {\n return css`\n --stages-fade-width: calc(${theme.base.spacing} * 2);\n --stages-fade-start: 0;\n --stages-fade-end: 0;\n --stages-scrollbar-reserve: calc(${theme.base.spacing} * 0.25);\n position: relative;\n width: 100%;\n overflow: hidden;\n border-radius: ${theme.components.card['border-radius']};\n mask-image: linear-gradient(black, black),\n linear-gradient(\n to right,\n transparent 0,\n black var(--stages-fade-start),\n black calc(100% - var(--stages-fade-end)),\n transparent 100%\n );\n mask-size:\n 100% var(--stages-scrollbar-reserve),\n 100% calc(100% - var(--stages-scrollbar-reserve));\n mask-position:\n 0 100%,\n 0 0;\n mask-repeat: no-repeat, no-repeat;\n\n [dir='rtl'] & {\n mask-image: linear-gradient(black, black),\n linear-gradient(\n to right,\n transparent 0,\n black var(--stages-fade-end),\n black calc(100% - var(--stages-fade-start)),\n transparent 100%\n );\n }\n\n &:has(:focus-visible) {\n box-shadow: ${theme.base.shadow['focus-group']};\n }\n\n @media (pointer: coarse) {\n --stages-fade-width: calc(${theme.base.spacing} * 3);\n mask-image: linear-gradient(\n to right,\n transparent 0,\n black var(--stages-fade-start),\n black calc(100% - var(--stages-fade-end)),\n transparent 100%\n );\n mask-size: 100% 100%;\n mask-position: 0 0;\n mask-repeat: no-repeat;\n\n [dir='rtl'] & {\n mask-image: linear-gradient(\n to right,\n transparent 0,\n black var(--stages-fade-end),\n black calc(100% - var(--stages-fade-start)),\n transparent 100%\n );\n }\n }\n `;\n});\n\nStyledStagesWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledStages = styled.ol(({ theme }) => {\n return css`\n --chevron-spacing: ${theme.base.spacing};\n --chevron-border-thickness: ${theme.components.button['border-width']};\n border-radius: ${theme.components.card['border-radius']};\n display: flex;\n padding: 0;\n width: 100%;\n overflow-x: auto;\n overflow-y: hidden;\n list-style: none;\n scrollbar-width: thin;\n scrollbar-color: transparent transparent;\n\n &:hover,\n &:focus-within {\n scrollbar-color: var(\n --stages-scrollbar-thumb,\n ${transparentize(0.4, theme.base.palette['border-line'])}\n )\n var(--stages-scrollbar-track, transparent);\n }\n\n &::-webkit-scrollbar {\n height: 0.25rem;\n }\n\n @media (pointer: coarse) {\n scrollbar-width: none;\n\n &::-webkit-scrollbar {\n display: none;\n }\n }\n `;\n});\n\nStyledStages.defaultProps = defaultThemeProp;\n\n/**\n * A sentinel is an invisible 1 px <li> placed at each end of the scrollable stage list.\n * It is observed by an IntersectionObserver; when it scrolls out of view, the component sets\n * --stages-fade-start or --stages-fade-end to show a gradient fade indicating more stages\n * are reachable by scrolling. When it comes back into view the property is reset to 0.\n *\n * Sentinel elements carry aria-hidden=\"true\" so they are valid list items semantically.\n * Because styled-components scopes all CSS to a generated class, the chevron and layout rules\n * in StyledStageContainer never apply to these elements — they carry a different class.\n * CSS type-based selectors (:nth-of-type, :nth-last-of-type) in StyledStageContainer are\n * offset by 1 at each end to skip the sentinels and target only real stage items.\n */\nexport const StyledSentinel = styled.li`\n flex-shrink: 0;\n\n /* NOTE: the sentinel must occupy\n a single physical pixel so IntersectionObserver can detect it at threshold 0 while having\n negligible layout impact. A rem value could collapse to zero at small font sizes. */\n /* stylelint-disable-next-line unit-allowed-list -- 1px is intentional */\n width: 1px;\n /* stylelint-disable-next-line unit-allowed-list -- 1px is intentional */\n height: 1px;\n padding: 0;\n margin: 0;\n pointer-events: none;\n`;\n\nStyledSentinel.defaultProps = defaultThemeProp;\n\nexport const StyledInnerStage = styled.span<{ ellipsis?: boolean }>(({ theme, ellipsis }) => {\n return css`\n display: inline-flex;\n align-items: center;\n gap: calc(0.25 * ${theme.base.spacing});\n text-align: center;\n white-space: nowrap;\n padding-inline-start: calc(0.875 * ${theme.base.spacing});\n padding-inline-end: calc(1.125 * ${theme.base.spacing});\n ${ellipsis &&\n css`\n overflow: hidden;\n text-overflow: ellipsis;\n `}\n `;\n});\n\nStyledInnerStage.defaultProps = defaultThemeProp;\n\nexport const StyledStage = styled.button<{\n status: 'completed' | 'current' | 'pending';\n readOnly?: boolean;\n}>(\n ({\n theme: {\n base: { palette, 'hit-area': hitArea, transparency, 'font-weight': fontWeight },\n components: {\n 'case-view': { stages }\n }\n },\n status,\n readOnly\n }) => {\n const stageForeground = calculateForegroundColor(\n stages.status[status].background,\n stages.status[status]['foreground-color']\n );\n\n return css`\n background: ${stages.status[status].background};\n color: ${stageForeground};\n outline: none;\n border-color: transparent;\n border-width: calc(2 * var(--chevron-border-thickness)) 0;\n border-style: solid;\n position: relative;\n\n /* Browsers do not reliably apply flex align-items: stretch to <button> elements.\n * Adding 0.0625rem (1px at default font size) to min-height compensates so the button fills its <li> container,\n * keeping the clipped chevron background flush with the top and bottom borders. */\n min-height: calc(4 * var(--chevron-spacing) + 0.0625rem);\n padding-inline-start: calc(2 * var(--chevron-spacing));\n padding-inline-end: var(--chevron-spacing);\n margin-inline-start: 0;\n margin-inline-end: 0;\n width: calc(100% + ${chevronConfig.width});\n --stage-chevron-width: ${chevronConfig.width};\n\n ${StyledInnerStage} {\n transform: translateX(calc(-0.25 * var(--chevron-spacing)));\n opacity: ${transparency['transparent-2']};\n }\n ${stageClipPath(true, true)}\n\n [dir='rtl'] & ${StyledInnerStage} {\n transform: translateX(calc(0.25 * var(--chevron-spacing)));\n }\n\n [dir='rtl'] & {\n ${stageClipPath(true, true, true)}\n }\n\n ${!readOnly &&\n css`\n &:hover {\n border-color: ${palette['border-line']};\n }\n `}\n\n &:focus-visible {\n border-color: ${palette.interactive};\n }\n\n &:active {\n border-color: ${palette.interactive};\n\n ${StyledInnerStage} {\n opacity: ${transparency['transparent-3']};\n }\n }\n\n &[aria-current] {\n ${StyledInnerStage} {\n font-weight: ${fontWeight.bold};\n opacity: 1;\n }\n\n ${!readOnly &&\n css`\n &:hover {\n ${StyledInnerStage} {\n opacity: ${transparency['transparent-2']};\n }\n }\n `}\n }\n\n @media (pointer: coarse) {\n min-height: ${hitArea['finger-min']};\n padding-inline-start: calc(2.25 * var(--chevron-spacing));\n width: calc(100% + ${chevronConfig.coarseWidth});\n --stage-chevron-width: ${chevronConfig.coarseWidth};\n }\n `;\n }\n);\n\nStyledStage.defaultProps = defaultThemeProp;\n\nexport const StyledStageCompleteIcon = styled(Icon)(({\n theme: {\n components: {\n 'case-view': {\n stages: {\n status: {\n completed: { 'foreground-color': foregroundColor, background }\n }\n }\n }\n }\n }\n}) => {\n const stageForeground = calculateForegroundColor(background, foregroundColor);\n return css`\n color: ${stageForeground};\n `;\n});\nStyledStageCompleteIcon.defaultProps = defaultThemeProp;\n\nexport const StyledStageText = styled(Text)<{ isCurrent?: boolean }>(\n ({ theme, isCurrent }) => css`\n font-weight: ${isCurrent ? theme.base['font-weight'].bold : theme.base['font-weight'].normal};\n `\n);\n\nStyledStageText.defaultProps = defaultThemeProp;\n\nexport const StyledStageContainer = styled.li<{\n readOnly?: boolean;\n}>(\n ({\n theme: {\n base: { palette },\n components: {\n card: { 'border-radius': borderRadius }\n }\n },\n readOnly\n }) => {\n return css`\n display: flex;\n position: relative;\n margin-inline-start: calc(-1 * ${chevronConfig.width});\n\n &:nth-of-type(2) {\n margin-inline-start: 0;\n }\n\n /* Resting z-index: for same-z siblings, DOM order determines paint order.\n * All non-last <li>s have z-index:1 so the later (right) <li>'s ::before paints on top\n * at internal boundaries; the last <li> has no z-index so its left neighbor's ::after\n * wins at the final boundary. On hover/focus/active, the interacting <li> gains z:2/3\n * and its own pseudo-element surfaces for that boundary, regardless of which side. */\n &:not(:nth-last-of-type(-n + 2)) {\n z-index: 1;\n }\n\n &:has(button:focus-visible),\n &:has(button:active) {\n z-index: 2;\n }\n\n ${!readOnly &&\n css`\n &:has(button:hover) {\n z-index: 3;\n }\n `}\n\n @media (pointer: coarse) {\n margin-inline-start: calc(-1 * ${chevronConfig.coarseWidth});\n }\n\n &:not(:nth-of-type(-n + 2))::before {\n ${createChevronPseudo(\n 'calc(2 * var(--chevron-border-thickness))',\n palette['border-line'],\n chevronConfig.squareSize\n )}\n /* Elevate ::before above the button so it renders via the same pathway as ::after.\n * Without z-index, ::before (first in DOM) is painted first and then covered by the\n * button, making it only partially visible through the clip-path notch window. This\n * causes thicker interactive-state borders (3×) to look thinner on the left boundary\n * than on the right (::after, which paints last and is always fully visible).\n * The ::before tip's rightmost extent is at --stage-chevron-width from the <li> start,\n * which is before the stage text (padding-inline-start: 2 × spacing), so no content overlap. */\n z-index: 1;\n }\n\n &:not(:nth-last-of-type(-n + 2))::after {\n ${createChevronPseudo(\n 'calc(2 * var(--chevron-border-thickness))',\n palette['border-line'],\n chevronConfig.squareSize\n )}\n }\n\n /* Chevron positioning: 45° rotated squares create visual tips via offsets:\n * left ≈ 0.688 × spacing, right ≈ 1.15 × spacing (accounts for skew correction) */\n\n [dir='rtl'] &::before,\n [dir='rtl'] &::after {\n transform: rotateZ(-45deg) skew(-15deg, -15deg);\n }\n\n /* Thicken chevrons to visually match button top/bottom border on any colored state.\n * At 45° rotation, border appears 1/sin(45°) ≈ 0.707× thinner, so 2× border ≈ 1.4× horizontal border weight. */\n ${createChevronBaseStyles(chevronConfig, 'var(--chevron-border-thickness)')}\n ${createChevronInteractiveStates(chevronConfig, 'var(--chevron-border-thickness)', !readOnly)}\n\n ${!readOnly &&\n css`\n &:has(button:hover)::before,\n &:has(button:hover)::after {\n border-color: ${palette['border-line']};\n }\n `}\n\n &:has(button:focus-visible)::before,\n &:has(button:focus-visible)::after {\n border-color: ${palette.interactive};\n }\n\n &:has(button:active)::before,\n &:has(button:active)::after {\n border-color: ${palette.interactive};\n }\n\n @media (pointer: coarse) {\n &:not(:nth-of-type(-n + 2))::before,\n &:not(:nth-last-of-type(-n + 2))::after {\n inset-block-start: calc(50% - ${chevronConfig.coarseSquareSize} / 2);\n width: ${chevronConfig.coarseSquareSize};\n height: ${chevronConfig.coarseSquareSize};\n }\n\n &:not(:nth-of-type(-n + 2))::before {\n inset-inline-start: calc(\n -1 * ${chevronConfig.coarseWidth} - ${chevronConfig.coarseOffsetLeft}\n );\n }\n\n &:not(:nth-last-of-type(-n + 2))::after {\n inset-inline-end: calc(\n -1 * ${chevronConfig.coarseWidth} + ${chevronConfig.coarseOffsetRight}\n );\n }\n }\n\n &:nth-of-type(2) > ${StyledStage} {\n --stage-chevron-width: ${chevronConfig.width};\n border-start-start-radius: ${borderRadius};\n border-end-start-radius: ${borderRadius};\n width: calc(100% + (2 * var(--stage-chevron-width)));\n padding-inline-start: calc(var(--chevron-spacing));\n ${stageClipPath(false, true)}\n\n ${!readOnly &&\n css`\n /* Inline-start interactive indicator via inset shadow — avoids border-color bleeding through gradient backgrounds */\n &:hover {\n box-shadow: inset calc(2 * var(--chevron-border-thickness)) 0 0\n ${palette['border-line']};\n\n [dir='rtl'] & {\n box-shadow: inset calc(-2 * var(--chevron-border-thickness)) 0 0\n ${palette['border-line']};\n }\n }\n `}\n\n &:focus-visible,\n &:active {\n box-shadow: inset calc(2 * var(--chevron-border-thickness)) 0 0 ${palette.interactive};\n\n [dir='rtl'] & {\n box-shadow: inset calc(-2 * var(--chevron-border-thickness)) 0 0 ${palette.interactive};\n }\n }\n\n @media (pointer: coarse) {\n --stage-chevron-width: ${chevronConfig.coarseWidth};\n width: calc(100% + (2 * var(--stage-chevron-width)));\n }\n }\n\n &:nth-last-of-type(2) > ${StyledStage} {\n --stage-chevron-width: ${chevronConfig.width};\n border-start-end-radius: ${borderRadius};\n border-end-end-radius: ${borderRadius};\n padding-inline-end: 0;\n width: 100%;\n ${stageClipPath(true, false)}\n\n ${!readOnly &&\n css`\n /* Inline-end interactive indicator via inset shadow — avoids border-color bleeding through gradient backgrounds */\n &:hover {\n box-shadow: inset calc(-2 * var(--chevron-border-thickness)) 0 0\n ${palette['border-line']};\n\n [dir='rtl'] & {\n box-shadow: inset calc(2 * var(--chevron-border-thickness)) 0 0\n ${palette['border-line']};\n }\n }\n `}\n\n &:focus-visible,\n &:active {\n box-shadow: inset calc(-2 * var(--chevron-border-thickness)) 0 0 ${palette.interactive};\n\n [dir='rtl'] & {\n box-shadow: inset calc(2 * var(--chevron-border-thickness)) 0 0 ${palette.interactive};\n }\n }\n\n @media (pointer: coarse) {\n --stage-chevron-width: ${chevronConfig.coarseWidth};\n }\n }\n\n [dir='rtl'] &:nth-of-type(2) > ${StyledStage} {\n ${stageClipPath(true, false, true)}\n }\n\n [dir='rtl'] &:nth-last-of-type(2) > ${StyledStage} {\n ${stageClipPath(false, true, true)}\n }\n `;\n }\n);\n\nStyledStageContainer.defaultProps = defaultThemeProp;\n\nexport const StyledStepsContainer = styled.ol(({ theme }) => {\n return css`\n list-style-type: none;\n margin: calc(2 * ${theme.base.spacing}) 0 calc(3 * ${theme.base.spacing});\n\n &:empty {\n margin-block-end: 0;\n }\n `;\n});\n\nStyledStepsContainer.defaultProps = defaultThemeProp;\n\nexport const StyledStep = styled.li<{ completed: boolean }>(({ completed, theme }) => {\n const textOpacity = completed ? theme.base.transparency['transparent-2'] : 1;\n\n return css`\n border-radius: 0;\n margin-block-end: calc(${theme.base.spacing});\n color: ${theme.base.palette['foreground-color']};\n\n &:last-child {\n margin-block-end: 0;\n }\n\n & > ${StyledIcon} {\n text-align: center;\n }\n\n div {\n opacity: ${textOpacity};\n }\n `;\n});\n\nStyledStep.defaultProps = defaultThemeProp;\n\nexport const StyledDateTimeDisplay = styled(DateTimeDisplay)(({ theme }) => {\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n return css`\n font-size: ${fontSize.xs};\n opacity: ${theme.base.transparency['transparent-2']};\n `;\n});\n\nStyledDateTimeDisplay.defaultProps = defaultThemeProp;\n\nexport const StyledStageGlimpse = styled.div(({ theme }) => {\n return css`\n max-width: ${theme.base['content-width'].sm};\n `;\n});\n\nStyledStageGlimpse.defaultProps = defaultThemeProp;\n\nexport const StyledStagesDescription = styled.p`\n display: none;\n`;\n\nStyledStagesDescription.defaultProps = defaultThemeProp;\n"]}
1
+ {"version":3,"file":"Stages.styles.js","sourceRoot":"","sources":["../../../src/components/Stages/Stages.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { transparentize } from 'polished';\n\nimport {\n calculateFontSize,\n DateTimeDisplay,\n defaultThemeProp,\n Icon,\n Text,\n StyledIcon,\n calculateForegroundColor\n} from '@pega/cosmos-react-core';\n\nconst stageClipPath = (leftNotch: boolean, rightPoint: boolean, mirrored = false): string => {\n if (mirrored) {\n // RTL: mirror the LTR clip-path polygon\n const points = ['100% 0', '0 0'];\n if (leftNotch) {\n points.push('var(--stage-chevron-width) 0', '0 50%', 'var(--stage-chevron-width) 100%');\n } else {\n points.push('0 100%');\n }\n points.push('100% 100%');\n if (rightPoint) {\n points.push('calc(100% - var(--stage-chevron-width)) 50%');\n }\n return `clip-path: polygon(${points.join(', ')});`;\n }\n\n const points = ['0 0', '100% 0'];\n if (rightPoint) {\n points.push(\n 'calc(100% - var(--stage-chevron-width)) 0',\n '100% 50%',\n 'calc(100% - var(--stage-chevron-width)) 100%'\n );\n } else {\n points.push('100% 100%');\n }\n points.push('0 100%');\n if (leftNotch) {\n points.push('var(--stage-chevron-width) 50%');\n }\n return `clip-path: polygon(${points.join(', ')});`;\n};\n\n// === Chevron Configuration ===\n// Centralizes spacing and border thickness via CSS custom properties set at StyledStages\nconst chevronConfig = {\n // Horizontal projection of the rotated border-square forming the chevron point (fine pointer).\n // Derived from the border-square size × cos(45° + skew). Tuned to visually align with the stage height.\n // All values scaled by 1.25× relative to the original 4× spacing design (now 5× spacing height).\n width: 'calc(1.445 * var(--chevron-spacing))',\n // Same horizontal projection for coarse/touch pointer (larger square, proportionally wider point).\n coarseWidth: 'calc(1.797 * var(--chevron-spacing))',\n // Side length of the rotated border-square forming the chevron (fine pointer: 3.75× base spacing).\n squareSize: 'calc(3.75 * var(--chevron-spacing))',\n // Side length of the rotated border-square for coarse/touch pointer (5× base spacing).\n coarseSquareSize: 'calc(5 * var(--chevron-spacing))',\n // Distance to inset the ::before notch from the left edge of the stage (fine pointer).\n // 0.86 ≈ width − half-border-overlap, keeps the notch flush with the preceding chevron point.\n offsetLeft: 'calc(0.86 * var(--chevron-spacing))',\n // Distance to inset the ::after point from the right edge of the stage (fine pointer).\n // Equal to `width` so the point extends exactly one chevron-width beyond the stage boundary.\n offsetRight: 'calc(1.445 * var(--chevron-spacing))',\n // Coarse-pointer equivalents of offsetLeft/offsetRight, scaled to match coarseWidth/coarseSquareSize.\n coarseOffsetLeft: 'calc(1.2875 * var(--chevron-spacing))',\n coarseOffsetRight: 'calc(1.797 * var(--chevron-spacing))'\n} as const;\n\n// === Chevron Helpers ===\n// After team discussion we decided to use logical properties throughout — `inset-block-start`\n// instead of `top`, and `border-block-start/end-width` instead of `border-top/bottom-width` —\n// for consistency with the rest of the file (which already uses logical inline-axis properties).\nconst createChevronPseudo = (borderWidth: string, borderColor: string, size: string): string => `\n content: '';\n position: absolute;\n display: block;\n inset-block-start: calc(50% - ${size} / 2);\n width: ${size};\n height: ${size};\n border-style: solid;\n border-color: ${borderColor};\n border-inline-end-width: ${borderWidth};\n border-inline-start-width: 0;\n border-block-start-width: ${borderWidth};\n border-block-end-width: 0;\n transform: rotateZ(45deg) skew(15deg, 15deg);\n pointer-events: none;\n`;\n\nconst createChevronBaseStyles = (config: typeof chevronConfig, borderThicknessVar: string) => css`\n &:not(:nth-of-type(-n + 2))::before,\n &:not(:nth-last-of-type(-n + 2))::after {\n border-inline-end-width: calc(1.5 * ${borderThicknessVar});\n border-block-start-width: calc(1.5 * ${borderThicknessVar});\n }\n\n &:not(:nth-of-type(-n + 2))::before {\n inset-inline-start: calc(-1 * ${config.width} - ${config.offsetLeft});\n }\n\n &:not(:nth-last-of-type(-n + 2))::after {\n inset-inline-end: calc(-1 * ${config.width} + ${config.offsetRight});\n }\n`;\n\nconst createChevronInteractiveStates = (\n config: typeof chevronConfig,\n borderThicknessVar: string,\n includeHover = true\n) => css`\n ${includeHover &&\n css`\n &:has(button:hover)::before,\n &:has(button:hover)::after {\n border-inline-end-width: calc(2 * ${borderThicknessVar});\n border-block-start-width: calc(2 * ${borderThicknessVar});\n }\n `}\n &:has(button:focus-visible)::before,\n &:has(button:focus-visible)::after,\n &:has(button:active)::before,\n &:has(button:active)::after {\n border-inline-end-width: calc(2 * ${borderThicknessVar});\n border-block-start-width: calc(2 * ${borderThicknessVar});\n }\n`;\n\n/**\n * Outer wrapper `<div>` for the stages bar. Applies layered scroll-fade masks and\n * reserves scrollbar space so the fade gradient does not overlap the scrollbar track.\n */\nexport const StyledStagesWrapper = styled.div(({ theme }) => {\n return css`\n --stages-fade-width: calc(${theme.base.spacing} * 2);\n --stages-fade-start: 0;\n --stages-fade-end: 0;\n --stages-scrollbar-reserve: calc(${theme.base.spacing} * 0.25);\n\n /* Places gradient stops one physical pixel outside the element boundary,\n * preventing browser anti-aliasing from creating a semi-transparent seam\n * at mask edges. 1px is the correct unit here: it must be exactly one CSS pixel\n * (independent of font-size), so the mask boundary doesn't introduce a seam at the\n * element edge due to anti-aliasing.\n * See also StyledSentinel, which uses 1px for the same reason.\n */\n /* stylelint-disable-next-line unit-allowed-list -- 1px is intentional; see comment above */\n --mask-edge-overhang: 1px;\n position: relative;\n width: 100%;\n overflow: hidden;\n border-radius: ${theme.components.card['border-radius']};\n border-end-start-radius: var(\n --stages-wrapper-bottom-radius,\n ${theme.components.card['border-radius']}\n );\n border-end-end-radius: var(\n --stages-wrapper-bottom-radius,\n ${theme.components.card['border-radius']}\n );\n mask-image: linear-gradient(black, black),\n linear-gradient(\n to right,\n transparent calc(-1 * var(--mask-edge-overhang)),\n black var(--stages-fade-start),\n black calc(100% - var(--stages-fade-end)),\n transparent calc(100% + var(--mask-edge-overhang))\n );\n mask-size:\n 100% var(--stages-scrollbar-reserve),\n 100% calc(100% - var(--stages-scrollbar-reserve));\n mask-position:\n 0 100%,\n 0 0;\n mask-repeat: no-repeat, no-repeat;\n\n [dir='rtl'] & {\n mask-image: linear-gradient(black, black),\n linear-gradient(\n to right,\n transparent calc(-1 * var(--mask-edge-overhang)),\n black var(--stages-fade-end),\n black calc(100% - var(--stages-fade-start)),\n transparent calc(100% + var(--mask-edge-overhang))\n );\n }\n\n &:has(:focus-visible) {\n box-shadow: ${theme.base.shadow['focus-group']};\n }\n\n @media (pointer: coarse) {\n --stages-fade-width: calc(${theme.base.spacing} * 3);\n mask-image: linear-gradient(\n to right,\n transparent calc(-1 * var(--mask-edge-overhang)),\n black var(--stages-fade-start),\n black calc(100% - var(--stages-fade-end)),\n transparent calc(100% + var(--mask-edge-overhang))\n );\n mask-size: 100% 100%;\n mask-position: 0 0;\n mask-repeat: no-repeat;\n\n [dir='rtl'] & {\n mask-image: linear-gradient(\n to right,\n transparent calc(-1 * var(--mask-edge-overhang)),\n black var(--stages-fade-end),\n black calc(100% - var(--stages-fade-start)),\n transparent calc(100% + var(--mask-edge-overhang))\n );\n }\n }\n `;\n});\n\nStyledStagesWrapper.defaultProps = defaultThemeProp;\n\n/**\n * Scrollable `<ol>` containing all stage chevron items. Sets the `--chevron-spacing`\n * and `--chevron-border-thickness` custom properties consumed by child elements.\n */\nexport const StyledStages = styled.ol(({ theme }) => {\n return css`\n --chevron-spacing: ${theme.base.spacing};\n --chevron-border-thickness: ${theme.components.button['border-width']};\n border-radius: ${theme.components.card['border-radius']};\n display: flex;\n padding: 0;\n width: 100%;\n overflow-x: auto;\n overflow-y: hidden;\n list-style: none;\n scrollbar-width: thin;\n scrollbar-color: transparent transparent;\n\n &:hover,\n &:focus-within {\n scrollbar-color: var(\n --stages-scrollbar-thumb,\n ${transparentize(0.4, theme.base.palette['border-line'])}\n )\n var(--stages-scrollbar-track, transparent);\n }\n\n &::-webkit-scrollbar {\n height: 0.25rem;\n }\n\n @media (pointer: coarse) {\n scrollbar-width: none;\n\n &::-webkit-scrollbar {\n display: none;\n }\n }\n `;\n});\n\nStyledStages.defaultProps = defaultThemeProp;\n\n/**\n * A sentinel is an invisible 1 px <li> placed at each end of the scrollable stage list.\n * It is observed by an IntersectionObserver; when it scrolls out of view, the component sets\n * --stages-fade-start or --stages-fade-end to show a gradient fade indicating more stages\n * are reachable by scrolling. When it comes back into view the property is reset to 0.\n *\n * Sentinel elements carry aria-hidden=\"true\" so they are valid list items semantically.\n * Because styled-components scopes all CSS to a generated class, the chevron and layout rules\n * in StyledStageContainer never apply to these elements — they carry a different class.\n * CSS type-based selectors (:nth-of-type, :nth-last-of-type) in StyledStageContainer are\n * offset by 1 at each end to skip the sentinels and target only real stage items.\n */\nexport const StyledSentinel = styled.li`\n flex-shrink: 0;\n\n /* NOTE: the sentinel must occupy\n * a single physical pixel so IntersectionObserver can detect it at threshold 0 while having\n * negligible layout impact. A rem value could collapse to zero at small font sizes.\n */\n /* stylelint-disable-next-line unit-allowed-list -- 1px is intentional */\n width: 1px;\n /* stylelint-disable-next-line unit-allowed-list -- 1px is intentional */\n height: 1px;\n padding: 0;\n margin: 0;\n pointer-events: none;\n\n /* Collapse the sentinel's layout footprint to zero on the side facing the stages.\n * Without this, each 1px sentinel creates a visible gap between the stage buttons\n * and the left/right edges of the wrapper. The sentinel remains in flow (required\n * for IntersectionObserver scroll detection) but no longer displaces stage content.\n */\n &:first-of-type {\n /* stylelint-disable-next-line unit-allowed-list -- 1px matches sentinel width */\n margin-inline-end: -1px;\n }\n\n &:last-of-type {\n /* stylelint-disable-next-line unit-allowed-list -- 1px matches sentinel width */\n margin-inline-start: -1px;\n }\n`;\n\nStyledSentinel.defaultProps = defaultThemeProp;\n\n/**\n * Inner `<span>` holding stage label content. Optionally applies `text-overflow: ellipsis`\n * for stages with long labels.\n */\nexport const StyledInnerStage = styled.span<{ ellipsis?: boolean }>(({ theme, ellipsis }) => {\n return css`\n display: inline-flex;\n align-items: center;\n gap: calc(0.25 * ${theme.base.spacing});\n text-align: center;\n white-space: nowrap;\n padding-inline-start: calc(0.875 * ${theme.base.spacing});\n padding-inline-end: calc(1.125 * ${theme.base.spacing});\n ${ellipsis &&\n css`\n overflow: hidden;\n text-overflow: ellipsis;\n `}\n `;\n});\n\nStyledInnerStage.defaultProps = defaultThemeProp;\n\n/**\n * Clickable `<button>` for a single stage. Renders the chevron clip-path shape and\n * applies status-based background and foreground colours.\n */\nexport const StyledStage = styled.button<{\n status: 'completed' | 'current' | 'pending';\n readOnly?: boolean;\n}>(\n ({\n theme: {\n base: { palette, 'hit-area': hitArea, transparency, 'font-weight': fontWeight },\n components: {\n 'case-view': { stages }\n }\n },\n status,\n readOnly\n }) => {\n const stageForeground = calculateForegroundColor(\n stages.status[status].background,\n stages.status[status]['foreground-color']\n );\n\n return css`\n background: ${stages.status[status].background};\n color: ${stageForeground};\n outline: none;\n border-color: transparent;\n border-width: calc(2 * var(--chevron-border-thickness)) 0;\n border-style: solid;\n position: relative;\n\n /* Browsers do not reliably apply flex align-items: stretch to <button> elements.\n * Adding 0.0625rem (1px at default font size) to min-height compensates so the button fills its <li> container,\n * keeping the clipped chevron background flush with the top and bottom borders. */\n min-height: calc(5 * var(--chevron-spacing) + 0.0625rem);\n padding-inline-start: calc(2 * var(--chevron-spacing));\n padding-inline-end: var(--chevron-spacing);\n margin-inline-start: 0;\n margin-inline-end: 0;\n width: calc(100% + ${chevronConfig.width});\n --stage-chevron-width: ${chevronConfig.width};\n\n ${StyledInnerStage} {\n transform: translateX(calc(-0.25 * var(--chevron-spacing)));\n opacity: ${transparency['transparent-2']};\n }\n ${stageClipPath(true, true)}\n\n [dir='rtl'] & ${StyledInnerStage} {\n transform: translateX(calc(0.25 * var(--chevron-spacing)));\n }\n\n [dir='rtl'] & {\n ${stageClipPath(true, true, true)}\n }\n\n ${!readOnly &&\n css`\n &:hover {\n border-color: ${palette['border-line']};\n }\n `}\n\n &:focus-visible {\n border-color: ${palette.interactive};\n }\n\n &:active {\n border-color: ${palette.interactive};\n\n ${StyledInnerStage} {\n opacity: ${transparency['transparent-3']};\n }\n }\n\n &[aria-current] {\n ${StyledInnerStage} {\n font-weight: ${fontWeight.bold};\n opacity: 1;\n }\n\n ${!readOnly &&\n css`\n &:hover {\n ${StyledInnerStage} {\n opacity: ${transparency['transparent-2']};\n }\n }\n `}\n }\n\n @media (pointer: coarse) {\n min-height: ${hitArea['finger-min']};\n padding-inline-start: calc(2.25 * var(--chevron-spacing));\n width: calc(100% + ${chevronConfig.coarseWidth});\n --stage-chevron-width: ${chevronConfig.coarseWidth};\n }\n `;\n }\n);\n\nStyledStage.defaultProps = defaultThemeProp;\n\n/**\n * Checkmark icon shown inside completed stages, tinted to match the stage foreground colour.\n */\nexport const StyledStageCompleteIcon = styled(Icon)(({\n theme: {\n components: {\n 'case-view': {\n stages: {\n status: {\n completed: { 'foreground-color': foregroundColor, background }\n }\n }\n }\n }\n }\n}) => {\n const stageForeground = calculateForegroundColor(background, foregroundColor);\n return css`\n color: ${stageForeground};\n `;\n});\nStyledStageCompleteIcon.defaultProps = defaultThemeProp;\n\n/**\n * Stage label text. Renders in bold weight when the stage is the current active stage.\n */\nexport const StyledStageText = styled(Text)<{ isCurrent?: boolean }>(\n ({ theme, isCurrent }) => css`\n font-weight: ${isCurrent ? theme.base['font-weight'].bold : theme.base['font-weight'].normal};\n `\n);\n\nStyledStageText.defaultProps = defaultThemeProp;\n\n/**\n * `<li>` container for a single stage item. Manages negative-margin chevron overlap,\n * pseudo-element positioning, and z-index stacking for interactive states.\n */\nexport const StyledStageContainer = styled.li<{\n readOnly?: boolean;\n}>(\n ({\n theme: {\n base: { palette },\n components: {\n card: { 'border-radius': borderRadius }\n }\n },\n readOnly\n }) => {\n return css`\n display: flex;\n position: relative;\n margin-inline-start: calc(-1 * ${chevronConfig.width});\n\n &:nth-of-type(2) {\n margin-inline-start: 0;\n }\n\n /* Resting z-index: for same-z siblings, DOM order determines paint order.\n * All non-last <li>s have z-index:1 so the later (right) <li>'s ::before paints on top\n * at internal boundaries; the last <li> has no z-index so its left neighbor's ::after\n * wins at the final boundary. On hover/focus/active, the interacting <li> gains z:2/3\n * and its own pseudo-element surfaces for that boundary, regardless of which side.\n */\n &:not(:nth-last-of-type(-n + 2)) {\n z-index: 1;\n }\n\n &:has(button:focus-visible),\n &:has(button:active) {\n z-index: 2;\n }\n\n ${!readOnly &&\n css`\n &:has(button:hover) {\n z-index: 3;\n }\n `}\n\n @media (pointer: coarse) {\n margin-inline-start: calc(-1 * ${chevronConfig.coarseWidth});\n }\n\n &:not(:nth-of-type(-n + 2))::before {\n ${createChevronPseudo(\n 'calc(2 * var(--chevron-border-thickness))',\n palette['border-line'],\n chevronConfig.squareSize\n )}\n /* Elevate ::before above the button so it renders via the same pathway as ::after.\n * Without z-index, ::before (first in DOM) is painted first and then covered by the\n * button, making it only partially visible through the clip-path notch window. This\n * causes thicker interactive-state borders (3×) to look thinner on the left boundary\n * than on the right (::after, which paints last and is always fully visible).\n * The ::before tip's rightmost extent is at --stage-chevron-width from the <li> start,\n * which is before the stage text (padding-inline-start: 2 × spacing), so no content overlap.\n */\n z-index: 1;\n }\n\n &:not(:nth-last-of-type(-n + 2))::after {\n ${createChevronPseudo(\n 'calc(2 * var(--chevron-border-thickness))',\n palette['border-line'],\n chevronConfig.squareSize\n )}\n }\n\n /* Chevron positioning: 45° rotated squares create visual tips via offsets:\n * left ≈ 0.86 × spacing, right ≈ 1.445 × spacing (accounts for skew correction)\n */\n\n [dir='rtl'] &::before,\n [dir='rtl'] &::after {\n transform: rotateZ(-45deg) skew(-15deg, -15deg);\n }\n\n /* Thicken chevrons to visually match button top/bottom border on any colored state.\n * At 45° rotation, border appears 1/sin(45°) ≈ 0.707× thinner, so 2× border ≈ 1.4× horizontal border weight.\n */\n ${createChevronBaseStyles(chevronConfig, 'var(--chevron-border-thickness)')}\n ${createChevronInteractiveStates(chevronConfig, 'var(--chevron-border-thickness)', !readOnly)}\n ${!readOnly &&\n css`\n &:has(button:hover)::before,\n &:has(button:hover)::after {\n border-color: ${palette['border-line']};\n }\n `}\n &:has(button:focus-visible)::before,\n &:has(button:focus-visible)::after {\n border-color: ${palette.interactive};\n }\n\n &:has(button:active)::before,\n &:has(button:active)::after {\n border-color: ${palette.interactive};\n }\n\n @media (pointer: coarse) {\n &:not(:nth-of-type(-n + 2))::before,\n &:not(:nth-last-of-type(-n + 2))::after {\n inset-block-start: calc(50% - ${chevronConfig.coarseSquareSize} / 2);\n width: ${chevronConfig.coarseSquareSize};\n height: ${chevronConfig.coarseSquareSize};\n }\n\n &:not(:nth-of-type(-n + 2))::before {\n inset-inline-start: calc(\n -1 * ${chevronConfig.coarseWidth} - ${chevronConfig.coarseOffsetLeft}\n );\n }\n\n &:not(:nth-last-of-type(-n + 2))::after {\n inset-inline-end: calc(\n -1 * ${chevronConfig.coarseWidth} + ${chevronConfig.coarseOffsetRight}\n );\n }\n }\n\n &:nth-of-type(2) > ${StyledStage} {\n --stage-chevron-width: ${chevronConfig.width};\n border-start-start-radius: ${borderRadius};\n border-end-start-radius: ${borderRadius};\n width: calc(100% + (2 * var(--stage-chevron-width)));\n padding-inline-start: calc(var(--chevron-spacing));\n ${stageClipPath(false, true)}\n\n ${!readOnly &&\n css`\n /* Inline-start interactive indicator via inset shadow — avoids border-color bleeding through gradient backgrounds */\n &:hover {\n box-shadow: inset calc(2 * var(--chevron-border-thickness)) 0 0\n ${palette['border-line']};\n\n [dir='rtl'] & {\n box-shadow: inset calc(-2 * var(--chevron-border-thickness)) 0 0\n ${palette['border-line']};\n }\n }\n `}\n\n &:focus-visible,\n &:active {\n box-shadow: inset calc(2 * var(--chevron-border-thickness)) 0 0 ${palette.interactive};\n\n [dir='rtl'] & {\n box-shadow: inset calc(-2 * var(--chevron-border-thickness)) 0 0 ${palette.interactive};\n }\n }\n\n @media (pointer: coarse) {\n --stage-chevron-width: ${chevronConfig.coarseWidth};\n width: calc(100% + (2 * var(--stage-chevron-width)));\n }\n }\n\n &:nth-last-of-type(2) > ${StyledStage} {\n --stage-chevron-width: ${chevronConfig.width};\n border-start-end-radius: ${borderRadius};\n border-end-end-radius: ${borderRadius};\n padding-inline-end: 0;\n width: 100%;\n ${stageClipPath(true, false)}\n\n ${!readOnly &&\n css`\n /* Inline-end interactive indicator via inset shadow — avoids border-color bleeding through gradient backgrounds */\n &:hover {\n box-shadow: inset calc(-2 * var(--chevron-border-thickness)) 0 0\n ${palette['border-line']};\n\n [dir='rtl'] & {\n box-shadow: inset calc(2 * var(--chevron-border-thickness)) 0 0\n ${palette['border-line']};\n }\n }\n `}\n\n &:focus-visible,\n &:active {\n box-shadow: inset calc(-2 * var(--chevron-border-thickness)) 0 0 ${palette.interactive};\n\n [dir='rtl'] & {\n box-shadow: inset calc(2 * var(--chevron-border-thickness)) 0 0 ${palette.interactive};\n }\n }\n\n @media (pointer: coarse) {\n --stage-chevron-width: ${chevronConfig.coarseWidth};\n }\n }\n\n [dir='rtl'] &:nth-of-type(2) > ${StyledStage} {\n ${stageClipPath(true, false, true)}\n }\n\n [dir='rtl'] &:nth-last-of-type(2) > ${StyledStage} {\n ${stageClipPath(false, true, true)}\n }\n `;\n }\n);\n\nStyledStageContainer.defaultProps = defaultThemeProp;\n\n/**\n * `<ol>` list of sub-step items displayed below the stages bar when a stage is expanded.\n */\nexport const StyledStepsContainer = styled.ol(({ theme }) => {\n return css`\n list-style-type: none;\n margin: calc(2 * ${theme.base.spacing}) 0 calc(3 * ${theme.base.spacing});\n\n &:empty {\n margin-block-end: 0;\n }\n `;\n});\n\nStyledStepsContainer.defaultProps = defaultThemeProp;\n\n/**\n * Individual step `<li>` within a stage. Dims text and icon at reduced opacity when completed.\n */\nexport const StyledStep = styled.li<{ completed: boolean }>(({ completed, theme }) => {\n const textOpacity = completed ? theme.base.transparency['transparent-2'] : 1;\n\n return css`\n border-radius: 0;\n margin-block-end: calc(${theme.base.spacing});\n color: ${theme.base.palette['foreground-color']};\n\n &:last-child {\n margin-block-end: 0;\n }\n\n & > ${StyledIcon} {\n text-align: center;\n }\n\n div {\n opacity: ${textOpacity};\n }\n `;\n});\n\nStyledStep.defaultProps = defaultThemeProp;\n\n/**\n * Small datetime label rendered beneath a step. Displayed at the `xs` font size\n * and reduced opacity.\n */\nexport const StyledDateTimeDisplay = styled(DateTimeDisplay)(({ theme }) => {\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n return css`\n font-size: ${fontSize.xs};\n opacity: ${theme.base.transparency['transparent-2']};\n `;\n});\n\nStyledDateTimeDisplay.defaultProps = defaultThemeProp;\n\n/**\n * Container `<div>` for the stage glimpse preview panel, constrained to a small max-width.\n */\nexport const StyledStageGlimpse = styled.div(({ theme }) => {\n return css`\n max-width: ${theme.base['content-width'].sm};\n `;\n});\n\nStyledStageGlimpse.defaultProps = defaultThemeProp;\n\n/**\n * Visually hidden `<p>` providing an accessible description for the stages list,\n * announced by screen readers but not displayed on screen.\n */\nexport const StyledStagesDescription = styled.p`\n display: none;\n`;\n\nStyledStagesDescription.defaultProps = defaultThemeProp;\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pega/cosmos-react-work",
3
- "version": "10.0.0-build.2.2",
3
+ "version": "10.0.0-build.2.4",
4
4
  "license": "SEE LICENSE IN LICENSE",
5
5
  "author": "Pegasystems",
6
6
  "sideEffects": false,
@@ -14,8 +14,8 @@
14
14
  "build": "tsc -b tsconfig.build.json"
15
15
  },
16
16
  "dependencies": {
17
- "@pega/cosmos-react-core": "10.0.0-build.2.2",
18
- "@pega/cosmos-react-rte": "10.0.0-build.2.2",
17
+ "@pega/cosmos-react-core": "10.0.0-build.2.4",
18
+ "@pega/cosmos-react-rte": "10.0.0-build.2.4",
19
19
  "@types/react": "^17.0.62 || ^18.3.3",
20
20
  "@types/react-dom": "^17.0.20 || ^18.3.0",
21
21
  "polished": "^4.1.0",