@reliability-design/web 1.4.6 → 1.4.8

package/dist/components/rel-stepper/rel-stepper.ts

@@ -1,567 +0,0 @@
-import { LitElement, html, css, nothing } from "lit";
-import { customElement, property } from "lit/decorators.js";
-
-export type StepStatus = "done" | "progress" | "disabled";
-export type TextAlign = "right" | "below";
-export type Orientation = "horizontal" | "vertical";
-export type StepperSize = "small" | "large";
-/** Figma "Type": indicator content — default (number, check when done), dot, number, icon. */
-export type StepperType = "default" | "dot" | "number" | "icon";
-/** Figma "Typel": label placement relative to the indicator. */
-export type LabelPlacement = "top" | "centered" | "inverted";
-
-export interface Step {
-  title: string;
-  status: StepStatus;
-}
-
-@customElement("rel-stepper")
-export class RelStepper extends LitElement {
-  @property({ type: Array }) steps: Step[] = [];
-
-  @property({ type: String }) textAlign: TextAlign = "below";
-
-  @property({ type: String }) orientation: Orientation = "horizontal";
-
-  @property({ type: String }) size: StepperSize = "large";
-
-  @property({ type: String, reflect: true }) type: StepperType = "default";
-
-  /**
-   * Figma Typel axis: top = label top-aligned beside the indicator,
-   * centered = label vertically centered beside it, inverted = indicator above
-   * the label. When unset, the legacy textAlign prop drives the layout
-   * (below ≈ inverted, right ≈ centered). Note Figma marks Top+Horizontal
-   * as an unsupported combination.
-   */
-  @property({ type: String, reflect: true, attribute: "label-placement" })
-  labelPlacement?: LabelPlacement;
-
-  static styles = css`
-    :host {
-      color: var(--rel-text-default);
-      display: block;
-      font-family: var(--rel-fonts-font-family);
-    }
-
-    /********************************************
-     * Base Stepper Styles
-     ********************************************/
-    .rel-stepper {
-      display: flex;
-      font-family: var(--rel-fonts-font-family);
-      width: 100%;
-      position: relative;
-    }
-
-    /* Orientation */
-    .rel-stepper.horizontal {
-      flex-direction: row;
-      align-items: flex-start;
-      justify-content: center;
-    }
-
-    .rel-stepper.vertical.text-below {
-      flex-direction: column;
-      align-items: center;
-      justify-content: start;
-    }
-
-    .rel-stepper.vertical.text-right {
-      flex-direction: column;
-      align-items: flex-start;
-      justify-content: start;
-    }
-
-    /********************************************
-     * Step Container
-     ********************************************/
-    .rel-step {
-      display: flex;
-      position: relative;
-      cursor: pointer;
-    }
-
-    .rel-step.disabled {
-      cursor: not-allowed;
-    }
-
-    .rel-step:focus-visible {
-      outline: 2px solid var(--rel-border-focus);
-      outline-offset: 2px;
-      border-radius: var(--rel-border-radius-xs);
-    }
-
-    .rel-stepper.horizontal.text-below .rel-step {
-      flex-direction: column;
-      align-items: center;
-      text-align: center;
-      position: relative;
-      flex: 0;
-    }
-
-    .rel-stepper.horizontal.text-right .rel-step {
-      flex-direction: row;
-      align-items: center;
-      position: relative;
-      flex: 0;
-      gap: var(--rel-spacing-2xs);
-    }
-
-    /* Vertical layout variants */
-    .rel-stepper.vertical.text-below .rel-step {
-      flex-direction: column;
-      align-items: center;
-      justify-content: start;
-      position: relative;
-    }
-
-    .rel-stepper.vertical.text-right .rel-step {
-      flex-direction: row;
-      align-items: flex-start;
-      justify-content: center;
-      position: relative;
-      gap: var(--rel-spacing-2xs);
-    }
-
-    /* Wrapper for indicator and connector */
-    .indicator-wrapper {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      position: relative;
-    }
-
-    /* Wrapper for indicator and label (text-below only) */
-    .step-content {
-      display: flex;
-      align-items: center;
-      gap: var(--rel-spacing-2xs);
-    }
-
-    .text-below-content {
-      flex-direction: column;
-    }
-
-    .text-right-content {
-      flex-direction: row;
-    }
-
-    /********************************************
-     * Indicator
-     ********************************************/
-    .indicator {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: var(--rel-stepper-indicator-size, 22px);
-      height: var(--rel-stepper-indicator-size, 22px);
-      border: 2px solid var(--rel-bg-neutral-elevated-2);
-      background: var(--rel-bg-neutral);
-      border-radius: 50%;
-      position: relative;
-      z-index: 2;
-      transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
-      flex-shrink: 0;
-      font-family: var(--rel-body-sm-semibold-font-family);
-      font-weight: var(--rel-body-sm-semibold-font-weight);
-      font-size: var(--rel-body-sm-semibold-font-size);
-      line-height: var(--rel-body-sm-semibold-line-height);
-      letter-spacing: var(--rel-body-sm-semibold-letter-spacing);
-    }
-
-    .indicator svg {
-      width: 12px;
-      height: auto;
-      display: block;
-    }
-
-    /* Figma Type=Dot: bare dot indicator, no number/icon */
-    :host([type="dot"]) .indicator {
-      width: 12px;
-      height: 12px;
-    }
-
-    :host([type="dot"]) .rel-step.done .indicator,
-    :host([type="dot"]) .rel-step.progress .indicator {
-      background: var(--rel-bg-neutral-inverse-2);
-      border-color: var(--rel-bg-neutral-inverse-2);
-    }
-
-    /* Figma Typel=Top: label top-aligned against the indicator */
-    .rel-stepper.label-top .rel-step {
-      align-items: flex-start;
-    }
-
-    /********************************************
-     * Labels
-     ********************************************/
-    .step-label {
-      white-space: nowrap;
-      color: var(--rel-text-body);
-      font-family: var(--rel-body-md-regular-font-family);
-      font-weight: var(--rel-body-md-regular-font-weight);
-      font-size: var(--rel-body-md-regular-font-size);
-      line-height: var(--rel-body-md-regular-line-height);
-      letter-spacing: var(--rel-body-md-regular-letter-spacing);
-    }
-
-    /* Horizontal text-below specific */
-    .rel-stepper.vertical .rel-step {
-      column-gap: var(--rel-spacing-sm);
-    }
-
-    .rel-stepper.small .step-label {
-      font-family: var(--rel-body-sm-regular-font-family);
-      font-weight: var(--rel-body-sm-regular-font-weight);
-      font-size: var(--rel-body-sm-regular-font-size);
-      line-height: var(--rel-body-sm-regular-line-height);
-      letter-spacing: var(--rel-body-sm-regular-letter-spacing);
-    }
-
-    .rel-step.disabled .indicator {
-      color: var(--rel-text-caption);
-    }
-
-    .rel-stepper.horizontal.text-below .step-label {
-      margin-top: var(--rel-spacing-2xs);
-      text-align: center;
-    }
-
-    /* Horizontal text-right specific */
-    .rel-stepper.horizontal.text-right .step-label {
-      margin-top: 0;
-      margin-left: 0;
-      margin-right: var(--rel-spacing-xs);
-      text-align: left;
-    }
-
-    /* Vertical text-right specific */
-    .rel-stepper.vertical.text-right .step-label {
-      margin-top: 0;
-      margin-left: 0;
-      text-align: left;
-    }
-
-    /* Vertical text-below specific */
-    .rel-stepper.vertical.text-below .step-label {
-      margin-top: 0;
-      margin-left: 0;
-      text-align: center;
-    }
-
-    /********************************************
-     * Connector Lines
-     ********************************************/
-    .connector {
-      position: absolute;
-      background: var(--rel-border-default);
-      z-index: 1;
-    }
-
-    /* Horizontal connector */
-    .rel-stepper.horizontal .connector {
-      top: 50%;
-      left: 100%;
-      transform: translateY(-50%);
-      height: 2px;
-      position: absolute;
-      background: var(--rel-border-default);
-    }
-
-    .rel-stepper.horizontal .rel-step:last-child .connector {
-      display: none;
-    }
-
-    /* Vertical connectors */
-    .rel-stepper.vertical.text-below .connector {
-      top: 100%;
-      left: 50%;
-      transform: translateX(-50%);
-      width: 2px;
-      position: absolute;
-    }
-
-    .rel-stepper.vertical.text-right .connector {
-      top: 100%;
-      left: 50%;
-      transform: translateX(-50%);
-      width: 2px;
-      position: absolute;
-    }
-
-    .rel-stepper.vertical .rel-step:last-child .connector {
-      display: none;
-    }
-
-    .rel-stepper.vertical.text-right
-      .rel-step:last-child
-      .indicator-wrapper
-      .connector {
-      display: none;
-    }
-
-    /********************************************
-     * Step States
-     ********************************************/
-    .rel-step.done .indicator {
-      background: var(--rel-bg-neutral-inverse-2);
-      border-color: var(--rel-bg-neutral-inverse-2);
-      color: var(--rel-text-inverse);
-    }
-
-    .rel-step.progress .indicator {
-      border-color: var(--rel-border-strong);
-      background: var(--rel-bg-neutral);
-      color: var(--rel-text-label);
-    }
-
-    .rel-step.disabled .indicator {
-      background: var(--rel-bg-surface-elevated);
-      border-color: var(--rel-border-default);
-      color: var(--rel-text-disabled);
-    }
-
-    .rel-step.done .connector {
-      background: var(--rel-text-label);
-    }
-
-    .rel-step.progress .connector {
-      background: var(--rel-text-label);
-    }
-
-    .rel-step.done .step-label {
-      color: var(--rel-text-label);
-      font-weight: var(--rel-body-md-medium-font-weight);
-    }
-
-    .rel-step.progress .step-label {
-      color: var(--rel-text-label);
-      font-weight: var(--rel-body-md-medium-font-weight);
-    }
-
-    .rel-step.disabled .step-label {
-      color: var(--rel-text-disabled);
-    }
-
-    /* Dark mode: ensure progress/done indicator and labels stay readable */
-    :host-context(:root[data-theme="dark"]) .rel-step.progress .step-label,
-    :host-context(.dark) .rel-step.progress .step-label {
-      color: var(--rel-text-default);
-    }
-
-    :host-context(:root[data-theme="dark"]) .rel-step.progress .indicator,
-    :host-context(.dark) .rel-step.progress .indicator {
-      color: var(--rel-text-default);
-    }
-
-    /********************************************
-     * Size Property — controls connector length
-     ********************************************/
-    /* Horizontal */
-    .rel-stepper.large.horizontal {
-      gap: var(--rel-stepper-connector-length-lg, 86px);
-    }
-
-    .rel-stepper.small.horizontal {
-      gap: var(--rel-stepper-connector-length-md, 60px);
-    }
-
-    .rel-stepper.large.horizontal .connector {
-      width: var(--rel-stepper-connector-length-lg, 86px);
-    }
-
-    .rel-stepper.small.horizontal .connector {
-      width: var(--rel-stepper-connector-length-md, 60px);
-    }
-
-    /* Vertical */
-    .rel-stepper.large.vertical .connector {
-      height: var(--rel-stepper-connector-length-lg, 86px);
-    }
-
-    .rel-stepper.large.vertical {
-      gap: var(--rel-stepper-connector-length-lg, 86px);
-    }
-
-    .rel-stepper.small.vertical .connector {
-      height: var(--rel-stepper-connector-length-sm, 42px);
-    }
-
-    .rel-stepper.small.vertical {
-      gap: var(--rel-stepper-connector-length-sm, 42px);
-    }
-  `;
-
-  private isDone(step: Step): boolean {
-    return step.status === "done";
-  }
-
-  private isProgress(step: Step): boolean {
-    return step.status === "progress";
-  }
-
-  private isDisabled(step: Step): boolean {
-    return step.status === "disabled";
-  }
-
-  private getStepClasses(step: Step): string {
-    const classes = ["rel-step"];
-    if (this.isDone(step)) classes.push("done");
-    if (this.isProgress(step)) classes.push("progress");
-    if (this.isDisabled(step)) classes.push("disabled");
-    return classes.join(" ");
-  }
-
-  private onStepKeyDown(e: KeyboardEvent, step: Step, index: number) {
-    if (e.key === "Enter" || e.key === " ") {
-      e.preventDefault();
-      this.onStepClick(step, index);
-      return;
-    }
-
-    const prevKey = e.key === "ArrowLeft" || e.key === "ArrowUp";
-    const nextKey = e.key === "ArrowRight" || e.key === "ArrowDown";
-    if (!prevKey && !nextKey && e.key !== "Home" && e.key !== "End") return;
-
-    const steps = Array.from(
-      this.renderRoot.querySelectorAll<HTMLElement>(".rel-step:not(.disabled)")
-    );
-    if (steps.length === 0) return;
-
-    e.preventDefault();
-    const current = steps.indexOf(e.currentTarget as HTMLElement);
-    let target: number;
-    if (e.key === "Home") target = 0;
-    else if (e.key === "End") target = steps.length - 1;
-    else if (prevKey) target = (current - 1 + steps.length) % steps.length;
-    else target = (current + 1) % steps.length;
-
-    steps[target]?.focus();
-  }
-
-  private onStepClick(step: Step, index: number) {
-    if (step.status === "disabled") return;
-
-    this.dispatchEvent(
-      new CustomEvent("rel-step-change", {
-        detail: {
-          index,
-          step,
-        },
-        bubbles: true,
-        composed: true,
-      })
-    );
-  }
-
-  private renderIndicator(step: Step, index: number) {
-    if (this.type === "dot") return html``;
-    if (this.type === "number") return html`<span>${index + 1}</span>`;
-    if (this.type === "icon" || step.status === "done") {
-      return html`
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="14"
-          height="10"
-          viewBox="0 0 18 14"
-          fill="none"
-          class="check-icon"
-          aria-hidden="true"
-        >
-          <path
-            d="M6.44479 14L0.5 7.36383L1.9862 5.70478L6.44479 10.6819L16.0138 0L17.5 1.65904L6.44479 14Z"
-            fill="currentColor"
-          />
-        </svg>
-      `;
-    }
-    return html`<span>${index + 1}</span>`;
-  }
-
-  render() {
-    // Figma Typel wins when set; otherwise the legacy textAlign drives layout
-    // (below ≈ inverted, right ≈ centered).
-    const placement: LabelPlacement =
-      this.labelPlacement ?? (this.textAlign === "below" ? "inverted" : "centered");
-
-    const stepperClasses = [
-      "rel-stepper",
-      this.orientation === "vertical" ? "vertical" : "horizontal",
-      placement === "inverted" ? "text-below" : "text-right",
-      placement === "top" ? "label-top" : "",
-      this.size === "small" ? "small" : "large",
-    ]
-      .filter(Boolean)
-      .join(" ");
-
-    const isVertical = this.orientation === "vertical";
-    const isTextRight = placement !== "inverted";
-
-    return html`
-      <div class="${stepperClasses}" role="group" aria-label="Progress steps">
-        ${this.steps.map(
-          (step, idx) => html`
-            <div
-              class="${this.getStepClasses(step)}"
-              role="button"
-              tabindex="${this.isDisabled(step) ? -1 : 0}"
-              aria-label="${step.title}, step ${idx + 1} of ${this.steps.length}${this.isDone(step) ? ", completed" : ""}"
-              aria-disabled="${this.isDisabled(step) ? "true" : nothing}"
-              aria-current="${this.isProgress(step) ? "step" : nothing}"
-              @click="${() => this.onStepClick(step, idx)}"
-              @keydown="${(e: KeyboardEvent) => this.onStepKeyDown(e, step, idx)}"
-            >
-              ${isVertical && isTextRight
-                ? html`
-                    <!-- Indicator with connector below -->
-                    <div class="indicator-wrapper">
-                      <div part="indicator" class="indicator">
-                        ${this.renderIndicator(step, idx)}
-                      </div>
-                      ${idx < this.steps.length - 1
-                        ? html`<div part="track" class="connector"></div>`
-                        : ""}
-                    </div>
-
-                    <!-- Step Label to the right -->
-                    <div part="label" class="step-label">${step.title}</div>
-                  `
-                : isVertical
-                ? html`
-                    <div class="step-content text-below-content">
-                      <!-- Step Indicator -->
-                      <div part="indicator" class="indicator">
-                        ${this.renderIndicator(step, idx)}
-                      </div>
-
-                      <!-- Step Label -->
-                      <div part="label" class="step-label">${step.title}</div>
-                    </div>
-
-                    <!-- Connector -->
-                    ${idx < this.steps.length - 1
-                      ? html`<div part="track" class="connector"></div>`
-                      : ""}
-                  `
-                : html`
-                    <!-- Step Indicator -->
-                    <div part="indicator" class="indicator">
-                      ${this.renderIndicator(step, idx)}
-                    </div>
-
-                    <!-- Step Label -->
-                    <div part="label" class="step-label">${step.title}</div>
-
-                    <!-- Connector (for horizontal only) -->
-                    ${!isVertical && idx < this.steps.length - 1
-                      ? html`<div part="track" class="connector"></div>`
-                      : ""}
-                  `}
-            </div>
-          `
-        )}
-      </div>
-    `;
-  }
-}