@nuvia-ui/components 4.0.1

package/src/ds-stepper-item/ds-stepper-item.js

@@ -0,0 +1,485 @@
+import { LitElement, html, css } from 'lit';
+import '../ds-icon/ds-icon.js';
+
+/**
+ * Stepper item component representing a single step in a stepper.
+ * 
+ * @element ds-stepper-item
+ * 
+ * @prop {boolean} completed - Whether this step is completed
+ * @prop {boolean} current - Whether this is the current active step
+ * @prop {boolean} disabled - Whether this step is disabled
+ * @prop {boolean} error - Whether this step has an error state
+ * 
+ * @slot - Default slot for step label content
+ * @slot content - Slot for expandable content (vertical wizard mode)
+ * 
+ * @fires ds-step-click - Fired when a step is clicked
+ * 
+ * @csspart indicator - The step indicator button
+ * @csspart connector-before - The connector line before the indicator
+ * @csspart connector-after - The connector line after the indicator
+ * @csspart label - The step label container
+ */
+export class DsStepperItem extends LitElement {
+  static properties = {
+    completed: { type: Boolean, reflect: true },
+    current: { type: Boolean, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+    error: { type: Boolean, reflect: true },
+    // Internal properties set by parent stepper
+    _direction: { type: String, state: true },
+    _position: { type: String, state: true }, // 'first' | 'middle' | 'last'
+    _prevCompleted: { type: Boolean, state: true },
+    _prevError: { type: Boolean, state: true },
+    _step: { type: Number, state: true },
+    _totalSteps: { type: Number, state: true },
+    _hasContent: { type: Boolean, state: true },
+    _linear: { type: Boolean, state: true }
+  };
+
+  static styles = css`
+    /* ===== HOST LAYOUT ===== */
+    :host {
+      display: flex;
+      flex: 1;
+      min-width: 0;
+    }
+
+    /* Horizontal layout */
+    :host(:not([data-direction="vertical"])) {
+      flex-direction: column;
+      align-items: center;
+    }
+
+    /* Vertical layout */
+    :host([data-direction="vertical"]) {
+      flex-direction: column;
+      align-items: stretch;
+    }
+
+    /* ===== DISABLED STATE ===== */
+    :host([disabled]) {
+      pointer-events: none;
+    }
+
+    :host([disabled]) .indicator ds-icon {
+      color: var(--ds-color-icon-disabled);
+    }
+
+    :host([disabled]) .label {
+      color: var(--ds-color-text-disabled);
+    }
+
+    :host([disabled]) .content-wrapper {
+      color: var(--ds-color-text-disabled);
+    }
+
+    /* ===== LINEAR NON-INTERACTIVE STATE ===== */
+    :host([data-linear-locked]) {
+      pointer-events: none;
+    }
+
+    :host([data-linear-locked]) .indicator {
+      cursor: default;
+    }
+
+    /* ===== STEP VISUAL (connector + indicator row) ===== */
+    .step-visual {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      position: relative;
+    }
+
+    :host([data-direction="vertical"]) .step-visual {
+      flex-direction: column;
+      width: auto;
+      height: 100%;
+      min-height: var(--ds-stepper-indicator-size, 32px);
+    }
+
+    /* ===== CONNECTORS ===== */
+    .connector {
+      flex: 1;
+      background-color: var(--ds-color-border-strong);
+      min-width: 1px;
+      min-height: 1px;
+      transition: background-color 0.2s, width 0.15s, height 0.15s;
+    }
+
+    /* Horizontal connectors */
+    :host(:not([data-direction="vertical"])) .connector {
+      height: 1px;
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 50%;
+      z-index: 0;
+    }
+
+    :host(:not([data-direction="vertical"])) .connector.connector-before {
+      left: 0;
+    }
+
+    :host(:not([data-direction="vertical"])) .connector.connector-after {
+      right: 0;
+    }
+
+    /* Vertical connectors */
+    :host([data-direction="vertical"]) .connector {
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 2px;
+      z-index: 0;
+      flex: none;
+    }
+
+    :host([data-direction="vertical"]) .connector.connector-before {
+      top: 0;
+      height: calc(var(--ds-stepper-indicator-size, 32px) / 2);
+    }
+
+    :host([data-direction="vertical"]) .connector.connector-after {
+      left: calc(var(--ds-stepper-indicator-size, 32px) / 2);
+      top: calc(var(--ds-stepper-indicator-size, 32px) / 2);
+      height: auto;
+      bottom: 0;
+    }
+
+    /* Hide first/last connectors */
+    :host([data-position="first"]) .connector-before {
+      visibility: hidden;
+    }
+
+    :host([data-position="last"]) .connector-after {
+      visibility: hidden;
+    }
+
+    /* Completed connector */
+    .connector.completed {
+      background-color: var(--ds-color-border-brand);
+    }
+
+    :host(:not([data-direction="vertical"])) .connector.completed {
+      height: 2px;
+    }
+
+    :host([data-direction="vertical"]) .connector.completed {
+      width: 2px;
+    }
+
+    :host([data-direction="vertical"]) .connector:not(.completed):not(.error) {
+      width: 1px;
+      background-color: var(--ds-color-border-strong);
+    }
+
+    /* Error connector */
+    .connector.error {
+      background-color: var(--ds-color-border-error);
+    }
+
+    :host(:not([data-direction="vertical"])) .connector.error {
+      height: 2px;
+    }
+
+    :host([data-direction="vertical"]) .connector.error {
+      width: 2px;
+    }
+
+    /* ===== INDICATOR ===== */
+    .indicator {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--ds-stepper-indicator-size, 32px);
+      height: var(--ds-stepper-indicator-size, 32px);
+      border-radius: var(--ds-radius-action, 999px);
+      background: transparent;
+      border: 2px solid transparent;
+      cursor: default;
+      flex-shrink: 0;
+      box-sizing: border-box;
+      transition: background-color 0.2s, border-color 0.2s;
+      position: relative;
+      z-index: 1;
+    }
+
+    /* Icon color by state */
+    .indicator ds-icon {
+      color: var(--ds-color-icon-secondary);
+    }
+
+    :host([completed]) .indicator ds-icon,
+    :host([current]) .indicator ds-icon {
+      color: var(--ds-color-icon-brand);
+    }
+
+    :host([error]) .indicator ds-icon {
+      color: var(--ds-color-icon-error);
+    }
+
+    /* Clickable steps (non-disabled, non-linear-locked) */
+    :host(:not([disabled]):not([data-linear-locked])) .indicator {
+      cursor: pointer;
+    }
+
+    /* Hover */
+    :host(:not([disabled]):not([data-linear-locked])) .indicator:hover {
+      background-color: var(--ds-color-bg-hover);
+    }
+
+    /* Focus */
+    .indicator:focus {
+      outline: none;
+    }
+
+    .indicator:focus-visible {
+      border-color: var(--ds-color-border-focus);
+    }
+
+    /* ===== LABEL ===== */
+    .label {
+      font: var(--ds-typo-content-body-bold);
+      color: var(--ds-color-text-default);
+      margin-top: var(--ds-space-sm, 8px);
+      text-align: center;
+      white-space: nowrap;
+    }
+
+    :host([data-direction="vertical"]) .label {
+      margin-top: 0;
+      margin-left: var(--ds-space-sm, 8px);
+      text-align: left;
+      align-self: center;
+    }
+
+    /* ===== VERTICAL CONTENT ===== */
+    .content-wrapper {
+      display: none;
+      padding-top: var(--ds-space-sm, 8px);
+      padding-bottom: var(--ds-space-lg, 24px);
+    }
+
+    :host([data-direction="vertical"][current]) .content-wrapper:not([hidden]) {
+      display: block;
+      margin-left: 0;
+      padding-left: calc(var(--ds-stepper-indicator-size, 32px) + var(--ds-space-sm, 8px));
+      border-left: 2px solid transparent;
+    }
+
+    /* ===== VERTICAL STRUCTURE ===== */
+    :host([data-direction="vertical"]) .step-header {
+      display: flex;
+      align-items: center;
+    }
+
+    :host([data-direction="vertical"]) .indicator-column {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      min-height: var(--ds-stepper-indicator-size, 32px);
+      position: relative;
+      width: var(--ds-stepper-indicator-size, 32px);
+      flex-shrink: 0;
+    }
+
+    :host([data-direction="vertical"]) .indicator {
+      z-index: 1;
+      position: relative;
+    }
+
+    .step-container {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      position: relative;
+      padding-bottom: var(--ds-space-sm, 8px);
+    }
+  `;
+
+  constructor() {
+    super();
+    this.completed = false;
+    this.current = false;
+    this.disabled = false;
+    this.error = false;
+    this._direction = 'horizontal';
+    this._position = 'middle';
+    this._prevCompleted = false;
+    this._prevError = false;
+    this._step = 1;
+    this._totalSteps = 1;
+    this._hasContent = false;
+    this._linear = false;
+  }
+
+  updated(changedProperties) {
+    super.updated(changedProperties);
+
+    // Data attributes for CSS selectors
+    if (changedProperties.has('_direction')) {
+      if (this._direction === 'vertical') {
+        this.setAttribute('data-direction', 'vertical');
+      } else {
+        this.removeAttribute('data-direction');
+      }
+    }
+
+    if (changedProperties.has('_position')) {
+      this.setAttribute('data-position', this._position);
+    }
+
+    // ARIA: aria-current for the active step
+    if (changedProperties.has('current')) {
+      if (this.current) {
+        this.setAttribute('aria-current', 'step');
+      } else {
+        this.removeAttribute('aria-current');
+      }
+    }
+
+    // Linear lock: non-completed, non-current steps become non-interactive
+    if (changedProperties.has('_linear') || changedProperties.has('completed') || changedProperties.has('current')) {
+      if (this._linear && !this.completed && !this.current) {
+        this.setAttribute('data-linear-locked', '');
+      } else {
+        this.removeAttribute('data-linear-locked');
+      }
+    }
+
+    // Propagate state changes to parent
+    if (changedProperties.has('completed') || changedProperties.has('error')) {
+      this.dispatchEvent(new CustomEvent('ds-step-update', { bubbles: true, composed: true }));
+    }
+  }
+
+  _getIconName() {
+    return this.current ? 'circle-filled' : 'dot-filled-stepper';
+  }
+
+  _isInteractive() {
+    if (this.disabled) return false;
+    if (this._linear && !this.completed && !this.current) return false;
+    return true;
+  }
+
+  _handleClick() {
+    if (this._isInteractive()) {
+      this.dispatchEvent(new CustomEvent('ds-step-click', {
+        bubbles: true,
+        composed: true,
+        detail: { step: this._step }
+      }));
+    }
+  }
+
+  _handleKeyDown(e) {
+    if ((e.key === 'Enter' || e.key === ' ') && this._isInteractive()) {
+      e.preventDefault();
+      this._handleClick();
+    }
+  }
+
+  _getConnectorBeforeClass() {
+    let cls = 'connector connector-before';
+    if (this._prevError) {
+      cls += ' error';
+    } else if (this._prevCompleted) {
+      cls += ' completed';
+    }
+    return cls;
+  }
+
+  _getConnectorAfterClass() {
+    let cls = 'connector connector-after';
+    if (this.error) {
+      cls += ' error';
+    } else if (this.completed) {
+      cls += ' completed';
+    }
+    return cls;
+  }
+
+  render() {
+    const interactive = this._isInteractive();
+    const connectorBeforeClass = this._getConnectorBeforeClass();
+    const connectorAfterClass = this._getConnectorAfterClass();
+    const isVertical = this._direction === 'vertical';
+    const ariaLabel = interactive ? `Step ${this._step} of ${this._totalSteps}` : '';
+
+    if (isVertical) {
+      return html`
+        <div class="step-container">
+          <div class="${connectorAfterClass}" part="connector-after"></div>
+
+          <div class="step-header">
+            <div class="indicator-column">
+               <div class="${connectorBeforeClass}" part="connector-before"></div>
+               <div 
+                class="indicator" 
+                part="indicator"
+                role="${interactive ? 'button' : 'presentation'}"
+                tabindex="${interactive ? '0' : '-1'}"
+                aria-label="${ariaLabel}"
+                aria-disabled="${this.disabled ? 'true' : 'false'}"
+                @click=${this._handleClick}
+                @keydown=${this._handleKeyDown}
+              >
+                <ds-icon name="${this._getIconName()}" size="sm"></ds-icon>
+              </div>
+            </div>
+            
+            <div class="label" part="label">
+              <slot></slot>
+            </div>
+          </div>
+          
+          <div class="content-wrapper" ?hidden=${!this._hasContent}>
+            <slot name="content" @slotchange=${this._handleContentSlotChange}></slot>
+          </div>
+        </div>
+      `;
+    }
+
+    return html`
+      <div class="step-visual">
+        <div class="${connectorBeforeClass}" part="connector-before"></div>
+        
+        <div 
+          class="indicator" 
+          part="indicator"
+          role="${interactive ? 'button' : 'presentation'}"
+          tabindex="${interactive ? '0' : '-1'}"
+          aria-label="${ariaLabel}"
+          aria-disabled="${this.disabled ? 'true' : 'false'}"
+          @click=${this._handleClick}
+          @keydown=${this._handleKeyDown}
+        >
+          <ds-icon name="${this._getIconName()}" size="sm"></ds-icon>
+        </div>
+        
+        <div class="${connectorAfterClass}" part="connector-after"></div>
+      </div>
+
+      <div class="label" part="label">
+        <slot></slot>
+      </div>
+    `;
+  }
+
+  _handleContentSlotChange(e) {
+    const slot = e.target;
+    const nodes = slot.assignedNodes({ flatten: true });
+    this._hasContent = nodes.some(node =>
+      node.nodeType === Node.ELEMENT_NODE ||
+      (node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== '')
+    );
+  }
+}
+
+if (!customElements.get('ds-stepper-item')) {
+  customElements.define('ds-stepper-item', DsStepperItem);
+}