@pega/cosmos-react-work 10.0.0-build.1.11 → 10.0.0-build.1.13

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

@@ -1,4 +1,5 @@
 import styled, { css } from 'styled-components';
+import { transparentize } from 'polished';
 import { calculateFontSize, DateTimeDisplay, defaultThemeProp, Icon, Text, StyledIcon, calculateForegroundColor } from '@pega/cosmos-react-core';
 const stageClipPath = (leftNotch, rightPoint, mirrored = false) => {
     if (mirrored) {
@@ -32,14 +33,24 @@ const stageClipPath = (leftNotch, rightPoint, mirrored = false) => {
 // === Chevron Configuration ===
 // Centralizes spacing and border thickness via CSS custom properties set at StyledStages
 const chevronConfig = {
+    // Horizontal projection of the rotated border-square forming the chevron point (fine pointer).
+    // Derived from the border-square size × cos(45° + skew). Tuned to visually align with the stage height.
     width: 'calc(1.156 * var(--chevron-spacing))',
+    // Same horizontal projection for coarse/touch pointer (larger square, proportionally wider point).
     coarseWidth: 'calc(1.4375 * var(--chevron-spacing))',
+    // Side length of the rotated border-square forming the chevron (fine pointer: 3× base spacing).
     squareSize: 'calc(3 * var(--chevron-spacing))',
-    coarseSquareSize: 'calc(3.5 * var(--chevron-spacing))',
+    // Side length of the rotated border-square for coarse/touch pointer (4× base spacing).
+    coarseSquareSize: 'calc(4 * var(--chevron-spacing))',
+    // Distance to inset the ::before notch from the left edge of the stage (fine pointer).
+    // 0.688 ≈ width − half-border-overlap, keeps the notch flush with the preceding chevron point.
     offsetLeft: 'calc(0.688 * var(--chevron-spacing))',
+    // Distance to inset the ::after point from the right edge of the stage (fine pointer).
+    // Equal to `width` so the point extends exactly one chevron-width beyond the stage boundary.
     offsetRight: 'calc(1.156 * var(--chevron-spacing))',
-    coarseOffsetLeft: 'calc(0.688 * var(--chevron-spacing))',
-    coarseOffsetRight: 'calc(1.5 * var(--chevron-spacing))'
+    // Coarse-pointer equivalents of offsetLeft/offsetRight, scaled to match coarseWidth/coarseSquareSize.
+    coarseOffsetLeft: 'calc(1.03 * var(--chevron-spacing))',
+    coarseOffsetRight: 'calc(1.4375 * var(--chevron-spacing))'
 };
 // === Chevron Helpers ===
 // After team discussion we decided to use logical properties throughout — `inset-block-start`
@@ -62,17 +73,17 @@ const createChevronPseudo = (borderWidth, borderColor, size) => `
   pointer-events: none;
 `;
 const createChevronBaseStyles = (config, borderThicknessVar) => css `
-  &:not(:first-of-type)::before,
-  &:not(:last-of-type)::after {
+  &:not(:nth-of-type(-n + 2))::before,
+  &:not(:nth-last-of-type(-n + 2))::after {
     border-inline-end-width: calc(1.5 * ${borderThicknessVar});
     border-block-start-width: calc(1.5 * ${borderThicknessVar});
   }
 
-  &:not(:first-of-type)::before {
+  &:not(:nth-of-type(-n + 2))::before {
     inset-inline-start: calc(-1 * ${config.width} - ${config.offsetLeft});
   }
 
-  &:not(:last-of-type)::after {
+  &:not(:nth-last-of-type(-n + 2))::after {
     inset-inline-end: calc(-1 * ${config.width} + ${config.offsetRight});
   }
 `;
@@ -93,30 +104,147 @@ const createChevronInteractiveStates = (config, borderThicknessVar, includeHover
     border-block-start-width: calc(2 * ${borderThicknessVar});
   }
 `;
+export const StyledStagesWrapper = styled.div(({ theme }) => {
+    return css `
+    --stages-fade-width: calc(${theme.base.spacing} * 2);
+    --stages-fade-start: 0;
+    --stages-fade-end: 0;
+    --stages-scrollbar-reserve: calc(${theme.base.spacing} * 0.25);
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+    border-radius: ${theme.components.card['border-radius']};
+    mask-image: linear-gradient(black, black),
+      linear-gradient(
+        to right,
+        transparent 0,
+        black var(--stages-fade-start),
+        black calc(100% - var(--stages-fade-end)),
+        transparent 100%
+      );
+    mask-size:
+      100% var(--stages-scrollbar-reserve),
+      100% calc(100% - var(--stages-scrollbar-reserve));
+    mask-position:
+      0 100%,
+      0 0;
+    mask-repeat: no-repeat, no-repeat;
+
+    [dir='rtl'] & {
+      mask-image: linear-gradient(black, black),
+        linear-gradient(
+          to right,
+          transparent 0,
+          black var(--stages-fade-end),
+          black calc(100% - var(--stages-fade-start)),
+          transparent 100%
+        );
+    }
+
+    &:has(:focus-visible) {
+      box-shadow: ${theme.base.shadow['focus-group']};
+    }
+
+    @media (pointer: coarse) {
+      --stages-fade-width: calc(${theme.base.spacing} * 3);
+      mask-image: linear-gradient(
+        to right,
+        transparent 0,
+        black var(--stages-fade-start),
+        black calc(100% - var(--stages-fade-end)),
+        transparent 100%
+      );
+      mask-size: 100% 100%;
+      mask-position: 0 0;
+      mask-repeat: no-repeat;
+
+      [dir='rtl'] & {
+        mask-image: linear-gradient(
+          to right,
+          transparent 0,
+          black var(--stages-fade-end),
+          black calc(100% - var(--stages-fade-start)),
+          transparent 100%
+        );
+      }
+    }
+  `;
+});
+StyledStagesWrapper.defaultProps = defaultThemeProp;
 export const StyledStages = styled.ol(({ theme }) => {
     return css `
     --chevron-spacing: ${theme.base.spacing};
     --chevron-border-thickness: ${theme.components.button['border-width']};
-    background-color: ${theme.base.palette['primary-background']};
     border-radius: ${theme.components.card['border-radius']};
     display: flex;
     padding: 0;
     width: 100%;
-    overflow: hidden;
+    overflow-x: auto;
+    overflow-y: hidden;
     list-style: none;
+    scrollbar-width: thin;
+    scrollbar-color: transparent transparent;
+
+    &:hover,
+    &:focus-within {
+      scrollbar-color: var(
+          --stages-scrollbar-thumb,
+          ${transparentize(0.4, theme.base.palette['border-line'])}
+        )
+        var(--stages-scrollbar-track, transparent);
+    }
 
-    &:has(:focus-visible) {
-      box-shadow: ${theme.base.shadow['focus-group']};
+    &::-webkit-scrollbar {
+      height: 0.25rem;
+    }
+
+    @media (pointer: coarse) {
+      scrollbar-width: none;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
     }
   `;
 });
 StyledStages.defaultProps = defaultThemeProp;
-export const StyledInnerStage = styled.span(props => {
+/**
+ * A sentinel is an invisible 1 px <li> placed at each end of the scrollable stage list.
+ * It is observed by an IntersectionObserver; when it scrolls out of view, the component sets
+ * --stages-fade-start or --stages-fade-end to show a gradient fade indicating more stages
+ * are reachable by scrolling. When it comes back into view the property is reset to 0.
+ *
+ * Sentinel elements carry aria-hidden="true" so they are valid list items semantically.
+ * Because styled-components scopes all CSS to a generated class, the chevron and layout rules
+ * in StyledStageContainer never apply to these elements — they carry a different class.
+ * CSS type-based selectors (:nth-of-type, :nth-last-of-type) in StyledStageContainer are
+ * offset by 1 at each end to skip the sentinels and target only real stage items.
+ */
+export const StyledSentinel = styled.li `
+  flex-shrink: 0;
+
+  /* NOTE: the sentinel must occupy
+        a single physical pixel so IntersectionObserver can detect it at threshold 0 while having
+        negligible layout impact. A rem value could collapse to zero at small font sizes. */
+  /* stylelint-disable-next-line unit-allowed-list -- 1px is intentional */
+  width: 1px;
+  /* stylelint-disable-next-line unit-allowed-list -- 1px is intentional */
+  height: 1px;
+  padding: 0;
+  margin: 0;
+  pointer-events: none;
+`;
+StyledSentinel.defaultProps = defaultThemeProp;
+export const StyledInnerStage = styled.span(({ theme, ellipsis }) => {
     return css `
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
+    gap: calc(0.25 * ${theme.base.spacing});
     text-align: center;
     white-space: nowrap;
-    ${props.ellipsis &&
+    padding-inline-start: calc(0.875 * ${theme.base.spacing});
+    padding-inline-end: calc(1.125 * ${theme.base.spacing});
+    ${ellipsis &&
         css `
       overflow: hidden;
       text-overflow: ellipsis;
@@ -146,12 +274,12 @@ export const StyledStage = styled.button(({ theme: { base: { palette, 'hit-area'
       width: calc(100% + ${chevronConfig.width});
       --stage-chevron-width: ${chevronConfig.width};
 
-      ${StyledIcon}, ${StyledInnerStage} {
+      ${StyledInnerStage} {
         transform: translateX(calc(-0.25 * var(--chevron-spacing)));
+        opacity: ${transparency['transparent-2']};
       }
       ${stageClipPath(true, true)}
 
-      [dir='rtl'] & ${StyledIcon},
       [dir='rtl'] & ${StyledInnerStage} {
         transform: translateX(calc(0.25 * var(--chevron-spacing)));
       }
@@ -201,16 +329,6 @@ export const StyledStage = styled.button(({ theme: { base: { palette, 'hit-area'
         width: calc(100% + ${chevronConfig.coarseWidth});
         --stage-chevron-width: ${chevronConfig.coarseWidth};
       }
-
-      ${StyledIcon} {
-        & ~ ${StyledInnerStage} {
-          margin-inline-start: 0.25rem;
-        }
-      }
-
-      ${StyledInnerStage} {
-        opacity: ${transparency['transparent-2']};
-      }
     `;
 });
 StyledStage.defaultProps = defaultThemeProp;
@@ -231,7 +349,7 @@ export const StyledStageContainer = styled.li(({ theme: { base: { palette }, com
       position: relative;
       margin-inline-start: calc(-1 * ${chevronConfig.width});
 
-      &:first-of-type {
+      &:nth-of-type(2) {
         margin-inline-start: 0;
       }
 
@@ -240,7 +358,7 @@ export const StyledStageContainer = styled.li(({ theme: { base: { palette }, com
        * at internal boundaries; the last <li> has no z-index so its left neighbor's ::after
        * wins at the final boundary. On hover/focus/active, the interacting <li> gains z:2/3
        * and its own pseudo-element surfaces for that boundary, regardless of which side. */
-      &:not(:last-of-type) {
+      &:not(:nth-last-of-type(-n + 2)) {
         z-index: 1;
       }
 
@@ -260,7 +378,7 @@ export const StyledStageContainer = styled.li(({ theme: { base: { palette }, com
         margin-inline-start: calc(-1 * ${chevronConfig.coarseWidth});
       }
 
-      &:not(:first-of-type)::before {
+      &:not(:nth-of-type(-n + 2))::before {
         ${createChevronPseudo('calc(2 * var(--chevron-border-thickness))', palette['border-line'], chevronConfig.squareSize)}
         /* Elevate ::before above the button so it renders via the same pathway as ::after.
          * Without z-index, ::before (first in DOM) is painted first and then covered by the
@@ -272,7 +390,7 @@ export const StyledStageContainer = styled.li(({ theme: { base: { palette }, com
         z-index: 1;
       }
 
-      &:not(:last-of-type)::after {
+      &:not(:nth-last-of-type(-n + 2))::after {
         ${createChevronPseudo('calc(2 * var(--chevron-border-thickness))', palette['border-line'], chevronConfig.squareSize)}
       }
 
@@ -308,27 +426,27 @@ export const StyledStageContainer = styled.li(({ theme: { base: { palette }, com
       }
 
       @media (pointer: coarse) {
-        &:not(:first-of-type)::before,
-        &:not(:last-of-type)::after {
+        &:not(:nth-of-type(-n + 2))::before,
+        &:not(:nth-last-of-type(-n + 2))::after {
           inset-block-start: calc(50% - ${chevronConfig.coarseSquareSize} / 2);
           width: ${chevronConfig.coarseSquareSize};
           height: ${chevronConfig.coarseSquareSize};
         }
 
-        &:not(:first-of-type)::before {
+        &:not(:nth-of-type(-n + 2))::before {
           inset-inline-start: calc(
             -1 * ${chevronConfig.coarseWidth} - ${chevronConfig.coarseOffsetLeft}
           );
         }
 
-        &:not(:last-of-type)::after {
+        &:not(:nth-last-of-type(-n + 2))::after {
           inset-inline-end: calc(
             -1 * ${chevronConfig.coarseWidth} + ${chevronConfig.coarseOffsetRight}
           );
         }
       }
 
-      &:first-of-type > ${StyledStage} {
+      &:nth-of-type(2) > ${StyledStage} {
         --stage-chevron-width: ${chevronConfig.width};
         border-start-start-radius: ${borderRadius};
         border-end-start-radius: ${borderRadius};
@@ -365,25 +483,47 @@ export const StyledStageContainer = styled.li(({ theme: { base: { palette }, com
         }
       }
 
-      &:last-of-type > ${StyledStage} {
+      &:nth-last-of-type(2) > ${StyledStage} {
         --stage-chevron-width: ${chevronConfig.width};
         border-start-end-radius: ${borderRadius};
         border-end-end-radius: ${borderRadius};
-        border-inline-end-width: calc(2 * var(--chevron-border-thickness));
         padding-inline-end: 0;
         width: 100%;
         ${stageClipPath(true, false)}
 
+        ${!readOnly &&
+        css `
+          /* Inline-end interactive indicator via inset shadow — avoids border-color bleeding through gradient backgrounds */
+          &:hover {
+            box-shadow: inset calc(-2 * var(--chevron-border-thickness)) 0 0
+              ${palette['border-line']};
+
+            [dir='rtl'] & {
+              box-shadow: inset calc(2 * var(--chevron-border-thickness)) 0 0
+                ${palette['border-line']};
+            }
+          }
+        `}
+
+        &:focus-visible,
+        &:active {
+          box-shadow: inset calc(-2 * var(--chevron-border-thickness)) 0 0 ${palette.interactive};
+
+          [dir='rtl'] & {
+            box-shadow: inset calc(2 * var(--chevron-border-thickness)) 0 0 ${palette.interactive};
+          }
+        }
+
         @media (pointer: coarse) {
           --stage-chevron-width: ${chevronConfig.coarseWidth};
         }
       }
 
-      [dir='rtl'] &:first-of-type > ${StyledStage} {
+      [dir='rtl'] &:nth-of-type(2) > ${StyledStage} {
         ${stageClipPath(true, false, true)}
       }
 
-      [dir='rtl'] &:last-of-type > ${StyledStage} {
+      [dir='rtl'] &:nth-last-of-type(2) > ${StyledStage} {
         ${stageClipPath(false, true, true)}
       }
     `;

package/lib/components/Stages/Stages.styles.js.map

@@ -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';\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  width: 'calc(1.156 * var(--chevron-spacing))',\n  coarseWidth: 'calc(1.4375 * var(--chevron-spacing))',\n  squareSize: 'calc(3 * var(--chevron-spacing))',\n  coarseSquareSize: 'calc(3.5 * var(--chevron-spacing))',\n  offsetLeft: 'calc(0.688 * var(--chevron-spacing))',\n  offsetRight: 'calc(1.156 * var(--chevron-spacing))',\n  coarseOffsetLeft: 'calc(0.688 * var(--chevron-spacing))',\n  coarseOffsetRight: 'calc(1.5 * 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(:first-of-type)::before,\n  &:not(:last-of-type)::after {\n    border-inline-end-width: calc(1.5 * ${borderThicknessVar});\n    border-block-start-width: calc(1.5 * ${borderThicknessVar});\n  }\n\n  &:not(:first-of-type)::before {\n    inset-inline-start: calc(-1 * ${config.width} - ${config.offsetLeft});\n  }\n\n  &:not(:last-of-type)::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 StyledStages = styled.ol(({ theme }) => {\n  return css`\n    --chevron-spacing: ${theme.base.spacing};\n    --chevron-border-thickness: ${theme.components.button['border-width']};\n    background-color: ${theme.base.palette['primary-background']};\n    border-radius: ${theme.components.card['border-radius']};\n    display: flex;\n    padding: 0;\n    width: 100%;\n    overflow: hidden;\n    list-style: none;\n\n    &:has(:focus-visible) {\n      box-shadow: ${theme.base.shadow['focus-group']};\n    }\n  `;\n});\n\nStyledStages.defaultProps = defaultThemeProp;\n\nexport const StyledInnerStage = styled.span<{ ellipsis?: boolean }>(props => {\n  return css`\n    display: inline-block;\n    text-align: center;\n    white-space: nowrap;\n    ${props.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      ${StyledIcon}, ${StyledInnerStage} {\n        transform: translateX(calc(-0.25 * var(--chevron-spacing)));\n      }\n      ${stageClipPath(true, true)}\n\n      [dir='rtl'] & ${StyledIcon},\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      ${StyledIcon} {\n        & ~ ${StyledInnerStage} {\n          margin-inline-start: 0.25rem;\n        }\n      }\n\n      ${StyledInnerStage} {\n        opacity: ${transparency['transparent-2']};\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      &:first-of-type {\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(:last-of-type) {\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(:first-of-type)::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(:last-of-type)::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(:first-of-type)::before,\n        &:not(:last-of-type)::after {\n          inset-block-start: calc(50% - ${chevronConfig.coarseSquareSize} / 2);\n          width: ${chevronConfig.coarseSquareSize};\n          height: ${chevronConfig.coarseSquareSize};\n        }\n\n        &:not(:first-of-type)::before {\n          inset-inline-start: calc(\n            -1 * ${chevronConfig.coarseWidth} - ${chevronConfig.coarseOffsetLeft}\n          );\n        }\n\n        &:not(:last-of-type)::after {\n          inset-inline-end: calc(\n            -1 * ${chevronConfig.coarseWidth} + ${chevronConfig.coarseOffsetRight}\n          );\n        }\n      }\n\n      &:first-of-type > ${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      &:last-of-type > ${StyledStage} {\n        --stage-chevron-width: ${chevronConfig.width};\n        border-start-end-radius: ${borderRadius};\n        border-end-end-radius: ${borderRadius};\n        border-inline-end-width: calc(2 * var(--chevron-border-thickness));\n        padding-inline-end: 0;\n        width: 100%;\n        ${stageClipPath(true, false)}\n\n        @media (pointer: coarse) {\n          --stage-chevron-width: ${chevronConfig.coarseWidth};\n        }\n      }\n\n      [dir='rtl'] &:first-of-type > ${StyledStage} {\n        ${stageClipPath(true, false, true)}\n      }\n\n      [dir='rtl'] &:last-of-type > ${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"]}
+{"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"]}

package/lib/components/Stages/Stages.test-ids.d.ts

@@ -0,0 +1,2 @@
+export declare const getStagesTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly []>;
+//# sourceMappingURL=Stages.test-ids.d.ts.map

package/lib/components/Stages/Stages.test-ids.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stages.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/Stages.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,uIAAuC,CAAC"}

package/lib/components/Stages/Stages.test-ids.js

@@ -0,0 +1,3 @@
+import { createTestIds } from '@pega/cosmos-react-core';
+export const getStagesTestIds = createTestIds('stages', []);
+//# sourceMappingURL=Stages.test-ids.js.map

package/lib/components/Stages/Stages.test-ids.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stages.test-ids.js","sourceRoot":"","sources":["../../../src/components/Stages/Stages.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,MAAM,CAAC,MAAM,gBAAgB,GAAG,aAAa,CAAC,QAAQ,EAAE,EAAW,CAAC,CAAC","sourcesContent":["import { createTestIds } from '@pega/cosmos-react-core';\n\nexport const getStagesTestIds = createTestIds('stages', [] as const);\n"]}

package/lib/components/Stages/Stages.types.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode, Ref } from 'react';
-import type { BaseProps, NoChildrenProp } from '@pega/cosmos-react-core';
+import type { BaseProps, NoChildrenProp, TestIdProp } from '@pega/cosmos-react-core';
 export interface StepProps {
     /** Step name - either text or link. */
     name: ReactNode;
@@ -20,7 +20,7 @@ export interface StageProps {
     /** Steps data defined in this stage. The stage is treated as not loaded if undefined. */
     steps?: StepProps[];
 }
-export interface StagesProps extends BaseProps, NoChildrenProp {
+export interface StagesProps extends BaseProps, NoChildrenProp, TestIdProp {
     /** List of objects describing each stage and their state. */
     stages: StageProps[];
     /** Current stage id. */
@@ -38,7 +38,7 @@ export interface StagesProps extends BaseProps, NoChildrenProp {
      */
     readOnly?: boolean;
     /** Ref to the stages container. */
-    ref?: Ref<HTMLDivElement>;
+    ref?: Ref<HTMLOListElement>;
 }
 export type StageStatus = 'completed' | 'current' | 'pending';
 //# sourceMappingURL=Stages.types.d.ts.map

package/lib/components/Stages/Stages.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Stages.types.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/Stages.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAEzE,MAAM,WAAW,SAAS;IACxB,uCAAuC;IACvC,IAAI,EAAE,SAAS,CAAC;IAChB,wDAAwD;IACxD,SAAS,EAAE,OAAO,CAAC;IACnB,8BAA8B;IAC9B,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,UAAU;IACzB,kBAAkB;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,yBAAyB;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,wEAAwE;IACxE,IAAI,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;IAC9B,uDAAuD;IACvD,SAAS,EAAE,OAAO,CAAC;IACnB,yFAAyF;IACzF,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;CACrB;AAED,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,cAAc;IAC5D,6DAA6D;IAC7D,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,wBAAwB;IACxB,OAAO,EAAE,MAAM,CAAC;IAChB,yBAAyB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC;IACnD;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mCAAmC;IACnC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,MAAM,MAAM,WAAW,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,CAAC"}
+{"version":3,"file":"Stages.types.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/Stages.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAErF,MAAM,WAAW,SAAS;IACxB,uCAAuC;IACvC,IAAI,EAAE,SAAS,CAAC;IAChB,wDAAwD;IACxD,SAAS,EAAE,OAAO,CAAC;IACnB,8BAA8B;IAC9B,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,UAAU;IACzB,kBAAkB;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,yBAAyB;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,wEAAwE;IACxE,IAAI,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;IAC9B,uDAAuD;IACvD,SAAS,EAAE,OAAO,CAAC;IACnB,yFAAyF;IACzF,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;CACrB;AAED,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,cAAc,EAAE,UAAU;IACxE,6DAA6D;IAC7D,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,wBAAwB;IACxB,OAAO,EAAE,MAAM,CAAC;IAChB,yBAAyB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC;IACnD;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mCAAmC;IACnC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED,MAAM,MAAM,WAAW,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,CAAC"}

package/lib/components/Stages/Stages.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stages.types.js","sourceRoot":"","sources":["../../../src/components/Stages/Stages.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ReactNode, Ref } from 'react';\n\nimport type { BaseProps, NoChildrenProp } from '@pega/cosmos-react-core';\n\nexport interface StepProps {\n  /** Step name - either text or link. */\n  name: ReactNode;\n  /** Flag determining whether step has been completed. */\n  completed: boolean;\n  /** Unique step identifier. */\n  id: string;\n}\n\nexport interface StageProps {\n  /** Stage name. */\n  name: string;\n  /** Unique identifier. */\n  id: string;\n  /** Date of completion. Accepts date object, ISO string or timestamp. */\n  date?: Date | string | number;\n  /** Flag determining whether the stage is completed. */\n  completed: boolean;\n  /** Steps data defined in this stage. The stage is treated as not loaded if undefined. */\n  steps?: StepProps[];\n}\n\nexport interface StagesProps extends BaseProps, NoChildrenProp {\n  /** List of objects describing each stage and their state. */\n  stages: StageProps[];\n  /** Current stage id. */\n  current: string;\n  /** Case title (label) */\n  caseTitle?: string;\n  /**\n   * Callback invoked when stage details are requested to show.\n   * @param stages stages' ids requested to load details for.\n   */\n  onLoadStage?: (stages: StageProps['id'][]) => void;\n  /**\n   * Render stages in read-only mode.\n   * @default false\n   */\n  readOnly?: boolean;\n  /** Ref to the stages container. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport type StageStatus = 'completed' | 'current' | 'pending';\n"]}
+{"version":3,"file":"Stages.types.js","sourceRoot":"","sources":["../../../src/components/Stages/Stages.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ReactNode, Ref } from 'react';\n\nimport type { BaseProps, NoChildrenProp, TestIdProp } from '@pega/cosmos-react-core';\n\nexport interface StepProps {\n  /** Step name - either text or link. */\n  name: ReactNode;\n  /** Flag determining whether step has been completed. */\n  completed: boolean;\n  /** Unique step identifier. */\n  id: string;\n}\n\nexport interface StageProps {\n  /** Stage name. */\n  name: string;\n  /** Unique identifier. */\n  id: string;\n  /** Date of completion. Accepts date object, ISO string or timestamp. */\n  date?: Date | string | number;\n  /** Flag determining whether the stage is completed. */\n  completed: boolean;\n  /** Steps data defined in this stage. The stage is treated as not loaded if undefined. */\n  steps?: StepProps[];\n}\n\nexport interface StagesProps extends BaseProps, NoChildrenProp, TestIdProp {\n  /** List of objects describing each stage and their state. */\n  stages: StageProps[];\n  /** Current stage id. */\n  current: string;\n  /** Case title (label) */\n  caseTitle?: string;\n  /**\n   * Callback invoked when stage details are requested to show.\n   * @param stages stages' ids requested to load details for.\n   */\n  onLoadStage?: (stages: StageProps['id'][]) => void;\n  /**\n   * Render stages in read-only mode.\n   * @default false\n   */\n  readOnly?: boolean;\n  /** Ref to the stages container. */\n  ref?: Ref<HTMLOListElement>;\n}\n\nexport type StageStatus = 'completed' | 'current' | 'pending';\n"]}

package/lib/components/Stages/index.d.ts

@@ -1,3 +1,4 @@
 export { default } from './Stages';
 export type { StagesProps } from './Stages.types';
+export { getStagesTestIds } from './Stages.test-ids';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/Stages/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AACnC,YAAY,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AACnC,YAAY,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC"}

package/lib/components/Stages/index.js

@@ -1,2 +1,3 @@
 export { default } from './Stages';
+export { getStagesTestIds } from './Stages.test-ids';
 //# sourceMappingURL=index.js.map

package/lib/components/Stages/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Stages/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC","sourcesContent":["export { default } from './Stages';\nexport type { StagesProps } from './Stages.types';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Stages/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAEnC,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC","sourcesContent":["export { default } from './Stages';\nexport type { StagesProps } from './Stages.types';\nexport { getStagesTestIds } from './Stages.test-ids';\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-work",
-  "version": "10.0.0-build.1.11",
+  "version": "10.0.0-build.1.13",
   "license": "SEE LICENSE IN LICENSE",
   "author": "Pegasystems",
   "sideEffects": false,
@@ -14,8 +14,8 @@
     "build": "tsc -b tsconfig.build.json"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "10.0.0-build.1.11",
-    "@pega/cosmos-react-rte": "10.0.0-build.1.11",
+    "@pega/cosmos-react-core": "10.0.0-build.1.13",
+    "@pega/cosmos-react-rte": "10.0.0-build.1.13",
     "@types/react": "^17.0.62 || ^18.3.3",
     "@types/react-dom": "^17.0.20 || ^18.3.0",
     "polished": "^4.1.0",