@pega/cosmos-react-work 9.18.0 → 9.20.0

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

@@ -1,5 +1,5 @@
 import type { Ref } from 'react';
-import type { NoChildrenProp, TestIdProp } from '@pega/cosmos-react-core';
+import type { BaseProps, NoChildrenProp, TestIdProp } from '@pega/cosmos-react-core';
 interface ShortcutItemBase {
     /** Unique identifier for this shortcut. */
     id: string;
@@ -7,6 +7,8 @@ interface ShortcutItemBase {
     label: string;
     /** Icon name from the registered icon set. */
     icon: string;
+    /** Optional class name applied to the rendered shortcut card. */
+    className?: string;
 }
 export interface ShortcutLinkItem extends ShortcutItemBase {
     /** Discriminant — this item navigates to an external URL. */
@@ -50,7 +52,7 @@ interface ShortcutsWithCategories {
     categories: ShortcutCategory[];
     showHeader?: never;
 }
-interface ShortcutsBaseProps extends NoChildrenProp, TestIdProp {
+interface ShortcutsBaseProps extends NoChildrenProp, TestIdProp, BaseProps {
     /** Heading displayed above the shortcuts. */
     heading?: string;
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"Shortcuts.types.d.ts","sourceRoot":"","sources":["../../../src/components/Shortcuts/Shortcuts.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,KAAK,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAE1E,UAAU,gBAAgB;IACxB,2CAA2C;IAC3C,EAAE,EAAE,MAAM,CAAC;IACX,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,8CAA8C;IAC9C,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,gBAAiB,SAAQ,gBAAgB;IACxD,6DAA6D;IAC7D,IAAI,EAAE,UAAU,CAAC;IACjB,8DAA8D;IAC9D,IAAI,EAAE,MAAM,CAAC;IACb,mDAAmD;IACnD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uGAAuG;IACvG,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,eAAgB,SAAQ,gBAAgB;IACvD,mEAAmE;IACnE,IAAI,EAAE,MAAM,CAAC;IACb,8DAA8D;IAC9D,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,MAAM,YAAY,GAAG,gBAAgB,GAAG,eAAe,CAAC;AAE9D,MAAM,WAAW,gBAAgB;IAC/B,2CAA2C;IAC3C,EAAE,EAAE,MAAM,CAAC;IACX,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,KAAK,EAAE,YAAY,EAAE,CAAC;CACvB;AAED,UAAU,kBAAkB;IAC1B,yCAAyC;IACzC,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IACvB,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,UAAU,uBAAuB;IAC/B,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,+EAA+E;IAC/E,UAAU,EAAE,gBAAgB,EAAE,CAAC;IAC/B,UAAU,CAAC,EAAE,KAAK,CAAC;CACpB;AAED,UAAU,kBAAmB,SAAQ,cAAc,EAAE,UAAU;IAC7D,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC/B,qCAAqC;IACrC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAAG,CAAC,kBAAkB,GAAG,uBAAuB,CAAC,CAAC"}
+{"version":3,"file":"Shortcuts.types.d.ts","sourceRoot":"","sources":["../../../src/components/Shortcuts/Shortcuts.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAErF,UAAU,gBAAgB;IACxB,2CAA2C;IAC3C,EAAE,EAAE,MAAM,CAAC;IACX,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,8CAA8C;IAC9C,IAAI,EAAE,MAAM,CAAC;IACb,iEAAiE;IACjE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,gBAAiB,SAAQ,gBAAgB;IACxD,6DAA6D;IAC7D,IAAI,EAAE,UAAU,CAAC;IACjB,8DAA8D;IAC9D,IAAI,EAAE,MAAM,CAAC;IACb,mDAAmD;IACnD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uGAAuG;IACvG,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,eAAgB,SAAQ,gBAAgB;IACvD,mEAAmE;IACnE,IAAI,EAAE,MAAM,CAAC;IACb,8DAA8D;IAC9D,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,MAAM,YAAY,GAAG,gBAAgB,GAAG,eAAe,CAAC;AAE9D,MAAM,WAAW,gBAAgB;IAC/B,2CAA2C;IAC3C,EAAE,EAAE,MAAM,CAAC;IACX,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,KAAK,EAAE,YAAY,EAAE,CAAC;CACvB;AAED,UAAU,kBAAkB;IAC1B,yCAAyC;IACzC,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IACvB,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,UAAU,uBAAuB;IAC/B,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,+EAA+E;IAC/E,UAAU,EAAE,gBAAgB,EAAE,CAAC;IAC/B,UAAU,CAAC,EAAE,KAAK,CAAC;CACpB;AAED,UAAU,kBAAmB,SAAQ,cAAc,EAAE,UAAU,EAAE,SAAS;IACxE,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC/B,qCAAqC;IACrC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAAG,CAAC,kBAAkB,GAAG,uBAAuB,CAAC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Shortcuts.types.js","sourceRoot":"","sources":["../../../src/components/Shortcuts/Shortcuts.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { Ref } from 'react';\n\nimport type { NoChildrenProp, TestIdProp } from '@pega/cosmos-react-core';\n\ninterface ShortcutItemBase {\n  /** Unique identifier for this shortcut. */\n  id: string;\n  /** Display label shown on the shortcut. */\n  label: string;\n  /** Icon name from the registered icon set. */\n  icon: string;\n}\n\nexport interface ShortcutLinkItem extends ShortcutItemBase {\n  /** Discriminant — this item navigates to an external URL. */\n  type: 'external';\n  /** Absolute URL the link navigates to. Opens in a new tab. */\n  href: string;\n  /** Optional subtitle displayed below the label. */\n  description?: string;\n  /** Optional image URL. Renders in place of the icon; falls back to icon if the image fails to load. */\n  image?: string;\n}\n\nexport interface ShortcutNavItem extends ShortcutItemBase {\n  /** Discriminant — this item navigates to a portal landing page. */\n  type: 'page';\n  /** Callback invoked when the user activates this shortcut. */\n  onClick: () => void;\n}\n\nexport type ShortcutItem = ShortcutLinkItem | ShortcutNavItem;\n\nexport interface ShortcutCategory {\n  /** Unique identifier for this category. */\n  id: string;\n  /** Display label shown as the category heading. */\n  label: string;\n  /** Shortcut items belonging to this category. */\n  items: ShortcutItem[];\n}\n\ninterface ShortcutsWithItems {\n  /** Shortcut items to render as cards. */\n  items?: ShortcutItem[];\n  categories?: never;\n  /**\n   * Whether to render the outer card shell with a heading.\n   * When `false`, only the card grid is rendered, centered within its container.\n   * @default true\n   */\n  showHeader?: boolean;\n}\n\ninterface ShortcutsWithCategories {\n  items?: never;\n  /** Grouped shortcut items, each rendered as cards under a category heading. */\n  categories: ShortcutCategory[];\n  showHeader?: never;\n}\n\ninterface ShortcutsBaseProps extends NoChildrenProp, TestIdProp {\n  /** Heading displayed above the shortcuts. */\n  heading?: string;\n  /**\n   * Controls the layout variant of each shortcut card.\n   * - `stacked`: large icon above the label (default card style).\n   * - `inline`: small icon inline to the left of the label (list/link style).\n   * @default 'inline'\n   */\n  variant?: 'stacked' | 'inline';\n  /** Ref for the root card element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport type ShortcutsProps = ShortcutsBaseProps & (ShortcutsWithItems | ShortcutsWithCategories);\n"]}
+{"version":3,"file":"Shortcuts.types.js","sourceRoot":"","sources":["../../../src/components/Shortcuts/Shortcuts.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { Ref } from 'react';\n\nimport type { BaseProps, NoChildrenProp, TestIdProp } from '@pega/cosmos-react-core';\n\ninterface ShortcutItemBase {\n  /** Unique identifier for this shortcut. */\n  id: string;\n  /** Display label shown on the shortcut. */\n  label: string;\n  /** Icon name from the registered icon set. */\n  icon: string;\n  /** Optional class name applied to the rendered shortcut card. */\n  className?: string;\n}\n\nexport interface ShortcutLinkItem extends ShortcutItemBase {\n  /** Discriminant — this item navigates to an external URL. */\n  type: 'external';\n  /** Absolute URL the link navigates to. Opens in a new tab. */\n  href: string;\n  /** Optional subtitle displayed below the label. */\n  description?: string;\n  /** Optional image URL. Renders in place of the icon; falls back to icon if the image fails to load. */\n  image?: string;\n}\n\nexport interface ShortcutNavItem extends ShortcutItemBase {\n  /** Discriminant — this item navigates to a portal landing page. */\n  type: 'page';\n  /** Callback invoked when the user activates this shortcut. */\n  onClick: () => void;\n}\n\nexport type ShortcutItem = ShortcutLinkItem | ShortcutNavItem;\n\nexport interface ShortcutCategory {\n  /** Unique identifier for this category. */\n  id: string;\n  /** Display label shown as the category heading. */\n  label: string;\n  /** Shortcut items belonging to this category. */\n  items: ShortcutItem[];\n}\n\ninterface ShortcutsWithItems {\n  /** Shortcut items to render as cards. */\n  items?: ShortcutItem[];\n  categories?: never;\n  /**\n   * Whether to render the outer card shell with a heading.\n   * When `false`, only the card grid is rendered, centered within its container.\n   * @default true\n   */\n  showHeader?: boolean;\n}\n\ninterface ShortcutsWithCategories {\n  items?: never;\n  /** Grouped shortcut items, each rendered as cards under a category heading. */\n  categories: ShortcutCategory[];\n  showHeader?: never;\n}\n\ninterface ShortcutsBaseProps extends NoChildrenProp, TestIdProp, BaseProps {\n  /** Heading displayed above the shortcuts. */\n  heading?: string;\n  /**\n   * Controls the layout variant of each shortcut card.\n   * - `stacked`: large icon above the label (default card style).\n   * - `inline`: small icon inline to the left of the label (list/link style).\n   * @default 'inline'\n   */\n  variant?: 'stacked' | 'inline';\n  /** Ref for the root card element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport type ShortcutsProps = ShortcutsBaseProps & (ShortcutsWithItems | ShortcutsWithCategories);\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Stages.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/Stages.styles.ts"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAyInD;;;GAGG;AACH,eAAO,MAAM,mBAAmB,6NAmF9B,CAAC;AAIH;;;;GAIG;AACH,eAAO,MAAM,YAAY;aAAwB,YAAY;YAkD3D,CAAC;AAIH;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,cAAc,6NA6B1B,CAAC;AAIF;;;GAGG;AACH,eAAO,MAAM,gBAAgB;eAA4B,OAAO;YAe9D,CAAC;AAsDH;;;GAGG;AACH,eAAO,MAAM,WAAW;YACd,WAAW,GAAG,SAAS,GAAG,SAAS;eAChC,OAAO;aACT,YAAY;YA6EtB,CAAC;AAIF;;GAEG;AACH,eAAO,MAAM,uBAAuB,kaAiBlC,CAAC;AAIH;;GAEG;AACH,eAAO,MAAM,eAAe;;;gBAA8B,OAAO;kLAIhE,CAAC;AAsWF;;;GAGG;AACH,eAAO,MAAM,oBAAoB;eACpB,OAAO;aACT,YAAY;YAoDtB,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;AAaH,eAAO,MAAM,oBAAoB,+NAS/B,CAAC;AAIH;;;;;GAKG;AACH,eAAO,MAAM,6BAA6B;YAChC,WAAW,GAAG,SAAS,GAAG,SAAS;mBAC5B,OAAO;eACX,OAAO;YA8ElB,CAAC;AAIH,eAAO,MAAM,qBAAqB;YACxB,WAAW,GAAG,SAAS,GAAG,SAAS;eAChC,OAAO;YAoHlB,CAAC;AAIH;;;GAGG;AACH,eAAO,MAAM,uBAAuB,yOAEnC,CAAC"}
+{"version":3,"file":"Stages.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/Stages.styles.ts"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAiJnD;;;GAGG;AACH,eAAO,MAAM,mBAAmB,6NAmF9B,CAAC;AAIH;;;;GAIG;AACH,eAAO,MAAM,YAAY;aAAwB,YAAY;YAoD3D,CAAC;AAIH;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,cAAc,6NA6B1B,CAAC;AAIF;;;GAGG;AACH,eAAO,MAAM,gBAAgB;eAA4B,OAAO;YAe9D,CAAC;AAsDH;;;GAGG;AACH,eAAO,MAAM,WAAW;YACd,WAAW,GAAG,SAAS,GAAG,SAAS;eAChC,OAAO;aACT,YAAY;YA6EtB,CAAC;AAIF;;GAEG;AACH,eAAO,MAAM,uBAAuB,kaAiBlC,CAAC;AAIH;;GAEG;AACH,eAAO,MAAM,eAAe;;;gBAA8B,OAAO;kLAIhE,CAAC;AAwZF;;;GAGG;AACH,eAAO,MAAM,oBAAoB;eACpB,OAAO;aACT,YAAY;YAyDtB,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;AAaH,eAAO,MAAM,oBAAoB,+NAS/B,CAAC;AAIH;;;;;GAKG;AACH,eAAO,MAAM,6BAA6B;YAChC,WAAW,GAAG,SAAS,GAAG,SAAS;mBAC5B,OAAO;eACX,OAAO;YA8ElB,CAAC;AAIH,eAAO,MAAM,qBAAqB;YACxB,WAAW,GAAG,SAAS,GAAG,SAAS;eAChC,OAAO;YAoHlB,CAAC;AAIH;;;GAGG;AACH,eAAO,MAAM,uBAAuB,yOAEnC,CAAC"}

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

@@ -64,8 +64,15 @@ const chevronConfig = {
     // Equal to `width` so the point extends exactly one chevron-width beyond the stage boundary.
     offsetRight: 'calc(1.445 * var(--chevron-spacing))',
     // Coarse-pointer equivalents of offsetLeft/offsetRight, scaled to match coarseWidth/coarseSquareSize.
-    coarseOffsetLeft: 'calc(1.2875 * var(--chevron-spacing))',
-    coarseOffsetRight: 'calc(1.797 * var(--chevron-spacing))'
+    // coarseOffsetLeft must satisfy: coarseSquareSize = 2 × coarseWidth + coarseOffsetLeft
+    // (5 = 2 × 1.797 + 1.406) so that ::before and ::after co-locate on coarse devices.
+    coarseOffsetLeft: 'calc(1.406 * var(--chevron-spacing))',
+    coarseOffsetRight: 'calc(1.797 * var(--chevron-spacing))',
+    // Pre-computed flat positions for ::before notch and ::after point.
+    notchInsetStart: 'calc(-2.305 * var(--chevron-spacing))',
+    // 3.203 = exact alignment (coarseSquareSize - coarseWidth); slightly overdone default clears sub-pixel rounding on 3× displays.
+    coarseNotchInsetStart: 'calc(-1 * var(--stages-coarse-notch-correction) * var(--chevron-spacing))',
+    pointInsetEnd: '0'
 };
 // === Chevron Helpers ===
 // After team discussion we decided to use logical properties throughout — `inset-block-start`
@@ -95,11 +102,11 @@ const createChevronBaseStyles = (config, borderThicknessVar) => css `
   }
 
   &:not(:nth-of-type(-n + 2))::before {
-    inset-inline-start: calc(-1 * ${config.width} - ${config.offsetLeft});
+    inset-inline-start: ${config.notchInsetStart};
   }
 
   &:not(:nth-last-of-type(-n + 2))::after {
-    inset-inline-end: calc(-1 * ${config.width} + ${config.offsetRight});
+    inset-inline-end: ${config.pointInsetEnd};
   }
 `;
 const createChevronInteractiveStates = (config, borderThicknessVar, includeHover = true) => css `
@@ -255,6 +262,8 @@ export const StyledStages = styled.ol(({ theme, variant }) => {
     }
 
     @media (pointer: coarse) {
+      /* 3.203 = exact alignment; slightly overdone default to clear sub-pixel rounding on 3× displays */
+      --stages-coarse-notch-correction: 3.35;
       scrollbar-width: none;
 
       &::-webkit-scrollbar {
@@ -518,7 +527,7 @@ const stageContainerChevronStyles = (theme, readOnly) => {
     }
 
     /* First stage: no left notch, extended width to cover the full left edge */
-    &:nth-of-type(2) > ${StyledStage} {
+    &:nth-of-type(2):not(:nth-last-of-type(2)) > ${StyledStage} {
       --stage-chevron-width: ${chevronConfig.width};
       width: calc(100% + (2 * var(--stage-chevron-width)));
       padding-inline-start: calc(var(--chevron-spacing));
@@ -556,7 +565,7 @@ const stageContainerChevronStyles = (theme, readOnly) => {
     }
 
     /* Last stage: no right point */
-    &:nth-last-of-type(2) > ${StyledStage} {
+    &:nth-last-of-type(2):not(:nth-of-type(2)) > ${StyledStage} {
       --stage-chevron-width: ${chevronConfig.width};
       padding-inline-end: 0;
       width: 100%;
@@ -593,14 +602,42 @@ const stageContainerChevronStyles = (theme, readOnly) => {
     }
 
     /* RTL: flip clip-paths for first and last stages */
-    [dir='rtl'] &:nth-of-type(2) > ${StyledStage} {
+    [dir='rtl'] &:nth-of-type(2):not(:nth-last-of-type(2)) > ${StyledStage} {
       ${stageClipPath(true, false, true)}
     }
 
-    [dir='rtl'] &:nth-last-of-type(2) > ${StyledStage} {
+    [dir='rtl'] &:nth-last-of-type(2):not(:nth-of-type(2)) > ${StyledStage} {
       ${stageClipPath(false, true, true)}
     }
 
+    /* Single stage: plain rectangle — no clip-path notch, inset shadows on both sides */
+    &:nth-of-type(2):nth-last-of-type(2) > ${StyledStage} {
+      --stage-chevron-width: ${chevronConfig.width};
+      clip-path: none;
+      padding-inline-start: calc(var(--chevron-spacing));
+
+      ${includeHover &&
+        css `
+        &:hover {
+          box-shadow:
+            inset calc(2 * var(--chevron-border-thickness)) 0 0 ${theme.base.palette['border-line']},
+            inset calc(-2 * var(--chevron-border-thickness)) 0 0
+              ${theme.base.palette['border-line']};
+        }
+      `}
+
+      &:focus-visible,
+      &:active {
+        box-shadow:
+          inset calc(2 * var(--chevron-border-thickness)) 0 0 ${theme.base.palette.interactive},
+          inset calc(-2 * var(--chevron-border-thickness)) 0 0 ${theme.base.palette.interactive};
+      }
+
+      @media (pointer: coarse) {
+        --stage-chevron-width: ${chevronConfig.coarseWidth};
+      }
+    }
+
     @media (pointer: coarse) {
       margin-inline-start: calc(-1 * ${chevronConfig.coarseWidth});
 
@@ -609,18 +646,16 @@ const stageContainerChevronStyles = (theme, readOnly) => {
         inset-block-start: calc(50% - ${chevronConfig.coarseSquareSize} / 2);
         width: ${chevronConfig.coarseSquareSize};
         height: ${chevronConfig.coarseSquareSize};
+        border-inline-end-width: calc(2 * var(--chevron-border-thickness));
+        border-block-start-width: calc(2 * var(--chevron-border-thickness));
       }
 
       &:not(:nth-of-type(-n + 2))::before {
-        inset-inline-start: calc(
-          -1 * ${chevronConfig.coarseWidth} - ${chevronConfig.coarseOffsetLeft}
-        );
+        inset-inline-start: ${chevronConfig.coarseNotchInsetStart};
       }
 
       &:not(:nth-last-of-type(-n + 2))::after {
-        inset-inline-end: calc(
-          -1 * ${chevronConfig.coarseWidth} + ${chevronConfig.coarseOffsetRight}
-        );
+        inset-inline-end: 0;
       }
     }
   `;
@@ -702,7 +737,7 @@ const stageContainerSegmentedStyles = (theme, readOnly) => {
     }
 
     /* First stage (no inline-start cut): flat left edge + inset shadow edge indicator */
-    &:nth-of-type(2) > ${StyledStage} {
+    &:nth-of-type(2):not(:nth-last-of-type(2)) > ${StyledStage} {
       ${segmentedClipPath(false, true)}
 
       ${includeHover &&
@@ -730,7 +765,7 @@ const stageContainerSegmentedStyles = (theme, readOnly) => {
     }
 
     /* Last stage (no inline-end cut): flat right edge + inset shadow edge indicator */
-    &:nth-last-of-type(2) > ${StyledStage} {
+    &:nth-last-of-type(2):not(:nth-of-type(2)) > ${StyledStage} {
       ${segmentedClipPath(true, false)}
 
       ${includeHover &&
@@ -758,14 +793,38 @@ const stageContainerSegmentedStyles = (theme, readOnly) => {
     }
 
     /* RTL: flip clip-paths for first and last stage buttons */
-    [dir='rtl'] &:nth-of-type(2) > ${StyledStage} {
+    [dir='rtl'] &:nth-of-type(2):not(:nth-last-of-type(2)) > ${StyledStage} {
       ${segmentedClipPath(true, false, true)}
     }
 
-    [dir='rtl'] &:nth-last-of-type(2) > ${StyledStage} {
+    [dir='rtl'] &:nth-last-of-type(2):not(:nth-of-type(2)) > ${StyledStage} {
       ${segmentedClipPath(false, true, true)}
     }
 
+    /* Single stage: plain rectangle — no diagonal cuts, inset shadows on both sides */
+    &:nth-of-type(2):nth-last-of-type(2) > ${StyledStage} {
+      clip-path: none;
+      padding-inline-start: calc(var(--chevron-spacing));
+      padding-inline-end: calc(var(--chevron-spacing));
+
+      ${includeHover &&
+        css `
+        &:hover {
+          box-shadow:
+            inset var(--segmented-border-thickness) 0 0 ${theme.base.palette['border-line']},
+            inset calc(-1 * var(--segmented-border-thickness)) 0 0
+              ${theme.base.palette['border-line']};
+        }
+      `}
+
+      &:focus-visible,
+      &:active {
+        box-shadow:
+          inset var(--segmented-border-thickness) 0 0 ${theme.base.palette.interactive},
+          inset calc(-1 * var(--segmented-border-thickness)) 0 0 ${theme.base.palette.interactive};
+      }
+    }
+
     /* RTL: mirror the pseudo clip-paths.
      * In LTR the strip goes top-right → bottom-left (polygon A 0%, A+B 0%, B 100%, 0% 100%).
      * In RTL the pseudo is positioned at the opposite physical edge via logical inset properties,
@@ -824,16 +883,21 @@ export const StyledStageContainer = styled.li(({ theme, theme: { components: { c
       `}
 
       /* Corner radii are shared across all shape variants */
-      &:nth-of-type(2) > ${StyledStage} {
+      &:nth-of-type(2):not(:nth-last-of-type(2)) > ${StyledStage} {
         border-start-start-radius: ${borderRadius};
         border-end-start-radius: ${borderRadius};
       }
 
-      &:nth-last-of-type(2) > ${StyledStage} {
+      &:nth-last-of-type(2):not(:nth-of-type(2)) > ${StyledStage} {
         border-start-end-radius: ${borderRadius};
         border-end-end-radius: ${borderRadius};
       }
 
+      &:nth-of-type(2):nth-last-of-type(2) > ${StyledStage} {
+        border-radius: ${borderRadius};
+        width: 100%;
+      }
+
       ${stageContainerVariants[shape](theme, readOnly)}
     `;
 });

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, keyframes } from 'styled-components';\nimport type { DefaultTheme } from 'styled-components';\nimport { transparentize, darken } from 'polished';\n\nimport {\n  calculateFontSize,\n  DateTimeDisplay,\n  defaultThemeProp,\n  Icon,\n  Text,\n  StyledIcon,\n  calculateForegroundColor,\n  tryCatch\n} from '@pega/cosmos-react-core';\n\nimport type { StageVariant } from './Stages.types';\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\nconst segmentedConfig = {\n  width: 'calc(0.8 * var(--chevron-spacing))',\n  coarseWidth: 'calc(1.0 * var(--chevron-spacing))'\n} as const;\n\nconst segmentedClipPath = (leftCut: boolean, rightCut: boolean, mirrored = false): string => {\n  if (mirrored) {\n    const topRight = rightCut ? 'calc(100% - var(--segmented-width)) 0%' : '100% 0%';\n    const bottomLeft = leftCut ? 'var(--segmented-width) 100%' : '0% 100%';\n\n    return `clip-path: polygon(0% 0%, ${topRight}, 100% 100%, ${bottomLeft});`;\n  }\n\n  const topLeft = leftCut ? 'var(--segmented-width) 0%' : '0% 0%';\n  const bottomRight = rightCut ? 'calc(100% - var(--segmented-width)) 100%' : '100% 100%';\n\n  return `clip-path: polygon(${topLeft}, 100% 0%, ${bottomRight}, 0% 100%);`;\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 * `--chevron-border-thickness`, and `--segmented-border-thickness` custom properties\n * consumed by child elements.\n */\nexport const StyledStages = styled.ol<{ variant: StageVariant }>(({ theme, variant }) => {\n  const isMilestone = variant === 'milestone';\n\n  return css`\n    --chevron-spacing: ${theme.base.spacing};\n    --chevron-border-thickness: ${theme.components.button['border-width']};\n    --segmented-border-thickness: calc(2 * ${theme.components.button['border-width']});\n    --segmented-width: ${segmentedConfig.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    ${isMilestone &&\n    css`\n      --milestone-size: calc(4 * ${theme.base.spacing});\n      --milestone-pulse-min: calc(var(--milestone-size) * 0.1);\n      --milestone-pulse-start: ${transparentize(0.5, theme.base.palette.interactive)};\n      --milestone-pulse-spread: calc(var(--milestone-size) * 0.25);\n      --milestone-pulse-end: ${transparentize(0.75, theme.base.palette.interactive)};\n      padding-block: ${theme.base.spacing};\n      padding-inline: calc(var(--milestone-size) * 0.25);\n    `}\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\nconst stageButtonChevronStyles = (theme: DefaultTheme) => css`\n  padding-inline-start: calc(2 * var(--chevron-spacing));\n  padding-inline-end: var(--chevron-spacing);\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: ${theme.base.transparency['transparent-2']};\n  }\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  @media (pointer: coarse) {\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\nconst stageButtonSegmentedStyles = (theme: DefaultTheme) => css`\n  width: 100%;\n  padding-inline-start: calc(var(--segmented-width) + var(--chevron-spacing));\n  padding-inline-end: calc(var(--segmented-width) + var(--chevron-spacing));\n\n  ${StyledInnerStage} {\n    opacity: ${theme.base.transparency['transparent-2']};\n  }\n\n  ${segmentedClipPath(true, true)}\n\n  [dir='rtl'] & {\n    ${segmentedClipPath(true, true, true)}\n  }\n`;\n\nconst stageButtonVariants: Record<StageVariant, (theme: DefaultTheme) => ReturnType<typeof css>> = {\n  chevron: stageButtonChevronStyles,\n  segmented: stageButtonSegmentedStyles,\n  milestone: () => css``\n};\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  variant: StageVariant;\n}>(\n  ({\n    theme,\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    variant: shape\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      margin-inline-start: 0;\n      margin-inline-end: 0;\n\n      ${stageButtonVariants[shape](theme)}\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      }\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});\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\nconst stageContainerChevronStyles = (theme: DefaultTheme, readOnly: boolean | undefined) => {\n  const includeHover = !readOnly;\n  return css`\n    /* Chevron: negative-margin overlap so consecutive stages share a boundary */\n    margin-inline-start: calc(-1 * ${chevronConfig.width});\n\n    &:nth-of-type(2) {\n      margin-inline-start: 0;\n    }\n\n    /* Chevron boundary indicators via ::before (left notch) and ::after (right point) pseudo-elements */\n    &:not(:nth-of-type(-n + 2))::before {\n      ${createChevronPseudo(\n        'calc(2 * var(--chevron-border-thickness))',\n        theme.base.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        theme.base.palette['border-line'],\n        chevronConfig.squareSize\n      )}\n    }\n\n    [dir='rtl'] &::before,\n    [dir='rtl'] &::after {\n      transform: rotateZ(-45deg) skew(-15deg, -15deg);\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    ${createChevronBaseStyles(chevronConfig, 'var(--chevron-border-thickness)')}\n    ${createChevronInteractiveStates(\n      chevronConfig,\n      'var(--chevron-border-thickness)',\n      includeHover\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    ${includeHover &&\n    css`\n      &:has(button:hover)::before,\n      &:has(button:hover)::after {\n        border-color: ${theme.base.palette['border-line']};\n      }\n    `}\n\n    &:has(button:focus-visible)::before,\n    &:has(button:focus-visible)::after {\n      border-color: ${theme.base.palette.interactive};\n    }\n\n    &:has(button:active)::before,\n    &:has(button:active)::after {\n      border-color: ${theme.base.palette.interactive};\n    }\n\n    /* First stage: no left notch, extended width to cover the full left edge */\n    &:nth-of-type(2) > ${StyledStage} {\n      --stage-chevron-width: ${chevronConfig.width};\n      width: calc(100% + (2 * var(--stage-chevron-width)));\n      padding-inline-start: calc(var(--chevron-spacing));\n      ${stageClipPath(false, true)}\n\n      ${includeHover &&\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            ${theme.base.palette['border-line']};\n\n          [dir='rtl'] & {\n            box-shadow: inset calc(-2 * var(--chevron-border-thickness)) 0 0\n              ${theme.base.palette['border-line']};\n          }\n        }\n      `}\n\n      &:focus-visible,\n      &:active {\n        box-shadow: inset calc(2 * var(--chevron-border-thickness)) 0 0\n          ${theme.base.palette.interactive};\n\n        [dir='rtl'] & {\n          box-shadow: inset calc(-2 * var(--chevron-border-thickness)) 0 0\n            ${theme.base.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 stage: no right point */\n    &:nth-last-of-type(2) > ${StyledStage} {\n      --stage-chevron-width: ${chevronConfig.width};\n      padding-inline-end: 0;\n      width: 100%;\n      ${stageClipPath(true, false)}\n\n      ${includeHover &&\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            ${theme.base.palette['border-line']};\n\n          [dir='rtl'] & {\n            box-shadow: inset calc(2 * var(--chevron-border-thickness)) 0 0\n              ${theme.base.palette['border-line']};\n          }\n        }\n      `}\n\n      &:focus-visible,\n      &:active {\n        box-shadow: inset calc(-2 * var(--chevron-border-thickness)) 0 0\n          ${theme.base.palette.interactive};\n\n        [dir='rtl'] & {\n          box-shadow: inset calc(2 * var(--chevron-border-thickness)) 0 0\n            ${theme.base.palette.interactive};\n        }\n      }\n\n      @media (pointer: coarse) {\n        --stage-chevron-width: ${chevronConfig.coarseWidth};\n      }\n    }\n\n    /* RTL: flip clip-paths for first and last stages */\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    @media (pointer: coarse) {\n      margin-inline-start: calc(-1 * ${chevronConfig.coarseWidth});\n\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};\n\nconst stageContainerSegmentedStyles = (theme: DefaultTheme, readOnly: boolean | undefined) => {\n  const includeHover = !readOnly;\n\n  return css`\n    --segmented-edge-thickness: var(--chevron-border-thickness);\n\n    /* Segmented: stages overlap by --segmented-width so parallelogram edges meet flush */\n    margin-inline-start: calc(-1 * var(--segmented-width));\n\n    &:nth-of-type(2) {\n      margin-inline-start: 0;\n    }\n\n    /* Left segmented border strip: diagonal clip-path on each stage's inline-start edge (stages 2..N).\n     * The strip goes from (segmented-width, 0%) at top to (0%, 100%) at bottom of the pseudo,\n     * matching the parallelogram's inline-start clip edge exactly.\n     */\n    &:not(:nth-of-type(-n + 2))::before {\n      content: '';\n      position: absolute;\n      inset-block: 0;\n      inset-inline-start: 0;\n      width: calc(var(--segmented-width) + var(--segmented-edge-thickness));\n      clip-path: polygon(\n        var(--segmented-width) 0%,\n        calc(var(--segmented-width) + var(--segmented-edge-thickness)) 0%,\n        var(--segmented-edge-thickness) 100%,\n        0% 100%\n      );\n      background: ${theme.base.palette['border-line']};\n      pointer-events: none;\n      z-index: 1;\n    }\n\n    /* Right segmented border strip: diagonal clip-path on each stage's inline-end edge (stages 1..N-1). */\n    &:not(:nth-last-of-type(-n + 2))::after {\n      content: '';\n      position: absolute;\n      inset-block: 0;\n      inset-inline-end: 0;\n      width: calc(var(--segmented-width) + var(--segmented-edge-thickness));\n      clip-path: polygon(\n        var(--segmented-width) 0%,\n        calc(var(--segmented-width) + var(--segmented-edge-thickness)) 0%,\n        var(--segmented-edge-thickness) 100%,\n        0% 100%\n      );\n      background: ${theme.base.palette['border-line']};\n      pointer-events: none;\n      z-index: 2;\n    }\n\n    /* Interactive states: update pseudo background to signal hover/focus/active */\n    ${includeHover &&\n    css`\n      &:has(button:hover) {\n        --segmented-edge-thickness: var(--segmented-border-thickness);\n      }\n\n      &:has(button:hover)::before,\n      &:has(button:hover)::after {\n        background: ${theme.base.palette['border-line']};\n      }\n    `}\n\n    &:has(button:focus-visible),\n    &:has(button:active) {\n      --segmented-edge-thickness: var(--segmented-border-thickness);\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      background: ${theme.base.palette.interactive};\n    }\n\n    /* First stage (no inline-start cut): flat left edge + inset shadow edge indicator */\n    &:nth-of-type(2) > ${StyledStage} {\n      ${segmentedClipPath(false, true)}\n\n      ${includeHover &&\n      css`\n        &:hover {\n          box-shadow: inset var(--segmented-border-thickness) 0 0\n            ${theme.base.palette['border-line']};\n\n          [dir='rtl'] & {\n            box-shadow: inset calc(-1 * var(--segmented-border-thickness)) 0 0\n              ${theme.base.palette['border-line']};\n          }\n        }\n      `}\n\n      &:focus-visible,\n      &:active {\n        box-shadow: inset var(--segmented-border-thickness) 0 0 ${theme.base.palette.interactive};\n\n        [dir='rtl'] & {\n          box-shadow: inset calc(-1 * var(--segmented-border-thickness)) 0 0\n            ${theme.base.palette.interactive};\n        }\n      }\n    }\n\n    /* Last stage (no inline-end cut): flat right edge + inset shadow edge indicator */\n    &:nth-last-of-type(2) > ${StyledStage} {\n      ${segmentedClipPath(true, false)}\n\n      ${includeHover &&\n      css`\n        &:hover {\n          box-shadow: inset calc(-1 * var(--segmented-border-thickness)) 0 0\n            ${theme.base.palette['border-line']};\n\n          [dir='rtl'] & {\n            box-shadow: inset var(--segmented-border-thickness) 0 0\n              ${theme.base.palette['border-line']};\n          }\n        }\n      `}\n\n      &:focus-visible,\n      &:active {\n        box-shadow: inset calc(-1 * var(--segmented-border-thickness)) 0 0\n          ${theme.base.palette.interactive};\n\n        [dir='rtl'] & {\n          box-shadow: inset var(--segmented-border-thickness) 0 0 ${theme.base.palette.interactive};\n        }\n      }\n    }\n\n    /* RTL: flip clip-paths for first and last stage buttons */\n    [dir='rtl'] &:nth-of-type(2) > ${StyledStage} {\n      ${segmentedClipPath(true, false, true)}\n    }\n\n    [dir='rtl'] &:nth-last-of-type(2) > ${StyledStage} {\n      ${segmentedClipPath(false, true, true)}\n    }\n\n    /* RTL: mirror the pseudo clip-paths.\n     * In LTR the strip goes top-right → bottom-left (polygon A 0%, A+B 0%, B 100%, 0% 100%).\n     * In RTL the pseudo is positioned at the opposite physical edge via logical inset properties,\n     * so the strip must go top-left → bottom-right to stay aligned with the flipped slant.\n     */\n    [dir='rtl'] &:not(:nth-of-type(-n + 2))::before,\n    [dir='rtl'] &:not(:nth-last-of-type(-n + 2))::after {\n      clip-path: polygon(\n        0% 0%,\n        var(--segmented-edge-thickness) 0%,\n        calc(var(--segmented-width) + var(--segmented-edge-thickness)) 100%,\n        var(--segmented-width) 100%\n      );\n    }\n\n    @media (pointer: coarse) {\n      /* A single CSS custom property update propagates to all margin and clip-path consumers */\n      --segmented-width: ${segmentedConfig.coarseWidth};\n    }\n  `;\n};\n\nconst stageContainerVariants: Record<\n  StageVariant,\n  (theme: DefaultTheme, readOnly: boolean | undefined) => ReturnType<typeof css>\n> = {\n  chevron: stageContainerChevronStyles,\n  segmented: stageContainerSegmentedStyles,\n  milestone: () => css``\n};\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  variant: StageVariant;\n}>(\n  ({\n    theme,\n    theme: {\n      components: {\n        card: { 'border-radius': borderRadius }\n      }\n    },\n    readOnly,\n    variant: shape\n  }) => {\n    return css`\n      display: flex;\n      position: relative;\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      /* Corner radii are shared across all shape variants */\n      &:nth-of-type(2) > ${StyledStage} {\n        border-start-start-radius: ${borderRadius};\n        border-end-start-radius: ${borderRadius};\n      }\n\n      &:nth-last-of-type(2) > ${StyledStage} {\n        border-start-end-radius: ${borderRadius};\n        border-end-end-radius: ${borderRadius};\n      }\n\n      ${stageContainerVariants[shape](theme, readOnly)}\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\nconst milestonePulse = keyframes`\n  0%, 100% {\n    box-shadow: 0 0 0 var(--milestone-pulse-min) var(--milestone-pulse-start);\n  }\n  60% {\n    box-shadow: 0 0 0 var(--milestone-pulse-spread) var(--milestone-pulse-end);\n  }\n`;\n\nexport const StyledMilestoneLabel = styled.span(({ theme }) => {\n  return css`\n    color: ${theme.base.palette['foreground-color']};\n    line-height: ${theme.base['line-height']};\n    text-align: center;\n    align-self: stretch;\n    overflow-wrap: break-word;\n    padding-inline: calc(0.25 * ${theme.base.spacing});\n  `;\n});\n\nStyledMilestoneLabel.defaultProps = defaultThemeProp;\n\n/**\n * `<li>` container for a single stage item in the 'milestone' shape variant.\n * Renders column-flex layout (milestone above, label below) and draws the\n * horizontal connector as a single line from this milestone's centre to the next\n * milestone's centre (::after), sized so every connector has an identical length.\n */\nexport const StyledMilestoneStageContainer = styled.li<{\n  status: 'completed' | 'current' | 'pending';\n  nextCompleted: boolean;\n  readOnly?: boolean;\n}>(({ theme, nextCompleted, status }) => {\n  const {\n    base: {\n      palette: { interactive, 'border-line': borderLine },\n      spacing\n    }\n  } = theme;\n\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  const connectorFilled = nextCompleted;\n\n  return css`\n    --connector-height: ${connectorFilled ? '0.25rem' : '0.125rem'};\n    --connector-display: block;\n    --connector-start: 50%;\n    --connector-width: 100%;\n    --connector-bg: ${connectorFilled ? interactive : borderLine};\n    --connector-forced-bg: ${connectorFilled ? 'Highlight' : 'CanvasText'};\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    flex: 1 0 0;\n    font-size: ${fontSize.xs};\n    font-weight: ${status === 'current'\n      ? theme.base['font-weight']['semi-bold']\n      : theme.base['font-weight'].normal};\n    min-width: 15ch;\n    position: relative;\n    gap: ${spacing};\n    z-index: 1;\n\n    &:nth-of-type(2):not(:nth-last-of-type(2)) {\n      --connector-start: calc(var(--milestone-size) / 2);\n      --connector-width: calc(200% - var(--milestone-size));\n      align-items: flex-start;\n      flex: 0.5 0 calc(var(--milestone-size) / 2);\n      min-width: calc(7.5ch + var(--milestone-size) / 2);\n\n      ${StyledMilestoneLabel} {\n        text-align: start;\n      }\n    }\n\n    &:nth-last-of-type(2):not(:nth-of-type(2)) {\n      --connector-display: none;\n      align-items: flex-end;\n      flex: 0.5 0 calc(var(--milestone-size) / 2);\n      min-width: calc(7.5ch + var(--milestone-size) / 2);\n\n      ${StyledMilestoneLabel} {\n        text-align: end;\n      }\n    }\n\n    &:nth-of-type(2):nth-last-of-type(2) {\n      --connector-display: none;\n      align-items: center;\n      flex: 1 0 0;\n    }\n\n    &::after {\n      content: '';\n      display: var(--connector-display);\n      position: absolute;\n      inset-block-start: calc(var(--milestone-size) / 2 - var(--connector-height) / 2);\n      inset-inline-start: var(--connector-start);\n      width: var(--connector-width);\n      height: var(--connector-height);\n      background: var(--connector-bg);\n      pointer-events: none;\n\n      @media (forced-colors: active) {\n        background: var(--connector-forced-bg);\n      }\n    }\n  `;\n});\n\nStyledMilestoneStageContainer.defaultProps = defaultThemeProp;\n\nexport const StyledMilestoneButton = styled.button<{\n  status: 'completed' | 'current' | 'pending';\n  readOnly?: boolean;\n}>(({ theme, status, readOnly }) => {\n  const {\n    base: {\n      'hit-area': hitArea,\n      animation: {\n        speed: animationSpeed,\n        timing: { ease: animationTiming }\n      },\n      shadow: { focus: focusShadow }\n    },\n    components: {\n      button: { 'border-width': borderWidth },\n      'case-view': { stages }\n    }\n  } = theme;\n\n  const stageForeground = calculateForegroundColor(\n    stages.status[status].background,\n    stages.status[status]['foreground-color']\n  );\n\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  const completedBorderColor =\n    status === 'completed'\n      ? tryCatch(\n          () => darken(0.12, stages.status.completed.background),\n          () => 'transparent'\n        )\n      : '';\n\n  return css`\n    position: relative;\n    z-index: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    border-radius: 50%;\n    width: var(--milestone-size);\n    height: var(--milestone-size);\n    background: ${stages.status[status].background};\n    color: ${stageForeground};\n    font-size: ${fontSize.s};\n    font-weight: ${status === 'current'\n      ? theme.base['font-weight']['semi-bold']\n      : theme.base['font-weight'].normal};\n    outline: none;\n    border: none;\n    cursor: ${readOnly ? 'default' : 'pointer'};\n    transition: box-shadow calc(2 * ${animationSpeed}) ${animationTiming};\n\n    ${status === 'completed' &&\n    css`\n      box-shadow: inset 0 0 0 calc(2 * ${borderWidth}) ${completedBorderColor};\n    `}\n\n    &:focus-visible {\n      box-shadow: ${focusShadow};\n\n      @media (forced-colors: active) {\n        outline: 0.125rem solid Highlight;\n        outline-offset: 0.125rem;\n      }\n    }\n\n    ${!readOnly &&\n    css`\n      &:hover {\n        filter: brightness(0.85);\n      }\n\n      &:active {\n        filter: brightness(0.85);\n      }\n    `}\n\n    ${status === 'current' &&\n    !readOnly &&\n    css`\n      &::before {\n        content: '';\n        position: absolute;\n        inset: 0;\n        border-radius: 50%;\n        pointer-events: none;\n        animation: ${milestonePulse} 2s ease-out infinite;\n\n        @media (prefers-reduced-motion: reduce) {\n          animation: none;\n        }\n      }\n    `}\n\n    /* Expanded hit area */\n    &::after {\n      content: '';\n      position: absolute;\n      width: ${hitArea['mouse-min']};\n      height: ${hitArea['mouse-min']};\n      inset-block-start: calc((${hitArea['mouse-min']} - var(--milestone-size)) / -2);\n      inset-inline-start: calc((${hitArea['mouse-min']} - var(--milestone-size)) / -2);\n\n      @media (pointer: coarse) {\n        width: ${hitArea['finger-min']};\n        height: ${hitArea['finger-min']};\n        inset-block-start: calc((${hitArea['finger-min']} - var(--milestone-size)) / -2);\n        inset-inline-start: calc((${hitArea['finger-min']} - var(--milestone-size)) / -2);\n      }\n    }\n\n    @media (forced-colors: active) {\n      border: 0.125rem solid ButtonText;\n    }\n  `;\n});\n\nStyledMilestoneButton.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"]}
+{"version":3,"file":"Stages.styles.js","sourceRoot":"","sources":["../../../src/components/Stages/Stages.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css, keyframes } from 'styled-components';\nimport type { DefaultTheme } from 'styled-components';\nimport { transparentize, darken } from 'polished';\n\nimport {\n  calculateFontSize,\n  DateTimeDisplay,\n  defaultThemeProp,\n  Icon,\n  Text,\n  StyledIcon,\n  calculateForegroundColor,\n  tryCatch\n} from '@pega/cosmos-react-core';\n\nimport type { StageVariant } from './Stages.types';\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\nconst segmentedConfig = {\n  width: 'calc(0.8 * var(--chevron-spacing))',\n  coarseWidth: 'calc(1.0 * var(--chevron-spacing))'\n} as const;\n\nconst segmentedClipPath = (leftCut: boolean, rightCut: boolean, mirrored = false): string => {\n  if (mirrored) {\n    const topRight = rightCut ? 'calc(100% - var(--segmented-width)) 0%' : '100% 0%';\n    const bottomLeft = leftCut ? 'var(--segmented-width) 100%' : '0% 100%';\n\n    return `clip-path: polygon(0% 0%, ${topRight}, 100% 100%, ${bottomLeft});`;\n  }\n\n  const topLeft = leftCut ? 'var(--segmented-width) 0%' : '0% 0%';\n  const bottomRight = rightCut ? 'calc(100% - var(--segmented-width)) 100%' : '100% 100%';\n\n  return `clip-path: polygon(${topLeft}, 100% 0%, ${bottomRight}, 0% 100%);`;\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 must satisfy: coarseSquareSize = 2 × coarseWidth + coarseOffsetLeft\n  // (5 = 2 × 1.797 + 1.406) so that ::before and ::after co-locate on coarse devices.\n  coarseOffsetLeft: 'calc(1.406 * var(--chevron-spacing))',\n  coarseOffsetRight: 'calc(1.797 * var(--chevron-spacing))',\n  // Pre-computed flat positions for ::before notch and ::after point.\n  notchInsetStart: 'calc(-2.305 * var(--chevron-spacing))',\n  // 3.203 = exact alignment (coarseSquareSize - coarseWidth); slightly overdone default clears sub-pixel rounding on 3× displays.\n  coarseNotchInsetStart:\n    'calc(-1 * var(--stages-coarse-notch-correction) * var(--chevron-spacing))',\n  pointInsetEnd: '0'\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: ${config.notchInsetStart};\n  }\n\n  &:not(:nth-last-of-type(-n + 2))::after {\n    inset-inline-end: ${config.pointInsetEnd};\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 * `--chevron-border-thickness`, and `--segmented-border-thickness` custom properties\n * consumed by child elements.\n */\nexport const StyledStages = styled.ol<{ variant: StageVariant }>(({ theme, variant }) => {\n  const isMilestone = variant === 'milestone';\n\n  return css`\n    --chevron-spacing: ${theme.base.spacing};\n    --chevron-border-thickness: ${theme.components.button['border-width']};\n    --segmented-border-thickness: calc(2 * ${theme.components.button['border-width']});\n    --segmented-width: ${segmentedConfig.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    ${isMilestone &&\n    css`\n      --milestone-size: calc(4 * ${theme.base.spacing});\n      --milestone-pulse-min: calc(var(--milestone-size) * 0.1);\n      --milestone-pulse-start: ${transparentize(0.5, theme.base.palette.interactive)};\n      --milestone-pulse-spread: calc(var(--milestone-size) * 0.25);\n      --milestone-pulse-end: ${transparentize(0.75, theme.base.palette.interactive)};\n      padding-block: ${theme.base.spacing};\n      padding-inline: calc(var(--milestone-size) * 0.25);\n    `}\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      /* 3.203 = exact alignment; slightly overdone default to clear sub-pixel rounding on 3× displays */\n      --stages-coarse-notch-correction: 3.35;\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\nconst stageButtonChevronStyles = (theme: DefaultTheme) => css`\n  padding-inline-start: calc(2 * var(--chevron-spacing));\n  padding-inline-end: var(--chevron-spacing);\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: ${theme.base.transparency['transparent-2']};\n  }\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  @media (pointer: coarse) {\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\nconst stageButtonSegmentedStyles = (theme: DefaultTheme) => css`\n  width: 100%;\n  padding-inline-start: calc(var(--segmented-width) + var(--chevron-spacing));\n  padding-inline-end: calc(var(--segmented-width) + var(--chevron-spacing));\n\n  ${StyledInnerStage} {\n    opacity: ${theme.base.transparency['transparent-2']};\n  }\n\n  ${segmentedClipPath(true, true)}\n\n  [dir='rtl'] & {\n    ${segmentedClipPath(true, true, true)}\n  }\n`;\n\nconst stageButtonVariants: Record<StageVariant, (theme: DefaultTheme) => ReturnType<typeof css>> = {\n  chevron: stageButtonChevronStyles,\n  segmented: stageButtonSegmentedStyles,\n  milestone: () => css``\n};\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  variant: StageVariant;\n}>(\n  ({\n    theme,\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    variant: shape\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      margin-inline-start: 0;\n      margin-inline-end: 0;\n\n      ${stageButtonVariants[shape](theme)}\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      }\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});\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\nconst stageContainerChevronStyles = (theme: DefaultTheme, readOnly: boolean | undefined) => {\n  const includeHover = !readOnly;\n  return css`\n    /* Chevron: negative-margin overlap so consecutive stages share a boundary */\n    margin-inline-start: calc(-1 * ${chevronConfig.width});\n\n    &:nth-of-type(2) {\n      margin-inline-start: 0;\n    }\n\n    /* Chevron boundary indicators via ::before (left notch) and ::after (right point) pseudo-elements */\n    &:not(:nth-of-type(-n + 2))::before {\n      ${createChevronPseudo(\n        'calc(2 * var(--chevron-border-thickness))',\n        theme.base.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        theme.base.palette['border-line'],\n        chevronConfig.squareSize\n      )}\n    }\n\n    [dir='rtl'] &::before,\n    [dir='rtl'] &::after {\n      transform: rotateZ(-45deg) skew(-15deg, -15deg);\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    ${createChevronBaseStyles(chevronConfig, 'var(--chevron-border-thickness)')}\n    ${createChevronInteractiveStates(\n      chevronConfig,\n      'var(--chevron-border-thickness)',\n      includeHover\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    ${includeHover &&\n    css`\n      &:has(button:hover)::before,\n      &:has(button:hover)::after {\n        border-color: ${theme.base.palette['border-line']};\n      }\n    `}\n\n    &:has(button:focus-visible)::before,\n    &:has(button:focus-visible)::after {\n      border-color: ${theme.base.palette.interactive};\n    }\n\n    &:has(button:active)::before,\n    &:has(button:active)::after {\n      border-color: ${theme.base.palette.interactive};\n    }\n\n    /* First stage: no left notch, extended width to cover the full left edge */\n    &:nth-of-type(2):not(:nth-last-of-type(2)) > ${StyledStage} {\n      --stage-chevron-width: ${chevronConfig.width};\n      width: calc(100% + (2 * var(--stage-chevron-width)));\n      padding-inline-start: calc(var(--chevron-spacing));\n      ${stageClipPath(false, true)}\n\n      ${includeHover &&\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            ${theme.base.palette['border-line']};\n\n          [dir='rtl'] & {\n            box-shadow: inset calc(-2 * var(--chevron-border-thickness)) 0 0\n              ${theme.base.palette['border-line']};\n          }\n        }\n      `}\n\n      &:focus-visible,\n      &:active {\n        box-shadow: inset calc(2 * var(--chevron-border-thickness)) 0 0\n          ${theme.base.palette.interactive};\n\n        [dir='rtl'] & {\n          box-shadow: inset calc(-2 * var(--chevron-border-thickness)) 0 0\n            ${theme.base.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 stage: no right point */\n    &:nth-last-of-type(2):not(:nth-of-type(2)) > ${StyledStage} {\n      --stage-chevron-width: ${chevronConfig.width};\n      padding-inline-end: 0;\n      width: 100%;\n      ${stageClipPath(true, false)}\n\n      ${includeHover &&\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            ${theme.base.palette['border-line']};\n\n          [dir='rtl'] & {\n            box-shadow: inset calc(2 * var(--chevron-border-thickness)) 0 0\n              ${theme.base.palette['border-line']};\n          }\n        }\n      `}\n\n      &:focus-visible,\n      &:active {\n        box-shadow: inset calc(-2 * var(--chevron-border-thickness)) 0 0\n          ${theme.base.palette.interactive};\n\n        [dir='rtl'] & {\n          box-shadow: inset calc(2 * var(--chevron-border-thickness)) 0 0\n            ${theme.base.palette.interactive};\n        }\n      }\n\n      @media (pointer: coarse) {\n        --stage-chevron-width: ${chevronConfig.coarseWidth};\n      }\n    }\n\n    /* RTL: flip clip-paths for first and last stages */\n    [dir='rtl'] &:nth-of-type(2):not(:nth-last-of-type(2)) > ${StyledStage} {\n      ${stageClipPath(true, false, true)}\n    }\n\n    [dir='rtl'] &:nth-last-of-type(2):not(:nth-of-type(2)) > ${StyledStage} {\n      ${stageClipPath(false, true, true)}\n    }\n\n    /* Single stage: plain rectangle — no clip-path notch, inset shadows on both sides */\n    &:nth-of-type(2):nth-last-of-type(2) > ${StyledStage} {\n      --stage-chevron-width: ${chevronConfig.width};\n      clip-path: none;\n      padding-inline-start: calc(var(--chevron-spacing));\n\n      ${includeHover &&\n      css`\n        &:hover {\n          box-shadow:\n            inset calc(2 * var(--chevron-border-thickness)) 0 0 ${theme.base.palette['border-line']},\n            inset calc(-2 * var(--chevron-border-thickness)) 0 0\n              ${theme.base.palette['border-line']};\n        }\n      `}\n\n      &:focus-visible,\n      &:active {\n        box-shadow:\n          inset calc(2 * var(--chevron-border-thickness)) 0 0 ${theme.base.palette.interactive},\n          inset calc(-2 * var(--chevron-border-thickness)) 0 0 ${theme.base.palette.interactive};\n      }\n\n      @media (pointer: coarse) {\n        --stage-chevron-width: ${chevronConfig.coarseWidth};\n      }\n    }\n\n    @media (pointer: coarse) {\n      margin-inline-start: calc(-1 * ${chevronConfig.coarseWidth});\n\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        border-inline-end-width: calc(2 * var(--chevron-border-thickness));\n        border-block-start-width: calc(2 * var(--chevron-border-thickness));\n      }\n\n      &:not(:nth-of-type(-n + 2))::before {\n        inset-inline-start: ${chevronConfig.coarseNotchInsetStart};\n      }\n\n      &:not(:nth-last-of-type(-n + 2))::after {\n        inset-inline-end: 0;\n      }\n    }\n  `;\n};\n\nconst stageContainerSegmentedStyles = (theme: DefaultTheme, readOnly: boolean | undefined) => {\n  const includeHover = !readOnly;\n\n  return css`\n    --segmented-edge-thickness: var(--chevron-border-thickness);\n\n    /* Segmented: stages overlap by --segmented-width so parallelogram edges meet flush */\n    margin-inline-start: calc(-1 * var(--segmented-width));\n\n    &:nth-of-type(2) {\n      margin-inline-start: 0;\n    }\n\n    /* Left segmented border strip: diagonal clip-path on each stage's inline-start edge (stages 2..N).\n     * The strip goes from (segmented-width, 0%) at top to (0%, 100%) at bottom of the pseudo,\n     * matching the parallelogram's inline-start clip edge exactly.\n     */\n    &:not(:nth-of-type(-n + 2))::before {\n      content: '';\n      position: absolute;\n      inset-block: 0;\n      inset-inline-start: 0;\n      width: calc(var(--segmented-width) + var(--segmented-edge-thickness));\n      clip-path: polygon(\n        var(--segmented-width) 0%,\n        calc(var(--segmented-width) + var(--segmented-edge-thickness)) 0%,\n        var(--segmented-edge-thickness) 100%,\n        0% 100%\n      );\n      background: ${theme.base.palette['border-line']};\n      pointer-events: none;\n      z-index: 1;\n    }\n\n    /* Right segmented border strip: diagonal clip-path on each stage's inline-end edge (stages 1..N-1). */\n    &:not(:nth-last-of-type(-n + 2))::after {\n      content: '';\n      position: absolute;\n      inset-block: 0;\n      inset-inline-end: 0;\n      width: calc(var(--segmented-width) + var(--segmented-edge-thickness));\n      clip-path: polygon(\n        var(--segmented-width) 0%,\n        calc(var(--segmented-width) + var(--segmented-edge-thickness)) 0%,\n        var(--segmented-edge-thickness) 100%,\n        0% 100%\n      );\n      background: ${theme.base.palette['border-line']};\n      pointer-events: none;\n      z-index: 2;\n    }\n\n    /* Interactive states: update pseudo background to signal hover/focus/active */\n    ${includeHover &&\n    css`\n      &:has(button:hover) {\n        --segmented-edge-thickness: var(--segmented-border-thickness);\n      }\n\n      &:has(button:hover)::before,\n      &:has(button:hover)::after {\n        background: ${theme.base.palette['border-line']};\n      }\n    `}\n\n    &:has(button:focus-visible),\n    &:has(button:active) {\n      --segmented-edge-thickness: var(--segmented-border-thickness);\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      background: ${theme.base.palette.interactive};\n    }\n\n    /* First stage (no inline-start cut): flat left edge + inset shadow edge indicator */\n    &:nth-of-type(2):not(:nth-last-of-type(2)) > ${StyledStage} {\n      ${segmentedClipPath(false, true)}\n\n      ${includeHover &&\n      css`\n        &:hover {\n          box-shadow: inset var(--segmented-border-thickness) 0 0\n            ${theme.base.palette['border-line']};\n\n          [dir='rtl'] & {\n            box-shadow: inset calc(-1 * var(--segmented-border-thickness)) 0 0\n              ${theme.base.palette['border-line']};\n          }\n        }\n      `}\n\n      &:focus-visible,\n      &:active {\n        box-shadow: inset var(--segmented-border-thickness) 0 0 ${theme.base.palette.interactive};\n\n        [dir='rtl'] & {\n          box-shadow: inset calc(-1 * var(--segmented-border-thickness)) 0 0\n            ${theme.base.palette.interactive};\n        }\n      }\n    }\n\n    /* Last stage (no inline-end cut): flat right edge + inset shadow edge indicator */\n    &:nth-last-of-type(2):not(:nth-of-type(2)) > ${StyledStage} {\n      ${segmentedClipPath(true, false)}\n\n      ${includeHover &&\n      css`\n        &:hover {\n          box-shadow: inset calc(-1 * var(--segmented-border-thickness)) 0 0\n            ${theme.base.palette['border-line']};\n\n          [dir='rtl'] & {\n            box-shadow: inset var(--segmented-border-thickness) 0 0\n              ${theme.base.palette['border-line']};\n          }\n        }\n      `}\n\n      &:focus-visible,\n      &:active {\n        box-shadow: inset calc(-1 * var(--segmented-border-thickness)) 0 0\n          ${theme.base.palette.interactive};\n\n        [dir='rtl'] & {\n          box-shadow: inset var(--segmented-border-thickness) 0 0 ${theme.base.palette.interactive};\n        }\n      }\n    }\n\n    /* RTL: flip clip-paths for first and last stage buttons */\n    [dir='rtl'] &:nth-of-type(2):not(:nth-last-of-type(2)) > ${StyledStage} {\n      ${segmentedClipPath(true, false, true)}\n    }\n\n    [dir='rtl'] &:nth-last-of-type(2):not(:nth-of-type(2)) > ${StyledStage} {\n      ${segmentedClipPath(false, true, true)}\n    }\n\n    /* Single stage: plain rectangle — no diagonal cuts, inset shadows on both sides */\n    &:nth-of-type(2):nth-last-of-type(2) > ${StyledStage} {\n      clip-path: none;\n      padding-inline-start: calc(var(--chevron-spacing));\n      padding-inline-end: calc(var(--chevron-spacing));\n\n      ${includeHover &&\n      css`\n        &:hover {\n          box-shadow:\n            inset var(--segmented-border-thickness) 0 0 ${theme.base.palette['border-line']},\n            inset calc(-1 * var(--segmented-border-thickness)) 0 0\n              ${theme.base.palette['border-line']};\n        }\n      `}\n\n      &:focus-visible,\n      &:active {\n        box-shadow:\n          inset var(--segmented-border-thickness) 0 0 ${theme.base.palette.interactive},\n          inset calc(-1 * var(--segmented-border-thickness)) 0 0 ${theme.base.palette.interactive};\n      }\n    }\n\n    /* RTL: mirror the pseudo clip-paths.\n     * In LTR the strip goes top-right → bottom-left (polygon A 0%, A+B 0%, B 100%, 0% 100%).\n     * In RTL the pseudo is positioned at the opposite physical edge via logical inset properties,\n     * so the strip must go top-left → bottom-right to stay aligned with the flipped slant.\n     */\n    [dir='rtl'] &:not(:nth-of-type(-n + 2))::before,\n    [dir='rtl'] &:not(:nth-last-of-type(-n + 2))::after {\n      clip-path: polygon(\n        0% 0%,\n        var(--segmented-edge-thickness) 0%,\n        calc(var(--segmented-width) + var(--segmented-edge-thickness)) 100%,\n        var(--segmented-width) 100%\n      );\n    }\n\n    @media (pointer: coarse) {\n      /* A single CSS custom property update propagates to all margin and clip-path consumers */\n      --segmented-width: ${segmentedConfig.coarseWidth};\n    }\n  `;\n};\n\nconst stageContainerVariants: Record<\n  StageVariant,\n  (theme: DefaultTheme, readOnly: boolean | undefined) => ReturnType<typeof css>\n> = {\n  chevron: stageContainerChevronStyles,\n  segmented: stageContainerSegmentedStyles,\n  milestone: () => css``\n};\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  variant: StageVariant;\n}>(\n  ({\n    theme,\n    theme: {\n      components: {\n        card: { 'border-radius': borderRadius }\n      }\n    },\n    readOnly,\n    variant: shape\n  }) => {\n    return css`\n      display: flex;\n      position: relative;\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      /* Corner radii are shared across all shape variants */\n      &:nth-of-type(2):not(:nth-last-of-type(2)) > ${StyledStage} {\n        border-start-start-radius: ${borderRadius};\n        border-end-start-radius: ${borderRadius};\n      }\n\n      &:nth-last-of-type(2):not(:nth-of-type(2)) > ${StyledStage} {\n        border-start-end-radius: ${borderRadius};\n        border-end-end-radius: ${borderRadius};\n      }\n\n      &:nth-of-type(2):nth-last-of-type(2) > ${StyledStage} {\n        border-radius: ${borderRadius};\n        width: 100%;\n      }\n\n      ${stageContainerVariants[shape](theme, readOnly)}\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\nconst milestonePulse = keyframes`\n  0%, 100% {\n    box-shadow: 0 0 0 var(--milestone-pulse-min) var(--milestone-pulse-start);\n  }\n  60% {\n    box-shadow: 0 0 0 var(--milestone-pulse-spread) var(--milestone-pulse-end);\n  }\n`;\n\nexport const StyledMilestoneLabel = styled.span(({ theme }) => {\n  return css`\n    color: ${theme.base.palette['foreground-color']};\n    line-height: ${theme.base['line-height']};\n    text-align: center;\n    align-self: stretch;\n    overflow-wrap: break-word;\n    padding-inline: calc(0.25 * ${theme.base.spacing});\n  `;\n});\n\nStyledMilestoneLabel.defaultProps = defaultThemeProp;\n\n/**\n * `<li>` container for a single stage item in the 'milestone' shape variant.\n * Renders column-flex layout (milestone above, label below) and draws the\n * horizontal connector as a single line from this milestone's centre to the next\n * milestone's centre (::after), sized so every connector has an identical length.\n */\nexport const StyledMilestoneStageContainer = styled.li<{\n  status: 'completed' | 'current' | 'pending';\n  nextCompleted: boolean;\n  readOnly?: boolean;\n}>(({ theme, nextCompleted, status }) => {\n  const {\n    base: {\n      palette: { interactive, 'border-line': borderLine },\n      spacing\n    }\n  } = theme;\n\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  const connectorFilled = nextCompleted;\n\n  return css`\n    --connector-height: ${connectorFilled ? '0.25rem' : '0.125rem'};\n    --connector-display: block;\n    --connector-start: 50%;\n    --connector-width: 100%;\n    --connector-bg: ${connectorFilled ? interactive : borderLine};\n    --connector-forced-bg: ${connectorFilled ? 'Highlight' : 'CanvasText'};\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    flex: 1 0 0;\n    font-size: ${fontSize.xs};\n    font-weight: ${status === 'current'\n      ? theme.base['font-weight']['semi-bold']\n      : theme.base['font-weight'].normal};\n    min-width: 15ch;\n    position: relative;\n    gap: ${spacing};\n    z-index: 1;\n\n    &:nth-of-type(2):not(:nth-last-of-type(2)) {\n      --connector-start: calc(var(--milestone-size) / 2);\n      --connector-width: calc(200% - var(--milestone-size));\n      align-items: flex-start;\n      flex: 0.5 0 calc(var(--milestone-size) / 2);\n      min-width: calc(7.5ch + var(--milestone-size) / 2);\n\n      ${StyledMilestoneLabel} {\n        text-align: start;\n      }\n    }\n\n    &:nth-last-of-type(2):not(:nth-of-type(2)) {\n      --connector-display: none;\n      align-items: flex-end;\n      flex: 0.5 0 calc(var(--milestone-size) / 2);\n      min-width: calc(7.5ch + var(--milestone-size) / 2);\n\n      ${StyledMilestoneLabel} {\n        text-align: end;\n      }\n    }\n\n    &:nth-of-type(2):nth-last-of-type(2) {\n      --connector-display: none;\n      align-items: center;\n      flex: 1 0 0;\n    }\n\n    &::after {\n      content: '';\n      display: var(--connector-display);\n      position: absolute;\n      inset-block-start: calc(var(--milestone-size) / 2 - var(--connector-height) / 2);\n      inset-inline-start: var(--connector-start);\n      width: var(--connector-width);\n      height: var(--connector-height);\n      background: var(--connector-bg);\n      pointer-events: none;\n\n      @media (forced-colors: active) {\n        background: var(--connector-forced-bg);\n      }\n    }\n  `;\n});\n\nStyledMilestoneStageContainer.defaultProps = defaultThemeProp;\n\nexport const StyledMilestoneButton = styled.button<{\n  status: 'completed' | 'current' | 'pending';\n  readOnly?: boolean;\n}>(({ theme, status, readOnly }) => {\n  const {\n    base: {\n      'hit-area': hitArea,\n      animation: {\n        speed: animationSpeed,\n        timing: { ease: animationTiming }\n      },\n      shadow: { focus: focusShadow }\n    },\n    components: {\n      button: { 'border-width': borderWidth },\n      'case-view': { stages }\n    }\n  } = theme;\n\n  const stageForeground = calculateForegroundColor(\n    stages.status[status].background,\n    stages.status[status]['foreground-color']\n  );\n\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  const completedBorderColor =\n    status === 'completed'\n      ? tryCatch(\n          () => darken(0.12, stages.status.completed.background),\n          () => 'transparent'\n        )\n      : '';\n\n  return css`\n    position: relative;\n    z-index: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    border-radius: 50%;\n    width: var(--milestone-size);\n    height: var(--milestone-size);\n    background: ${stages.status[status].background};\n    color: ${stageForeground};\n    font-size: ${fontSize.s};\n    font-weight: ${status === 'current'\n      ? theme.base['font-weight']['semi-bold']\n      : theme.base['font-weight'].normal};\n    outline: none;\n    border: none;\n    cursor: ${readOnly ? 'default' : 'pointer'};\n    transition: box-shadow calc(2 * ${animationSpeed}) ${animationTiming};\n\n    ${status === 'completed' &&\n    css`\n      box-shadow: inset 0 0 0 calc(2 * ${borderWidth}) ${completedBorderColor};\n    `}\n\n    &:focus-visible {\n      box-shadow: ${focusShadow};\n\n      @media (forced-colors: active) {\n        outline: 0.125rem solid Highlight;\n        outline-offset: 0.125rem;\n      }\n    }\n\n    ${!readOnly &&\n    css`\n      &:hover {\n        filter: brightness(0.85);\n      }\n\n      &:active {\n        filter: brightness(0.85);\n      }\n    `}\n\n    ${status === 'current' &&\n    !readOnly &&\n    css`\n      &::before {\n        content: '';\n        position: absolute;\n        inset: 0;\n        border-radius: 50%;\n        pointer-events: none;\n        animation: ${milestonePulse} 2s ease-out infinite;\n\n        @media (prefers-reduced-motion: reduce) {\n          animation: none;\n        }\n      }\n    `}\n\n    /* Expanded hit area */\n    &::after {\n      content: '';\n      position: absolute;\n      width: ${hitArea['mouse-min']};\n      height: ${hitArea['mouse-min']};\n      inset-block-start: calc((${hitArea['mouse-min']} - var(--milestone-size)) / -2);\n      inset-inline-start: calc((${hitArea['mouse-min']} - var(--milestone-size)) / -2);\n\n      @media (pointer: coarse) {\n        width: ${hitArea['finger-min']};\n        height: ${hitArea['finger-min']};\n        inset-block-start: calc((${hitArea['finger-min']} - var(--milestone-size)) / -2);\n        inset-inline-start: calc((${hitArea['finger-min']} - var(--milestone-size)) / -2);\n      }\n    }\n\n    @media (forced-colors: active) {\n      border: 0.125rem solid ButtonText;\n    }\n  `;\n});\n\nStyledMilestoneButton.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/lib/components/Tasks/TaskCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TaskCard.d.ts","sourceRoot":"","sources":["../../../src/components/Tasks/TaskCard.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C,UAAU,aAAa;IACrB,KAAK,EAAE,cAAc,CAAC;IACtB,eAAe,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;CAClD;AA4BD,QAAA,MAAM,QAAQ,GAAI,4BAA4B,aAAa,4CAmD1D,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"TaskCard.d.ts","sourceRoot":"","sources":["../../../src/components/Tasks/TaskCard.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C,UAAU,aAAa;IACrB,KAAK,EAAE,cAAc,CAAC;IACtB,eAAe,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;CAClD;AA4BD,QAAA,MAAM,QAAQ,GAAI,4BAA4B,aAAa,4CAuD1D,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/components/Tasks/TaskCard.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled, { css } from 'styled-components';
-import { Card, CardHeader, CardContent, CardFooter, Button, Count, Flex, Text, VisuallyHiddenText, Progress, EmptyState, useI18n, defaultThemeProp, StyledEmptyState } from '@pega/cosmos-react-core';
+import { Card, CardHeader, CardContent, CardFooter, Button, Count, Flex, Text, VisuallyHiddenText, Progress, EmptyState, useI18n, createClassName, defaultThemeProp, StyledEmptyState } from '@pega/cosmos-react-core';
 import { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';
 import { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';
 import TaskList from './TaskList';
@@ -26,11 +26,14 @@ const StyledHeadingFlex = styled(Flex) `
 StyledHeadingFlex.defaultProps = defaultThemeProp;
 const TaskCard = ({ group, onShowMoreClick }) => {
     const { name, visual, items, count = items.length, loadingMore = false } = group;
+    const cardClassName = createClassName('task-card', group.className, {
+        approvals: !!group.isApprovals
+    });
     const t = useI18n();
     const cardItemLimit = 3;
     const displayItems = items.slice(0, cardItemLimit);
     const hasShowMore = items.length > cardItemLimit || (count !== undefined && count > items.length);
-    return (_jsxs(StyledTaskCard, { children: [_jsxs(CardHeader, { container: { justify: 'start', alignItems: 'center', gap: 1.5 }, children: [visual && _jsx(Flex, { item: { shrink: 0 }, children: visual }), _jsx(StyledHeadingFlex, { item: { grow: 0 }, children: _jsx(Text, { variant: 'h3', children: name }) }), count > cardItemLimit ? (_jsx(Count, { children: count })) : (_jsx(VisuallyHiddenText, { children: t('task_count', [count], { count }) }))] }), _jsx(CardContent, { children: displayItems.length > 0 ? (_jsx(TaskList, { items: displayItems, openButtonIconOnly: true })) : (_jsx(EmptyState, {})) }), _jsx(Progress, { placement: 'block', visible: loadingMore }), hasShowMore && (_jsx(CardFooter, { justify: 'center', children: _jsx(Button, { variant: 'link', onClick: () => {
+    return (_jsxs(StyledTaskCard, { className: cardClassName, children: [_jsxs(CardHeader, { container: { justify: 'start', alignItems: 'center', gap: 1.5 }, children: [visual && _jsx(Flex, { item: { shrink: 0 }, children: visual }), _jsx(StyledHeadingFlex, { item: { grow: 0 }, children: _jsx(Text, { variant: 'h3', children: name }) }), count > cardItemLimit ? (_jsx(Count, { children: count })) : (_jsx(VisuallyHiddenText, { children: t('task_count', [count], { count }) }))] }), _jsx(CardContent, { children: displayItems.length > 0 ? (_jsx(TaskList, { items: displayItems, openButtonIconOnly: true })) : (_jsx(EmptyState, {})) }), _jsx(Progress, { placement: 'block', visible: loadingMore }), hasShowMore && (_jsx(CardFooter, { justify: 'center', children: _jsx(Button, { variant: 'link', onClick: () => {
                         group.onShowMore?.();
                         onShowMoreClick(group);
                     }, children: t('show_more') }) }))] }));

package/lib/components/Tasks/TaskCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"TaskCard.js","sourceRoot":"","sources":["../../../src/components/Tasks/TaskCard.tsx"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n  Card,\n  CardHeader,\n  CardContent,\n  CardFooter,\n  Button,\n  Count,\n  Flex,\n  Text,\n  VisuallyHiddenText,\n  Progress,\n  EmptyState,\n  useI18n,\n  defaultThemeProp,\n  StyledEmptyState\n} from '@pega/cosmos-react-core';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\n\nimport TaskList from './TaskList';\nimport type { TaskGroupProps } from './Tasks';\n\ninterface TaskCardProps {\n  group: TaskGroupProps;\n  onShowMoreClick: (group: TaskGroupProps) => void;\n}\n\nconst StyledTaskCard = styled(Card)(\n  ({ theme }) => css`\n    block-size: 100%;\n\n    ${StyledCardHeader} {\n      border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};\n    }\n\n    ${StyledCardContent} {\n      flex-grow: 1;\n    }\n\n    ${StyledEmptyState} {\n      margin-block: calc(${theme.base.spacing} * 2);\n    }\n  `\n);\n\nStyledTaskCard.defaultProps = defaultThemeProp;\n\nconst StyledHeadingFlex = styled(Flex)`\n  min-width: 0;\n`;\n\nStyledHeadingFlex.defaultProps = defaultThemeProp;\n\nconst TaskCard = ({ group, onShowMoreClick }: TaskCardProps) => {\n  const { name, visual, items, count = items.length, loadingMore = false } = group;\n\n  const t = useI18n();\n\n  const cardItemLimit = 3;\n\n  const displayItems = items.slice(0, cardItemLimit);\n  const hasShowMore = items.length > cardItemLimit || (count !== undefined && count > items.length);\n\n  return (\n    <StyledTaskCard>\n      <CardHeader container={{ justify: 'start', alignItems: 'center', gap: 1.5 }}>\n        {visual && <Flex item={{ shrink: 0 }}>{visual}</Flex>}\n\n        <StyledHeadingFlex item={{ grow: 0 }}>\n          <Text variant='h3'>{name}</Text>\n        </StyledHeadingFlex>\n\n        {count > cardItemLimit ? (\n          <Count>{count}</Count>\n        ) : (\n          <VisuallyHiddenText>{t('task_count', [count], { count })}</VisuallyHiddenText>\n        )}\n      </CardHeader>\n\n      <CardContent>\n        {displayItems.length > 0 ? (\n          <TaskList items={displayItems} openButtonIconOnly />\n        ) : (\n          <EmptyState />\n        )}\n      </CardContent>\n\n      <Progress placement='block' visible={loadingMore} />\n\n      {hasShowMore && (\n        <CardFooter justify='center'>\n          <Button\n            variant='link'\n            onClick={() => {\n              group.onShowMore?.();\n              onShowMoreClick(group);\n            }}\n          >\n            {t('show_more')}\n          </Button>\n        </CardFooter>\n      )}\n    </StyledTaskCard>\n  );\n};\n\nexport default TaskCard;\n"]}
+{"version":3,"file":"TaskCard.js","sourceRoot":"","sources":["../../../src/components/Tasks/TaskCard.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,IAAI,EACJ,UAAU,EACV,WAAW,EACX,UAAU,EACV,MAAM,EACN,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,kBAAkB,EAClB,QAAQ,EACR,UAAU,EACV,OAAO,EACP,eAAe,EACf,gBAAgB,EAChB,gBAAgB,EACjB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,wDAAwD,CAAC;AAC1F,OAAO,EAAE,iBAAiB,EAAE,MAAM,yDAAyD,CAAC;AAE5F,OAAO,QAAQ,MAAM,YAAY,CAAC;AAQlC,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAC,CACjC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;MAGd,gBAAgB;0CACoB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;;MAGrE,iBAAiB;;;;MAIjB,gBAAgB;2BACK,KAAK,CAAC,IAAI,CAAC,OAAO;;GAE1C,CACF,CAAC;AAEF,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,iBAAiB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;CAErC,CAAC;AAEF,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,eAAe,EAAiB,EAAE,EAAE;IAC7D,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,GAAG,KAAK,CAAC,MAAM,EAAE,WAAW,GAAG,KAAK,EAAE,GAAG,KAAK,CAAC;IAEjF,MAAM,aAAa,GAAG,eAAe,CAAC,WAAW,EAAE,KAAK,CAAC,SAAS,EAAE;QAClE,SAAS,EAAE,CAAC,CAAC,KAAK,CAAC,WAAW;KAC/B,CAAC,CAAC;IAEH,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,aAAa,GAAG,CAAC,CAAC;IAExB,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,aAAa,CAAC,CAAC;IACnD,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,GAAG,aAAa,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAElG,OAAO,CACL,MAAC,cAAc,IAAC,SAAS,EAAE,aAAa,aACtC,MAAC,UAAU,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,aACxE,MAAM,IAAI,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,YAAG,MAAM,GAAQ,EAErD,KAAC,iBAAiB,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YAClC,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,IAAI,GAAQ,GACd,EAEnB,KAAK,GAAG,aAAa,CAAC,CAAC,CAAC,CACvB,KAAC,KAAK,cAAE,KAAK,GAAS,CACvB,CAAC,CAAC,CAAC,CACF,KAAC,kBAAkB,cAAE,CAAC,CAAC,YAAY,EAAE,CAAC,KAAK,CAAC,EAAE,EAAE,KAAK,EAAE,CAAC,GAAsB,CAC/E,IACU,EAEb,KAAC,WAAW,cACT,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CACzB,KAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,EAAE,kBAAkB,SAAG,CACrD,CAAC,CAAC,CAAC,CACF,KAAC,UAAU,KAAG,CACf,GACW,EAEd,KAAC,QAAQ,IAAC,SAAS,EAAC,OAAO,EAAC,OAAO,EAAE,WAAW,GAAI,EAEnD,WAAW,IAAI,CACd,KAAC,UAAU,IAAC,OAAO,EAAC,QAAQ,YAC1B,KAAC,MAAM,IACL,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,GAAG,EAAE;wBACZ,KAAK,CAAC,UAAU,EAAE,EAAE,CAAC;wBACrB,eAAe,CAAC,KAAK,CAAC,CAAC;oBACzB,CAAC,YAEA,CAAC,CAAC,WAAW,CAAC,GACR,GACE,CACd,IACc,CAClB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n  Card,\n  CardHeader,\n  CardContent,\n  CardFooter,\n  Button,\n  Count,\n  Flex,\n  Text,\n  VisuallyHiddenText,\n  Progress,\n  EmptyState,\n  useI18n,\n  createClassName,\n  defaultThemeProp,\n  StyledEmptyState\n} from '@pega/cosmos-react-core';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\n\nimport TaskList from './TaskList';\nimport type { TaskGroupProps } from './Tasks';\n\ninterface TaskCardProps {\n  group: TaskGroupProps;\n  onShowMoreClick: (group: TaskGroupProps) => void;\n}\n\nconst StyledTaskCard = styled(Card)(\n  ({ theme }) => css`\n    block-size: 100%;\n\n    ${StyledCardHeader} {\n      border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};\n    }\n\n    ${StyledCardContent} {\n      flex-grow: 1;\n    }\n\n    ${StyledEmptyState} {\n      margin-block: calc(${theme.base.spacing} * 2);\n    }\n  `\n);\n\nStyledTaskCard.defaultProps = defaultThemeProp;\n\nconst StyledHeadingFlex = styled(Flex)`\n  min-width: 0;\n`;\n\nStyledHeadingFlex.defaultProps = defaultThemeProp;\n\nconst TaskCard = ({ group, onShowMoreClick }: TaskCardProps) => {\n  const { name, visual, items, count = items.length, loadingMore = false } = group;\n\n  const cardClassName = createClassName('task-card', group.className, {\n    approvals: !!group.isApprovals\n  });\n\n  const t = useI18n();\n\n  const cardItemLimit = 3;\n\n  const displayItems = items.slice(0, cardItemLimit);\n  const hasShowMore = items.length > cardItemLimit || (count !== undefined && count > items.length);\n\n  return (\n    <StyledTaskCard className={cardClassName}>\n      <CardHeader container={{ justify: 'start', alignItems: 'center', gap: 1.5 }}>\n        {visual && <Flex item={{ shrink: 0 }}>{visual}</Flex>}\n\n        <StyledHeadingFlex item={{ grow: 0 }}>\n          <Text variant='h3'>{name}</Text>\n        </StyledHeadingFlex>\n\n        {count > cardItemLimit ? (\n          <Count>{count}</Count>\n        ) : (\n          <VisuallyHiddenText>{t('task_count', [count], { count })}</VisuallyHiddenText>\n        )}\n      </CardHeader>\n\n      <CardContent>\n        {displayItems.length > 0 ? (\n          <TaskList items={displayItems} openButtonIconOnly />\n        ) : (\n          <EmptyState />\n        )}\n      </CardContent>\n\n      <Progress placement='block' visible={loadingMore} />\n\n      {hasShowMore && (\n        <CardFooter justify='center'>\n          <Button\n            variant='link'\n            onClick={() => {\n              group.onShowMore?.();\n              onShowMoreClick(group);\n            }}\n          >\n            {t('show_more')}\n          </Button>\n        </CardFooter>\n      )}\n    </StyledTaskCard>\n  );\n};\n\nexport default TaskCard;\n"]}