@pega/cosmos-react-work 9.10.1 → 9.11.0

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

@@ -1 +1 @@
-{"version":3,"file":"Stages.js","sourceRoot":"","sources":["../../../src/components/Stages/Stages.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, useRef, useEffect, forwardRef, Fragment } from 'react';\nimport type { MouseEvent, PropsWithoutRef } from 'react';\nimport { remToPx } from 'polished';\n\nimport {\n  Icon,\n  registerIcon,\n  Flex,\n  useI18n,\n  Button,\n  Modal,\n  useBreakpoint,\n  debounce,\n  useModalManager,\n  useConsolidatedRef,\n  useUID,\n  InfoDialog,\n  useArrows,\n  useDirection,\n  useAfterInitialEffect,\n  VisuallyHiddenText,\n  tryCatch\n} from '@pega/cosmos-react-core';\nimport type { ForwardRefForwardPropsComponent, ModalMethods } from '@pega/cosmos-react-core';\nimport * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/check.icon';\n\nimport type { StagesProps, StageStatus } from './Stages.types';\nimport StageGlimpse from './StageGlimpse';\nimport {\n  StyledInnerStage,\n  StyledStageCompleteIcon,\n  StyledStage,\n  StyledStageContainer,\n  StyledStageGlimpse,\n  StyledStages,\n  StyledStagesDescription,\n  StyledStageText\n} from './Stages.styles';\n\nregisterIcon(checkIcon);\n\nconst Stages: ForwardRefForwardPropsComponent<StagesProps> = forwardRef(function Stages(\n  {\n    current,\n    stages,\n    caseTitle,\n    onLoadStage,\n    readOnly = false,\n    ...restProps\n  }: PropsWithoutRef<StagesProps>,\n  ref: StagesProps['ref']\n) {\n  const t = useI18n();\n\n  const stagesRef = useConsolidatedRef(ref);\n  const stagesRefs = useRef<Map<string, HTMLButtonElement>>(new Map());\n\n  const [target, setTarget] = useState<HTMLButtonElement | null>(null);\n  const [targetStageId, setTargetStageId] = useState<string | null>(null);\n\n  const { create: createModal } = useModalManager();\n  const modalMethods = useRef<ModalMethods>();\n  const [showModal, setShowModal] = useState(false);\n\n  const isSmallOrAbove = useBreakpoint('sm');\n  const [compressedView, setCompressedView] = useState(false);\n  const [minExpandedWidth, setMinExpandedWidth] = useState(0);\n\n  const { rtl } = useDirection();\n\n  useArrows(stagesRef, {\n    cycle: false,\n    selector: ':scope > li > button:not([aria-expanded])',\n    dir: 'left-right',\n    initialFocusElement: stagesRefs.current.get(current) ?? null\n  });\n\n  const dialogId = useUID();\n  const descriptionId = useUID();\n\n  useEffect(() => {\n    if (stagesRef.current) {\n      if (compressedView) {\n        const resizeObserver = new ResizeObserver(\n          debounce((entries: ResizeObserverEntry[]) => {\n            if (entries[0].contentRect.width > minExpandedWidth) {\n              setCompressedView(false);\n            }\n          }, 100)\n        );\n        resizeObserver.observe(stagesRef.current);\n        return () => resizeObserver.disconnect();\n      }\n\n      const intersectionObserver = new IntersectionObserver(\n        entries => {\n          if (!entries[0].isIntersecting) {\n            setCompressedView(true);\n            if (entries[0].rootBounds) setMinExpandedWidth(entries[0].rootBounds.width);\n          }\n        },\n        {\n          root: stagesRef.current,\n          rootMargin: tryCatch(\n            () => remToPx(0.0625),\n            () => '1px'\n          ),\n          threshold: 1\n        }\n      );\n\n      if (stagesRef.current.lastElementChild) {\n        intersectionObserver.observe(stagesRef.current.lastElementChild);\n        return () => intersectionObserver.disconnect();\n      }\n    }\n  }, [minExpandedWidth, compressedView, stages.length]);\n\n  const stagesToLoad = onLoadStage\n    ? stages.filter(stage => !Array.isArray(stage.steps)).map(stage => stage.id)\n    : [];\n\n  const renderModalStages = () =>\n    stages.map(stage => (\n      <Fragment key={stage.id}>\n        <Flex container={{ alignItems: 'start', gap: 0.5 }}>\n          {stage.completed && <StyledStageCompleteIcon name='check' />}\n          <StyledStageText variant='h3' isCurrent={stage.id === current}>\n            {stage.name}\n            {stage.completed && <VisuallyHiddenText>{`- ${t('completed')}`}</VisuallyHiddenText>}\n          </StyledStageText>\n        </Flex>\n        <StageGlimpse stage={stage} />\n      </Fragment>\n    ));\n\n  const openModal = () => {\n    setShowModal(true);\n    if (stagesToLoad.length > 0) onLoadStage?.(stagesToLoad);\n    modalMethods.current = createModal(Modal, {\n      heading: caseTitle\n        ? t('stages_case_lifecycle', [caseTitle])\n        : t('stages_default_case_lifecycle'),\n      progress: stagesToLoad.length > 0,\n      children: renderModalStages(),\n      onBeforeClose: () => {\n        setShowModal(false);\n        target?.focus();\n        setTarget(null);\n        setTargetStageId(null);\n        modalMethods.current = undefined;\n      }\n    });\n  };\n\n  useAfterInitialEffect(() => {\n    modalMethods.current?.update({\n      progress: stagesToLoad.length > 0,\n      children: renderModalStages()\n    });\n  }, [stagesToLoad.length]);\n\n  return (\n    <>\n      <Flex\n        {...restProps}\n        container\n        as={StyledStages}\n        ref={stagesRef}\n        dir={rtl ? 'rtl' : 'ltr'}\n        aria-label={t('stages_label')}\n        aria-describedby={descriptionId}\n      >\n        {stages.map((stage, index) => {\n          const isCurrent = stage.id === current;\n          let stageStatusText = t(stage.completed ? 'completed' : 'not_started');\n          if (isCurrent) stageStatusText = t('current');\n\n          const hasToLoad = stagesToLoad.includes(stage.id);\n\n          let stageStatus: StageStatus;\n\n          if (stage.completed) {\n            stageStatus = 'completed';\n          } else if (isCurrent) {\n            stageStatus = 'current';\n          } else {\n            stageStatus = 'pending';\n          }\n\n          return (\n            <Fragment key={stage.id}>\n              <Flex as={StyledStageContainer} item={{ grow: 1, shrink: 0 }} readOnly={readOnly}>\n                <Flex\n                  container={{ justify: 'center', alignItems: 'center' }}\n                  as={StyledStage}\n                  item={{\n                    grow: compressedView && !isCurrent ? 0 : 1,\n                    shrink: compressedView && isCurrent ? 1 : 0\n                  }}\n                  status={stageStatus}\n                  readOnly={readOnly}\n                  aria-current={isCurrent ? 'step' : undefined}\n                  aria-label={t('stages_stage_label', [stage.name, stageStatusText])}\n                  onClick={(e: MouseEvent<HTMLButtonElement>) => {\n                    if (isSmallOrAbove) {\n                      if (hasToLoad) onLoadStage?.([stage.id]);\n                      setTarget(e.currentTarget);\n                      setTargetStageId(stage.id);\n                    } else {\n                      openModal();\n                    }\n                  }}\n                  ref={(el: HTMLButtonElement | null) => {\n                    if (el) {\n                      stagesRefs.current.set(stage.id, el);\n                    } else {\n                      stagesRefs.current.delete(stage.id);\n                    }\n                  }}\n                  aria-expanded={target && isSmallOrAbove}\n                  aria-controls={target ? dialogId : undefined}\n                  {...(!readOnly && {\n                    'aria-haspopup': true,\n                    onClick: (e: MouseEvent<HTMLButtonElement>) => {\n                      if (isSmallOrAbove) {\n                        if (hasToLoad) onLoadStage?.([stage.id]);\n                        setTarget(e.currentTarget);\n                        setTargetStageId(stage.id);\n                      } else {\n                        openModal();\n                      }\n                    }\n                  })}\n                >\n                  {stage.completed && <Icon name='check' />}\n                  {(!compressedView || isCurrent || !stage.completed) && (\n                    <StyledInnerStage ellipsis={isCurrent && compressedView}>\n                      {!isCurrent && compressedView ? index + 1 : stage.name}\n                    </StyledInnerStage>\n                  )}\n                </Flex>\n              </Flex>\n              {target && targetStageId === stage.id && isSmallOrAbove && !showModal && (\n                <InfoDialog\n                  heading={stage.name}\n                  target={target}\n                  progress={hasToLoad ? t('loading') : undefined}\n                  onDismiss={() => {\n                    setTarget(null);\n                    setTargetStageId(null);\n                  }}\n                  placement='bottom-start'\n                >\n                  {!hasToLoad && (\n                    <StyledStageGlimpse>\n                      <StageGlimpse stage={stage} />\n                      <Button variant='secondary' onClick={openModal}>\n                        {t('stages_see_full_lifecycle')}\n                      </Button>\n                    </StyledStageGlimpse>\n                  )}\n                </InfoDialog>\n              )}\n            </Fragment>\n          );\n        })}\n      </Flex>\n      <StyledStagesDescription id={descriptionId}>\n        {t('stages_description')}\n      </StyledStagesDescription>\n    </>\n  );\n});\n\nexport default Stages;\n"]}
+{"version":3,"file":"Stages.js","sourceRoot":"","sources":["../../../src/components/Stages/Stages.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, useRef, useEffect, forwardRef, Fragment } from 'react';\nimport type { MouseEvent, PropsWithoutRef } from 'react';\n\nimport {\n  Icon,\n  registerIcon,\n  Flex,\n  useI18n,\n  Button,\n  Modal,\n  useBreakpoint,\n  useModalManager,\n  useConsolidatedRef,\n  useUID,\n  InfoDialog,\n  useArrows,\n  useDirection,\n  useAfterInitialEffect,\n  VisuallyHiddenText,\n  withTestIds,\n  useTestIds,\n  useElement,\n  useFocusWithin,\n  isInstance,\n  getActiveElement\n} from '@pega/cosmos-react-core';\nimport type { ForwardRefForwardPropsComponent, ModalMethods } from '@pega/cosmos-react-core';\nimport * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/check.icon';\n\nimport type { StagesProps, StageStatus } from './Stages.types';\nimport { getStagesTestIds } from './Stages.test-ids';\nimport StageGlimpse from './StageGlimpse';\nimport {\n  StyledInnerStage,\n  StyledStageCompleteIcon,\n  StyledStage,\n  StyledStageContainer,\n  StyledStageGlimpse,\n  StyledStages,\n  StyledStagesWrapper,\n  StyledStagesDescription,\n  StyledStageText,\n  StyledSentinel\n} from './Stages.styles';\n\nregisterIcon(checkIcon);\n\nconst Stages: ForwardRefForwardPropsComponent<StagesProps> = forwardRef(function Stages(\n  {\n    current,\n    stages,\n    caseTitle,\n    onLoadStage,\n    readOnly = false,\n    testId,\n    ...restProps\n  }: PropsWithoutRef<StagesProps>,\n  ref: StagesProps['ref']\n) {\n  const t = useI18n();\n  const testIds = useTestIds(testId, getStagesTestIds);\n  const stagesRef = useConsolidatedRef(ref);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const startSentinelRef = useRef<HTMLLIElement>(null);\n  const endSentinelRef = useRef<HTMLLIElement>(null);\n  const stagesRefs = useRef<Map<string, HTMLButtonElement>>(new Map());\n\n  const [target, setTarget] = useElement<HTMLButtonElement>(null);\n  const [targetStageId, setTargetStageId] = useState<string | null>(null);\n  const [currentStageBtn, setCurrentStageBtn] = useState<HTMLButtonElement | null>(null);\n\n  const { create: createModal } = useModalManager();\n  const modalMethods = useRef<ModalMethods>();\n  const [showModal, setShowModal] = useState(false);\n\n  const isSmallOrAbove = useBreakpoint('sm');\n\n  const { rtl } = useDirection();\n\n  useArrows(\n    stagesRef,\n    {\n      cycle: false,\n      selector: ':scope > li > button:not([aria-expanded])',\n      dir: 'left-right',\n      initialFocusElement: currentStageBtn\n    },\n    [currentStageBtn]\n  );\n\n  const dialogId = useUID();\n  const descriptionId = useUID();\n\n  useEffect(() => {\n    const el = stagesRef.current;\n    const wrapper = wrapperRef.current;\n    const startSentinel = startSentinelRef.current;\n    const endSentinel = endSentinelRef.current;\n    if (!el || !wrapper || !startSentinel || !endSentinel) return;\n\n    const fadeValue = 'var(--stages-fade-width)';\n\n    const observer = new IntersectionObserver(\n      entries => {\n        for (const entry of entries) {\n          const visible = entry.isIntersecting;\n          if (entry.target === startSentinel) {\n            wrapper.style.setProperty('--stages-fade-start', visible ? '0rem' : fadeValue);\n          } else if (entry.target === endSentinel) {\n            wrapper.style.setProperty('--stages-fade-end', visible ? '0rem' : fadeValue);\n          }\n        }\n      },\n      { root: el, threshold: 0 }\n    );\n\n    observer.observe(startSentinel);\n    observer.observe(endSentinel);\n\n    return () => observer.disconnect();\n  }, [stages.length]);\n\n  useEffect(() => {\n    const el = stagesRef.current;\n    const currentBtn = el?.querySelector<HTMLButtonElement>('[aria-current=\"step\"]');\n    currentBtn?.scrollIntoView({ inline: 'center', behavior: 'auto', block: 'nearest' });\n  }, [current]); // re-center whenever the active stage changes\n\n  useFocusWithin([stagesRef], focused => {\n    const activeEl = getActiveElement();\n    if (focused && isInstance(activeEl, HTMLButtonElement)) {\n      activeEl.scrollIntoView({\n        inline: 'center',\n        behavior: 'smooth',\n        block: 'nearest'\n      });\n    }\n  });\n\n  const stagesToLoad = onLoadStage\n    ? stages.filter(stage => !Array.isArray(stage.steps)).map(stage => stage.id)\n    : [];\n\n  const renderModalStages = () =>\n    stages.map(stage => (\n      <Fragment key={stage.id}>\n        <Flex container={{ alignItems: 'start', gap: 0.5 }}>\n          {stage.completed && <StyledStageCompleteIcon name='check' />}\n          <StyledStageText variant='h3' isCurrent={stage.id === current}>\n            {stage.name}\n            {stage.completed && <VisuallyHiddenText>{`- ${t('completed')}`}</VisuallyHiddenText>}\n          </StyledStageText>\n        </Flex>\n        <StageGlimpse stage={stage} />\n      </Fragment>\n    ));\n\n  const openModal = () => {\n    setShowModal(true);\n    if (stagesToLoad.length > 0) onLoadStage?.(stagesToLoad);\n    modalMethods.current = createModal(Modal, {\n      heading: caseTitle\n        ? t('stages_case_lifecycle', [caseTitle])\n        : t('stages_default_case_lifecycle'),\n      progress: stagesToLoad.length > 0,\n      children: renderModalStages(),\n      onBeforeClose: () => {\n        setShowModal(false);\n        target?.focus();\n        setTarget(null);\n        setTargetStageId(null);\n        modalMethods.current = undefined;\n      }\n    });\n  };\n\n  useAfterInitialEffect(() => {\n    modalMethods.current?.update({\n      progress: stagesToLoad.length > 0,\n      children: renderModalStages()\n    });\n  }, [stagesToLoad.length]);\n\n  return (\n    <>\n      <StyledStagesWrapper ref={wrapperRef} data-testid={testIds.root}>\n        <Flex\n          {...restProps}\n          container\n          as={StyledStages}\n          ref={stagesRef}\n          dir={rtl ? 'rtl' : 'ltr'}\n          aria-label={t('stages_label')}\n          aria-describedby={descriptionId}\n        >\n          <StyledSentinel ref={startSentinelRef} aria-hidden='true' />\n          {stages.map(stage => {\n            const isCurrent = stage.id === current;\n            let stageStatusText = t(stage.completed ? 'completed' : 'not_started');\n            if (isCurrent) stageStatusText = t('current');\n\n            const hasToLoad = stagesToLoad.includes(stage.id);\n\n            let stageStatus: StageStatus;\n\n            if (stage.completed) {\n              stageStatus = 'completed';\n            } else if (isCurrent) {\n              stageStatus = 'current';\n            } else {\n              stageStatus = 'pending';\n            }\n\n            return (\n              <Fragment key={stage.id}>\n                <Flex as={StyledStageContainer} item={{ grow: 1, shrink: 0 }} readOnly={readOnly}>\n                  <Flex\n                    container={{ justify: 'center', alignItems: 'center' }}\n                    as={StyledStage}\n                    item={{ grow: 1, shrink: 0 }}\n                    status={stageStatus}\n                    readOnly={readOnly}\n                    aria-current={isCurrent ? 'step' : undefined}\n                    aria-label={t('stages_stage_label', [stage.name, stageStatusText])}\n                    ref={(el: HTMLButtonElement | null) => {\n                      if (el) {\n                        stagesRefs.current.set(stage.id, el);\n                        if (isCurrent) setCurrentStageBtn(prev => (prev !== el ? el : prev));\n                      } else {\n                        stagesRefs.current.delete(stage.id);\n                        if (isCurrent) setCurrentStageBtn(null);\n                      }\n                    }}\n                    aria-expanded={\n                      targetStageId === stage.id && Boolean(target) && isSmallOrAbove\n                        ? true\n                        : undefined\n                    }\n                    aria-controls={\n                      targetStageId === stage.id && target && isSmallOrAbove ? dialogId : undefined\n                    }\n                    {...(!readOnly && {\n                      'aria-haspopup': 'dialog' as const,\n                      onClick: (e: MouseEvent<HTMLButtonElement>) => {\n                        if (isSmallOrAbove) {\n                          if (hasToLoad) onLoadStage?.([stage.id]);\n                          const btn = e.currentTarget;\n                          btn.scrollIntoView({\n                            inline: 'center',\n                            behavior: 'smooth',\n                            block: 'nearest'\n                          });\n                          setTarget(btn);\n                          setTargetStageId(stage.id);\n                        } else {\n                          openModal();\n                        }\n                      }\n                    })}\n                  >\n                    <StyledInnerStage>\n                      {stage.completed && <Icon name='check' />}\n                      {stage.name}\n                    </StyledInnerStage>\n                  </Flex>\n                </Flex>\n                {target && targetStageId === stage.id && isSmallOrAbove && !showModal && (\n                  <InfoDialog\n                    id={dialogId}\n                    heading={stage.name}\n                    target={target}\n                    progress={hasToLoad ? t('loading') : undefined}\n                    onDismiss={() => {\n                      setTarget(null);\n                      setTargetStageId(null);\n                    }}\n                    placement='bottom'\n                  >\n                    {!hasToLoad && (\n                      <StyledStageGlimpse>\n                        <StageGlimpse stage={stage} />\n                        <Button variant='secondary' onClick={openModal}>\n                          {t('stages_see_full_lifecycle')}\n                        </Button>\n                      </StyledStageGlimpse>\n                    )}\n                  </InfoDialog>\n                )}\n              </Fragment>\n            );\n          })}\n          <StyledSentinel ref={endSentinelRef} aria-hidden='true' />\n        </Flex>\n      </StyledStagesWrapper>\n      <StyledStagesDescription id={descriptionId}>\n        {t('stages_description')}\n      </StyledStagesDescription>\n    </>\n  );\n});\n\nexport default withTestIds(Stages, getStagesTestIds);\n"]}

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

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

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

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