@pega/cosmos-react-work 9.10.1 → 9.12.0

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"}