@nuvia-ui/components 4.0.1

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

@@ -0,0 +1,288 @@
+import { html } from 'lit';
+import './ds-stepper-item.js';
+import '../ds-stepper/ds-stepper.js';
+import '../ds-icon/ds-icon.js';
+
+export default {
+  title: 'Components/Stepper Item',
+  component: 'ds-stepper-item',
+  parameters: {
+    docs: {
+      description: {
+        component: 'Individual step within a `ds-stepper`. Supports `completed`, `current`, `disabled`, and `error` states. Normally used inside `ds-stepper`, but can be configured standalone for demonstration.'
+      }
+    }
+  },
+  argTypes: {
+    completed: { control: 'boolean', description: 'Whether this step is completed' },
+    current: { control: 'boolean', description: 'Whether this is the current active step' },
+    disabled: { control: 'boolean', description: 'Whether this step is disabled' },
+    error: { control: 'boolean', description: 'Whether this step has an error state' }
+  }
+};
+
+// Helper to manually set internal properties that are normally set by ds-stepper
+const configureItem = (el, config = {}) => {
+  if (!el) return;
+  requestAnimationFrame(() => {
+    el._direction = config.direction || 'horizontal';
+    el._position = config.position || 'middle';
+    el._step = config.step || 1;
+    el._totalSteps = config.totalSteps || 4;
+    el._linear = config.linear || false;
+    el._prevCompleted = config.prevCompleted || false;
+    el._prevError = config.prevError || false;
+  });
+};
+
+// ===== ALL STATES =====
+export const AllStates = {
+  render: () => html`
+    <style>
+      .states-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+        gap: 32px;
+        padding: 24px;
+      }
+      .state-card {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        align-items: center;
+      }
+      .state-label {
+        font: var(--ds-typo-content-caption-bold);
+        color: var(--ds-color-text-secondary);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+      }
+    </style>
+    <div class="states-grid">
+      <div class="state-card">
+        <span class="state-label">Default (Pending)</span>
+        <ds-stepper-item
+          id="state-default"
+          @click=${(e) => configureItem(e.target, { step: 3, position: 'middle' })}
+        >Pending Step</ds-stepper-item>
+      </div>
+
+      <div class="state-card">
+        <span class="state-label">Current</span>
+        <ds-stepper-item
+          current
+          id="state-current"
+        >Current Step</ds-stepper-item>
+      </div>
+
+      <div class="state-card">
+        <span class="state-label">Completed</span>
+        <ds-stepper-item
+          completed
+          id="state-completed"
+        >Completed Step</ds-stepper-item>
+      </div>
+
+      <div class="state-card">
+        <span class="state-label">Error</span>
+        <ds-stepper-item
+          error
+          id="state-error"
+        >Error Step</ds-stepper-item>
+      </div>
+
+      <div class="state-card">
+        <span class="state-label">Disabled</span>
+        <ds-stepper-item
+          disabled
+          id="state-disabled"
+        >Disabled Step</ds-stepper-item>
+      </div>
+
+      <div class="state-card">
+        <span class="state-label">Completed + Error</span>
+        <ds-stepper-item
+          completed
+          error
+          id="state-completed-error"
+        >Completed Error</ds-stepper-item>
+      </div>
+    </div>
+
+    <script type="module">
+      requestAnimationFrame(() => {
+        const items = {
+          'state-default': { step: 3, position: 'middle' },
+          'state-current': { step: 2, position: 'middle' },
+          'state-completed': { step: 1, position: 'first' },
+          'state-error': { step: 3, position: 'middle' },
+          'state-disabled': { step: 4, position: 'last' },
+          'state-completed-error': { step: 2, position: 'middle' }
+        };
+        Object.entries(items).forEach(([id, config]) => {
+          const el = document.getElementById(id);
+          if (el) {
+            el._direction = 'horizontal';
+            el._position = config.position;
+            el._step = config.step;
+            el._totalSteps = 4;
+            el._linear = false;
+            el._prevCompleted = false;
+            el._prevError = false;
+          }
+        });
+      });
+    </script>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Visual catalogue of all individual states for `ds-stepper-item`: Default (pending), Current, Completed, Error, Disabled, and combined Completed+Error.'
+      }
+    }
+  }
+};
+
+// ===== WITHIN STEPPER CONTEXT =====
+export const InStepperContext = {
+  render: () => html`
+    <style>
+      .context-section {
+        display: flex;
+        flex-direction: column;
+        gap: 32px;
+        padding: 24px;
+      }
+      .context-label {
+        font: var(--ds-typo-content-body-bold);
+        color: var(--ds-color-text-default);
+        margin-bottom: 8px;
+      }
+      .context-desc {
+        font: var(--ds-typo-content-caption-regular);
+        color: var(--ds-color-text-secondary);
+        margin-bottom: 16px;
+      }
+    </style>
+    <div class="context-section">
+      <div>
+        <p class="context-label">Horizontal — Step 2 active, step 1 completed</p>
+        <p class="context-desc">Shows how items relate to each other with connector lines.</p>
+        <ds-stepper active-step="1">
+          <ds-stepper-item>Account Setup</ds-stepper-item>
+          <ds-stepper-item>Personal Info</ds-stepper-item>
+          <ds-stepper-item>Preferences</ds-stepper-item>
+          <ds-stepper-item>Confirmation</ds-stepper-item>
+        </ds-stepper>
+      </div>
+
+      <div>
+        <p class="context-label">With Error on Step 2</p>
+        <p class="context-desc">Step 2 reports an error. Notice the red connector and indicator.</p>
+        <ds-stepper active-step="2">
+          <ds-stepper-item>Account Setup</ds-stepper-item>
+          <ds-stepper-item error>Personal Info</ds-stepper-item>
+          <ds-stepper-item>Preferences</ds-stepper-item>
+          <ds-stepper-item>Confirmation</ds-stepper-item>
+        </ds-stepper>
+      </div>
+
+      <div>
+        <p class="context-label">With Disabled Step</p>
+        <p class="context-desc">Step 3 is disabled — no pointer events, dimmed styling.</p>
+        <ds-stepper active-step="1">
+          <ds-stepper-item>Account Setup</ds-stepper-item>
+          <ds-stepper-item>Personal Info</ds-stepper-item>
+          <ds-stepper-item disabled>Restricted</ds-stepper-item>
+          <ds-stepper-item>Confirmation</ds-stepper-item>
+        </ds-stepper>
+      </div>
+
+      <div>
+        <p class="context-label">Linear Mode — Only completed/current steps are clickable</p>
+        <p class="context-desc">Steps 3 and 4 are locked (not clickable) until previous steps are completed.</p>
+        <ds-stepper linear active-step="1">
+          <ds-stepper-item>Account Setup</ds-stepper-item>
+          <ds-stepper-item>Personal Info</ds-stepper-item>
+          <ds-stepper-item>Preferences</ds-stepper-item>
+          <ds-stepper-item>Confirmation</ds-stepper-item>
+        </ds-stepper>
+      </div>
+    </div>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Shows `ds-stepper-item` within its parent `ds-stepper` context, demonstrating how items interact with connector lines, error states, disabled items, and linear mode.'
+      }
+    }
+  }
+};
+
+// ===== VERTICAL ITEM STATES =====
+export const VerticalStates = {
+  render: () => html`
+    <style>
+      .vertical-section {
+        display: flex;
+        gap: 48px;
+        padding: 24px;
+      }
+      .vertical-card {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+      }
+      .v-label {
+        font: var(--ds-typo-content-caption-bold);
+        color: var(--ds-color-text-secondary);
+        text-transform: uppercase;
+      }
+    </style>
+    <div class="vertical-section">
+      <div class="vertical-card">
+        <span class="v-label">Normal Flow</span>
+        <ds-stepper direction="vertical" active-step="1">
+          <ds-stepper-item>Account</ds-stepper-item>
+          <ds-stepper-item>Details</ds-stepper-item>
+          <ds-stepper-item>Review</ds-stepper-item>
+        </ds-stepper>
+      </div>
+
+      <div class="vertical-card">
+        <span class="v-label">With Error</span>
+        <ds-stepper direction="vertical" active-step="2">
+          <ds-stepper-item>Account</ds-stepper-item>
+          <ds-stepper-item error>Details</ds-stepper-item>
+          <ds-stepper-item>Review</ds-stepper-item>
+        </ds-stepper>
+      </div>
+
+      <div class="vertical-card">
+        <span class="v-label">With Content Slot</span>
+        <ds-stepper direction="vertical" active-step="1">
+          <ds-stepper-item>
+            Account Setup
+            <div slot="content" style="font: var(--ds-typo-content-caption-regular); color: var(--ds-color-text-secondary); padding: 8px 0;">
+              Fill in your account credentials to get started.
+            </div>
+          </ds-stepper-item>
+          <ds-stepper-item>
+            Personal Details
+            <div slot="content" style="font: var(--ds-typo-content-caption-regular); color: var(--ds-color-text-secondary); padding: 8px 0;">
+              Provide your personal information.
+            </div>
+          </ds-stepper-item>
+          <ds-stepper-item>Review</ds-stepper-item>
+        </ds-stepper>
+      </div>
+    </div>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Vertical layout variations showing individual item states, error handling, and the content slot for expandable step descriptions.'
+      }
+    }
+  }
+};

package/src/ds-switch/ds-switch.js

@@ -0,0 +1,348 @@
+import { LitElement, html, css } from 'lit';
+import { FieldMessageMixin, fieldMessageStyles } from '../mixins/field-message.mixin.js';
+import { FieldLabelMixin, fieldLabelStyles } from '../mixins/field-label.mixin.js';
+import '../ds-icon-button/ds-icon-button.js';
+import '../ds-tooltip/ds-tooltip.js';
+
+/**
+ * Toggle Switch component for boolean settings.
+ *
+ * @element ds-switch
+ *
+ * @prop {boolean} checked - Whether the switch is checked
+ * @prop {string} label - Block-level field label (above switch)
+ * @prop {string} info - Info tooltip text for info button
+ * @prop {string} labelPosition - Label position: 'top' | 'inline-start' (default: 'top')
+ * @prop {string} labelWidth - Fixed label width for inline layout (e.g., '100px')
+ * @prop {string} statusLabel - Inline state description next to track
+ * @prop {string} helpText - Help text below switch
+ * @prop {string} errorText - Error text (shown only when validationStatus="error")
+ * @prop {string} name - Form name
+ * @prop {string} value - Form value (default: 'on')
+ * @prop {boolean} disabled - Disabled state
+ * @prop {boolean} required - Required field
+ * @prop {boolean} standalone - Removes padding for tight layouts
+ *
+ * @fires change - Fired when state changes
+ * @fires info-click - Fired when info button is clicked
+ */
+export class DsSwitch extends FieldMessageMixin(FieldLabelMixin(LitElement)) {
+  static properties = {
+    checked: { type: Boolean, reflect: true },
+    label: { type: String },
+    info: { type: String },
+    labelPosition: { type: String, attribute: 'label-position' },
+    labelWidth: { type: String, attribute: 'label-width' },
+    statusLabel: { type: String, attribute: 'status-label' },
+    helpText: { type: String, attribute: 'help-text' },
+    errorText: { type: String, attribute: 'error-text' },
+    name: { type: String },
+    value: { type: String },
+    disabled: { type: Boolean, reflect: true },
+    required: { type: Boolean, reflect: true },
+    validationStatus: { type: String, attribute: 'validation-status', reflect: true },
+    standalone: { type: Boolean, reflect: true }
+  };
+
+  static styles = [
+    fieldLabelStyles,
+    fieldMessageStyles,
+    css`
+    :host {
+      display: inline-block;
+      outline: none;
+      font-family: var(--ds-font-family-content);
+    }
+
+    .switch-row {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      padding: var(--ds-size-6) var(--ds-space-sm);
+      min-height: var(--ds-size-32);
+      box-sizing: border-box;
+      transition: background-color 0.2s;
+      position: relative;
+    }
+
+    :host([standalone]) .switch-row {
+      padding: 0;
+      min-height: 0;
+    }
+
+    /* Hover effect on the whole row */
+    :host(:not([disabled])) .switch-row:hover {
+      background-color: var(--ds-color-bg-hover);
+    }
+
+    /* Focus state - border without offset */
+    .switch-row:has(input:focus-visible) {
+      outline: 2px solid var(--ds-color-border-focus);
+      outline-offset: 0;
+    }
+
+    /* Control Container - 20px height to match label line-height */
+    .control-container {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: var(--ds-size-20);
+      flex-shrink: 0;
+    }
+
+    /* Hidden Native Input */
+    input {
+      position: absolute;
+      opacity: 0;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      margin: 0;
+      cursor: inherit;
+    }
+
+    /* The Track - 32px x 16px */
+    .track {
+      width: var(--ds-size-32);
+      height: var(--ds-size-16);
+      border-radius: var(--ds-size-8);
+      position: relative;
+      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+      box-sizing: border-box;
+    }
+
+    /* Unchecked Track: 2px border icon-default */
+    :host(:not([checked])) .track {
+      border: 2px solid var(--ds-color-icon-default);
+      background-color: transparent;
+    }
+
+    /* Checked Track: Solid brand */
+    :host([checked]) .track {
+      background-color: var(--ds-color-bg-brand);
+      border: 2px solid var(--ds-color-bg-brand);
+    }
+
+    /* The Thumb */
+    .thumb {
+      border-radius: 50%;
+      position: absolute;
+      top: 50%;
+      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+      box-shadow: none; /* Flat design */
+    }
+
+    /* Unchecked Thumb: 10px x 10px, color icon-default */
+    :host(:not([checked])) .thumb {
+      width: var(--ds-size-10);
+      height: var(--ds-size-10);
+      background-color: var(--ds-color-icon-default);
+      left: 1px;
+      transform: translateY(-50%);
+    }
+
+    /* Checked Thumb: 12px x 12px, color bg-default */
+    :host([checked]) .thumb {
+      width: var(--ds-size-12);
+      height: var(--ds-size-12);
+      background-color: var(--ds-color-bg-default);
+      left: 16px;
+      transform: translate(0, -50%);
+    }
+
+    /* Status Label (inline next to track) */
+    .status-label {
+      margin-inline-start: var(--ds-space-sm);
+      font: var(--ds-typo-content-body-regular);
+      color: var(--ds-color-text-default);
+      user-select: none;
+    }
+
+    /* ---------------------------------------------------------
+       Error State (validation-status="error")
+    --------------------------------------------------------- */
+    
+    /* Unchecked Error */
+    :host([validation-status="error"]:not([checked])) .track {
+      border-color: var(--ds-color-icon-error);
+    }
+    
+    :host([validation-status="error"]:not([checked])) .thumb {
+      background-color: var(--ds-color-icon-error);
+    }
+    
+    /* Checked Error */
+    :host([validation-status="error"][checked]) .track {
+      background-color: var(--ds-color-bg-error);
+      border-color: var(--ds-color-bg-error);
+    }
+
+    /* ---------------------------------------------------------
+       Disabled State
+    --------------------------------------------------------- */
+    :host([disabled]) .switch-row {
+      cursor: not-allowed;
+    }
+
+    /* Unchecked Disabled: No background on track, icon-disabled border/thumb */
+    :host([disabled]:not([checked])) .track {
+      background-color: transparent;
+      border-color: var(--ds-color-icon-disabled);
+    }
+
+    :host([disabled]:not([checked])) .thumb {
+      background-color: var(--ds-color-icon-disabled);
+    }
+
+    /* Checked Disabled: icon-disabled track fill, white thumb */
+    :host([disabled][checked]) .track {
+      background-color: var(--ds-color-icon-disabled);
+      border-color: var(--ds-color-icon-disabled);
+    }
+
+    :host([disabled][checked]) .thumb {
+      background-color: var(--ds-color-bg-default);
+    }
+
+    :host([disabled]) .status-label {
+      color: var(--ds-color-text-disabled);
+    }
+  `];
+
+  constructor() {
+    super();
+    this.checked = false;
+    this.label = '';
+    this.info = '';
+    this.labelPosition = 'top';
+    this.labelWidth = '';
+    this.statusLabel = '';
+    this.helpText = '';
+    this.errorText = '';
+    this.name = '';
+    this.value = 'on';
+    this.disabled = false;
+    this.required = false;
+    this.standalone = false;
+    this.validationStatus = undefined;
+  }
+
+  _handleClick(e) {
+    if (this.disabled) return;
+
+    // We prevent default because we handle the state via this.checked
+    // The native checkbox will still update but we control it
+    e.preventDefault();
+    this.checked = !this.checked;
+    this._dispatchChange();
+  }
+
+  _dispatchChange() {
+    this.dispatchEvent(new CustomEvent('change', {
+      detail: {
+        checked: this.checked,
+        value: this.value
+      },
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  _getAriaLabel() {
+    return this.getAttribute('aria-label') || this.statusLabel || this.label || '';
+  }
+
+  /**
+   * Toggles the switch state programmatically
+   * @public
+   */
+  toggle() {
+    if (this.disabled) return;
+    this.checked = !this.checked;
+    this._dispatchChange();
+  }
+
+  /**
+   * Focuses the switch input
+   * @public
+   */
+  focus() {
+    const input = this.shadowRoot?.querySelector('input');
+    input?.focus();
+  }
+
+  render() {
+    const isInline = this.labelPosition === 'inline-start';
+    const wrapperClass = isInline ? 'field-wrapper inline-label' : '';
+    const labelStyle = isInline && this.labelWidth ? `width: ${this.labelWidth}` : '';
+
+    const switchContent = html`
+      <div class="switch-row" @click="${this._handleClick}">
+        <input 
+          type="checkbox" 
+          role="switch"
+          .checked="${this.checked}" 
+          ?disabled="${this.disabled}"
+          ?required="${this.required}"
+          name="${this.name}"
+          value="${this.value}"
+          aria-label="${this._getAriaLabel()}"
+          aria-checked="${this.checked}"
+        >
+        
+        <div class="control-container">
+          <div class="track">
+            <div class="thumb"></div>
+          </div>
+        </div>
+        
+        ${this.statusLabel ? html`<span class="status-label">${this.statusLabel}</span>` : ''}
+      </div>
+      ${this.validationStatus === 'error'
+        ? this.renderFieldMessage('', this.errorText)
+        : this.renderFieldMessage(this.helpText, '')}
+    `;
+
+    if (isInline) {
+      return html`
+        <div class="${wrapperClass}">
+          <div class="label-row" part="label-row" style="${labelStyle}">
+            <label>${this.label}</label>
+            ${this.info ? html`
+              <ds-tooltip content="${this.info}" placement="top">
+                <ds-icon-button 
+                  icon="info" 
+                  variant="action"
+                  size="s"
+                  aria-label="${this.info}"
+                  @click=${this._handleInfoClick}
+                ></ds-icon-button>
+              </ds-tooltip>
+            ` : ''}
+          </div>
+          <div class="field-content">
+            ${switchContent}
+          </div>
+        </div>
+      `;
+    }
+
+    return html`
+      ${this.renderFieldLabel(this.label, this.info)}
+      ${switchContent}
+    `;
+  }
+
+  _handleInfoClick(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    this.dispatchEvent(new CustomEvent('info-click', {
+      bubbles: true,
+      composed: true,
+      detail: { info: this.info }
+    }));
+  }
+}
+
+customElements.define('ds-switch', DsSwitch);