Progress stepper

import '@rhds/elements/rh-progress-stepper/rh-progress-stepper.js';

<rh-progress-stepper>
  <rh-progress-step state="complete" description="This step has been completed successfully">
    Complete Step
  </rh-progress-step>
  <rh-progress-step state="warn" description="This step has a warning that needs attention">
    Warning Step
  </rh-progress-step>
  <rh-progress-step state="fail" description="This step has failed and needs to be retried">
    Failed Step
  </rh-progress-step>
  <rh-progress-step state="active" description="Currently working on this step">
    Active Step
  </rh-progress-step>
  <rh-progress-step description="This step is not yet started">
    Inactive Step
  </rh-progress-step>
</rh-progress-stepper>

import { ProgressStep } from "@rhds/elements/react/rh-progress-step/rh-progress-step.js";
import { ProgressStepper } from "@rhds/elements/react/rh-progress-stepper/rh-progress-stepper.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <ProgressStepper>
    <ProgressStep state="complete" description="This step has been completed successfully">Complete Step</ProgressStep>
    <ProgressStep state="warn" description="This step has a warning that needs attention">Warning Step</ProgressStep>
    <ProgressStep state="fail" description="This step has failed and needs to be retried">Failed Step</ProgressStep>
    <ProgressStep state="active" description="Currently working on this step">Active Step</ProgressStep>
    <ProgressStep description="This step is not yet started">Inactive Step</ProgressStep>
  </ProgressStepper>
);

import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';
import '@rhds/elements/rh-progress-stepper/rh-progress-stepper.js';

<rh-context-demo>
  <rh-context-picker id="picker" target="navigation" allow="darkest, lightest"></rh-context-picker>
  <rh-progress-stepper>
    <rh-progress-step state="complete" description="This step has been completed successfully">
      Complete Step
    </rh-progress-step>
    <rh-progress-step state="warn" description="This step has a warning that needs attention">
      Warning Step
    </rh-progress-step>
    <rh-progress-step state="fail" description="This step has failed and needs to be retried">
      Failed Step
    </rh-progress-step>
    <rh-progress-step state="active" description="Currently working on this step">
      Active Step
    </rh-progress-step>
    <rh-progress-step state="inactive" description="This step is not yet started">
      Inactive Step
    </rh-progress-step>
  </rh-progress-stepper>
</rh-context-demo>

import { ProgressStep } from "@rhds/elements/react/rh-progress-step/rh-progress-step.js";
import { ProgressStepper } from "@rhds/elements/react/rh-progress-stepper/rh-progress-stepper.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <rh-context-demo>
    <rh-context-picker id="picker" target="navigation" allow="darkest, lightest" />
    <ProgressStepper>
      <ProgressStep state="complete" description="This step has been completed successfully">Complete Step</ProgressStep>
      <ProgressStep state="warn" description="This step has a warning that needs attention">Warning Step</ProgressStep>
      <ProgressStep state="fail" description="This step has failed and needs to be retried">Failed Step</ProgressStep>
      <ProgressStep state="active" description="Currently working on this step">Active Step</ProgressStep>
      <ProgressStep state="inactive" description="This step is not yet started">Inactive Step</ProgressStep>
    </ProgressStepper>
  </rh-context-demo>
);

import '@rhds/elements/rh-progress-stepper/rh-progress-stepper.js';

<rh-progress-stepper compact="">
  <rh-progress-step state="complete" description="This step has been completed successfully">
    Complete Step
  </rh-progress-step>
  <rh-progress-step state="warn" description="This step has a warning that needs attention">
    Warning Step
  </rh-progress-step>
  <rh-progress-step state="fail" description="This step has failed and needs to be retried">
    Failed Step
  </rh-progress-step>
  <rh-progress-step state="active" description="Currently working on this step">Active Step</rh-progress-step>
  <rh-progress-step state="inactive" description="This step is not yet started">
    Inactive Step
  </rh-progress-step>
</rh-progress-stepper>

import { ProgressStep } from "@rhds/elements/react/rh-progress-step/rh-progress-step.js";
import { ProgressStepper } from "@rhds/elements/react/rh-progress-stepper/rh-progress-stepper.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <ProgressStepper compact>
    <ProgressStep state="complete" description="This step has been completed successfully">Complete Step</ProgressStep>
    <ProgressStep state="warn" description="This step has a warning that needs attention">Warning Step</ProgressStep>
    <ProgressStep state="fail" description="This step has failed and needs to be retried">Failed Step</ProgressStep>
    <ProgressStep state="active" description="Currently working on this step">Active Step</ProgressStep>
    <ProgressStep state="inactive" description="This step is not yet started">Inactive Step</ProgressStep>
  </ProgressStepper>
);

import '@rhds/elements/rh-progress-stepper/rh-progress-stepper.js';

<rh-progress-stepper compact="" orientation="vertical">
  <rh-progress-step state="complete" description="This step has been completed successfully">
    Complete Step
  </rh-progress-step>
  <rh-progress-step state="warn" description="This step has a warning that needs attention">
    Warning Step
  </rh-progress-step>
  <rh-progress-step state="fail" description="This step has failed and needs to be retried">
    Failed Step
  </rh-progress-step>
  <rh-progress-step state="active" description="Currently working on this step">
    Active Step
  </rh-progress-step>
  <rh-progress-step state="inactive" description="This step is not yet started">
    Inactive Step
  </rh-progress-step>
</rh-progress-stepper>

import { ProgressStep } from "@rhds/elements/react/rh-progress-step/rh-progress-step.js";
import { ProgressStepper } from "@rhds/elements/react/rh-progress-stepper/rh-progress-stepper.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <ProgressStepper compact orientation="vertical">
    <ProgressStep state="complete" description="This step has been completed successfully">Complete Step</ProgressStep>
    <ProgressStep state="warn" description="This step has a warning that needs attention">Warning Step</ProgressStep>
    <ProgressStep state="fail" description="This step has failed and needs to be retried">Failed Step</ProgressStep>
    <ProgressStep state="active" description="Currently working on this step">Active Step</ProgressStep>
    <ProgressStep state="inactive" description="This step is not yet started">Inactive Step</ProgressStep>
  </ProgressStepper>
);

import '@rhds/elements/rh-progress-stepper/rh-progress-stepper.js';

<rh-progress-stepper>
  <rh-progress-step state="complete" description="This step has been completed successfully">
    Complete Step
  </rh-progress-step>
  <rh-progress-step state="complete" description="This step has been completed successfully">
    Complete Step
  </rh-progress-step>
  <rh-progress-step state="complete" description="This step has been completed successfully">
    Current Step
  </rh-progress-step>
  <rh-progress-step description="Currently working on this step" icon="hourglass">
    Custom
  </rh-progress-step>
  <rh-progress-step description="This step is not yet started">
    Inactive Step
  </rh-progress-step>
</rh-progress-stepper>

import { ProgressStep } from "@rhds/elements/react/rh-progress-step/rh-progress-step.js";
import { ProgressStepper } from "@rhds/elements/react/rh-progress-stepper/rh-progress-stepper.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <ProgressStepper>
    <ProgressStep state="complete" description="This step has been completed successfully">Complete Step</ProgressStep>
    <ProgressStep state="complete" description="This step has been completed successfully">Complete Step</ProgressStep>
    <ProgressStep state="complete" description="This step has been completed successfully">Current Step</ProgressStep>
    <ProgressStep description="Currently working on this step" icon="hourglass">Custom</ProgressStep>
    <ProgressStep description="This step is not yet started">Inactive Step</ProgressStep>
  </ProgressStepper>
);

import '@rhds/elements/rh-progress-stepper/rh-progress-stepper.js';

<rh-progress-stepper>
  <rh-progress-step state="complete" href="#" description="This step has been completed successfully">
    Complete Step
  </rh-progress-step>
  <rh-progress-step state="warn" href="#" description="This step has a warning that needs attention">
    Warning Step
  </rh-progress-step>
  <rh-progress-step state="fail" href="#" description="This step has failed and needs to be retried">
    Failed Step
  </rh-progress-step>
  <rh-progress-step state="active" href="#" description="Currently working on this step">
    Active Step
  </rh-progress-step>
  <rh-progress-step href="#" description="This step is not yet started">
    Inactive Step
  </rh-progress-step>
</rh-progress-stepper>

import { ProgressStep } from "@rhds/elements/react/rh-progress-step/rh-progress-step.js";
import { ProgressStepper } from "@rhds/elements/react/rh-progress-stepper/rh-progress-stepper.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <ProgressStepper>
    <ProgressStep state="complete" href="#" description="This step has been completed successfully">Complete Step</ProgressStep>
    <ProgressStep state="warn" href="#" description="This step has a warning that needs attention">Warning Step</ProgressStep>
    <ProgressStep state="fail" href="#" description="This step has failed and needs to be retried">Failed Step</ProgressStep>
    <ProgressStep state="active" href="#" description="Currently working on this step">Active Step</ProgressStep>
    <ProgressStep href="#" description="This step is not yet started">Inactive Step</ProgressStep>
  </ProgressStepper>
);

import '@rhds/elements/rh-progress-stepper/rh-progress-stepper.js';

<rh-progress-stepper>
  <rh-progress-step state="complete">
    Complete Step
    <span slot="description">
      This step has been <strong>completed</strong> successfully
    </span>
  </rh-progress-step>
  <rh-progress-step state="warn">
    Warning Step
    <span slot="description">
      This step has a <em>warning</em> that needs attention
    </span>
  </rh-progress-step>
  <rh-progress-step state="fail">
    Failed Step
    <span slot="description">
      This step has <strong>failed</strong> and needs to be retried
    </span>
  </rh-progress-step>
  <rh-progress-step state="active">
    Active Step
    <span slot="description">
      Currently <u>working</u> on this step
    </span>
  </rh-progress-step>
  <rh-progress-step>
    Inactive Step
    <span slot="description">
      This step is <s>not yet started</s>
    </span>
  </rh-progress-step>
</rh-progress-stepper>

import { ProgressStep } from "@rhds/elements/react/rh-progress-step/rh-progress-step.js";
import { ProgressStepper } from "@rhds/elements/react/rh-progress-stepper/rh-progress-stepper.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <ProgressStepper>
    <ProgressStep state="complete">
      Complete Step
      <span slot="description">
        This step has been
        <strong>completed</strong>
        successfully
      </span>
    </ProgressStep>
    <ProgressStep state="warn">
      Warning Step
      <span slot="description">
        This step has a
        <em>warning</em>
        that needs attention
      </span>
    </ProgressStep>
    <ProgressStep state="fail">
      Failed Step
      <span slot="description">
        This step has
        <strong>failed</strong>
        and needs to be retried
      </span>
    </ProgressStep>
    <ProgressStep state="active">
      Active Step
      <span slot="description">
        Currently
        <u>working</u>
        on this step
      </span>
    </ProgressStep>
    <ProgressStep>
      Inactive Step
      <span slot="description">
        This step is
        <s>not yet started</s>
      </span>
    </ProgressStep>
  </ProgressStepper>
);

import '@rhds/elements/rh-progress-stepper/rh-progress-stepper.js';

<rh-progress-stepper vertical-at="sm">
  <rh-progress-step state="complete" description="This step has been completed successfully">
    Complete Step
  </rh-progress-step>
  <rh-progress-step state="warn" description="This step has a warning that needs attention">
    Warning Step
  </rh-progress-step>
  <rh-progress-step state="fail" description="This step has failed and needs to be retried">
    Failed Step
  </rh-progress-step>
  <rh-progress-step state="active" description="Currently working on this step">
    Active Step
  </rh-progress-step>
  <rh-progress-step description="This step is not yet started">
    Inactive Step
  </rh-progress-step>
</rh-progress-stepper>

import { ProgressStep } from "@rhds/elements/react/rh-progress-step/rh-progress-step.js";
import { ProgressStepper } from "@rhds/elements/react/rh-progress-stepper/rh-progress-stepper.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <ProgressStepper vertical-at="sm">
    <ProgressStep state="complete" description="This step has been completed successfully">Complete Step</ProgressStep>
    <ProgressStep state="warn" description="This step has a warning that needs attention">Warning Step</ProgressStep>
    <ProgressStep state="fail" description="This step has failed and needs to be retried">Failed Step</ProgressStep>
    <ProgressStep state="active" description="Currently working on this step">Active Step</ProgressStep>
    <ProgressStep description="This step is not yet started">Inactive Step</ProgressStep>
  </ProgressStepper>
);

import '@rhds/elements/rh-progress-stepper/rh-progress-stepper.js';

<rh-progress-stepper orientation="vertical">
  <rh-progress-step state="complete" description="This step has been completed successfully">
    Complete Step
  </rh-progress-step>
  <rh-progress-step state="warn" description="This step has a warning that needs attention">
    Warning Step
  </rh-progress-step>
  <rh-progress-step state="fail" description="This step has failed and needs to be retried">
    Failed Step
  </rh-progress-step>
  <rh-progress-step state="active" description="Currently working on this step">
    Active Step
  </rh-progress-step>
  <rh-progress-step description="This step is not yet started">
    Inactive Step
  </rh-progress-step>
</rh-progress-stepper>

import { ProgressStep } from "@rhds/elements/react/rh-progress-step/rh-progress-step.js";
import { ProgressStepper } from "@rhds/elements/react/rh-progress-stepper/rh-progress-stepper.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <ProgressStepper orientation="vertical">
    <ProgressStep state="complete" description="This step has been completed successfully">Complete Step</ProgressStep>
    <ProgressStep state="warn" description="This step has a warning that needs attention">Warning Step</ProgressStep>
    <ProgressStep state="fail" description="This step has failed and needs to be retried">Failed Step</ProgressStep>
    <ProgressStep state="active" description="Currently working on this step">Active Step</ProgressStep>
    <ProgressStep description="This step is not yet started">Inactive Step</ProgressStep>
  </ProgressStepper>
);