@sondor-technology/sondor-components 1.0.0-1165-initial-setup.11

package/src/components/drawer/drawer.ts

@@ -0,0 +1,218 @@
+import { LitElement, html, css, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { resetStyles } from '../../styles/reset.js';
+
+export type DrawerPlacement = 'left' | 'right';
+
+@customElement('st-drawer')
+export class StDrawer extends LitElement {
+  @property({ type: Boolean, reflect: true }) open = false;
+  @property({ type: String, reflect: true }) placement: DrawerPlacement = 'left';
+  @property({ type: Boolean, attribute: 'mobile-only', reflect: true }) mobileOnly = false;
+
+  private _touchStartX = 0;
+  private _currentTranslateX = 0;
+  private _isDragging = false;
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: contents;
+      }
+
+      :host([mobile-only]) {
+        display: block;
+      }
+      @media (min-width: 768px) {
+        :host([mobile-only]) {
+          display: none !important;
+        }
+      }
+
+      .overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 100vh;
+        background-color: rgba(0, 0, 0, 0.5);
+        backdrop-filter: blur(2px);
+        z-index: 1000;
+        display: flex;
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 0.25s ease-in-out;
+      }
+
+      :host([open]) .overlay {
+        opacity: 1;
+        pointer-events: auto;
+      }
+
+      .panel {
+        position: fixed;
+        top: 0;
+        bottom: 0;
+        width: auto;
+        max-width: 90vw;
+        background-color: var(--st-color-surface, #ffffff);
+        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
+        display: flex;
+        flex-direction: column;
+        z-index: 1001;
+        overflow-y: auto;
+        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+        touch-action: pan-y;
+      }
+
+      /* Slide from Left */
+      :host([placement="left"]) .panel {
+        left: 0;
+        transform: translateX(-100%);
+      }
+      :host([placement="left"][open]) .panel {
+        transform: translateX(0);
+      }
+
+      /* Slide from Right */
+      :host([placement="right"]) .panel {
+        right: 0;
+        transform: translateX(100%);
+      }
+      :host([placement="right"][open]) .panel {
+        transform: translateX(0);
+      }
+
+      .header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: var(--st-spacing-md) var(--st-spacing-lg);
+        border-bottom: 1px solid var(--st-color-border, #e2e8f0);
+      }
+
+      .title {
+        font-weight: var(--st-font-weight-bold);
+        font-size: var(--st-font-size-sm);
+        color: var(--st-color-text);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+      }
+
+      .close-btn {
+        background: transparent;
+        border: none;
+        cursor: pointer;
+        color: var(--st-color-text-muted);
+        padding: 0.25rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: var(--st-radius-sm, 0.375rem);
+      }
+
+      .close-btn:hover {
+        color: var(--st-color-text);
+        background-color: var(--st-color-surface-muted, #f1f5f9);
+      }
+
+      .close-btn svg {
+        width: 1.25rem;
+        height: 1.25rem;
+        stroke: currentColor;
+        stroke-width: 2;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        fill: none;
+      }
+
+      .body {
+        padding: var(--st-spacing-lg);
+        flex: 1;
+      }
+    `
+  ];
+
+  private _close() {
+    this.open = false;
+    const panel = this.shadowRoot?.querySelector('.panel') as HTMLElement;
+    if (panel) panel.style.transform = '';
+    this.dispatchEvent(new CustomEvent('st-close', { bubbles: true, composed: true }));
+  }
+
+  private _handleTouchStart(e: TouchEvent) {
+    this._touchStartX = e.touches[0].clientX;
+    this._isDragging = true;
+    const panel = this.shadowRoot?.querySelector('.panel') as HTMLElement;
+    if (panel) panel.style.transition = 'none';
+  }
+
+  private _handleTouchMove(e: TouchEvent) {
+    if (!this._isDragging) return;
+    const currentX = e.touches[0].clientX;
+    const diff = currentX - this._touchStartX;
+    const panel = this.shadowRoot?.querySelector('.panel') as HTMLElement;
+
+    if (!panel) return;
+
+    if (this.placement === 'left' && diff < 0) {
+      this._currentTranslateX = diff;
+      panel.style.transform = `translateX(${diff}px)`;
+    } else if (this.placement === 'right' && diff > 0) {
+      this._currentTranslateX = diff;
+      panel.style.transform = `translateX(${diff}px)`;
+    }
+  }
+
+  private _handleTouchEnd() {
+    if (!this._isDragging) return;
+    this._isDragging = false;
+    const panel = this.shadowRoot?.querySelector('.panel') as HTMLElement;
+    if (panel) panel.style.transition = '';
+
+    const threshold = 70;
+    if (
+      (this.placement === 'left' && this._currentTranslateX < -threshold) ||
+      (this.placement === 'right' && this._currentTranslateX > threshold)
+    ) {
+      this._close();
+    } else if (panel) {
+      panel.style.transform = '';
+    }
+    this._currentTranslateX = 0;
+  }
+
+  render() {
+    if (!this.open) return nothing;
+
+    return html`
+      <div class="overlay" @click=${this._close}></div>
+      <div 
+        class="panel" 
+        role="dialog" 
+        aria-modal="true"
+        @click=${(e: Event) => e.stopPropagation()}
+        @touchstart=${this._handleTouchStart}
+        @touchmove=${this._handleTouchMove}
+        @touchend=${this._handleTouchEnd}
+      >
+        <div class="header">
+          <span class="title"><slot name="header">Menu</slot></span>
+          <button class="close-btn" @click=${this._close} aria-label="Close Drawer">
+            <svg viewBox="0 0 24 24"><path d="M18 6L6 18M6 6l12 12"></path></svg>
+          </button>
+        </div>
+        <div class="body">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'st-drawer': StDrawer;
+  }
+}

package/src/components/field/field.ts

@@ -0,0 +1,31 @@
+import { LitElement, html, css } from 'lit';
+import { customElement, } from 'lit/decorators.js';
+import { resetStyles } from '../../styles/reset';
+
+@customElement('st-field')
+export class StField extends LitElement {
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        gap: var(--st-spacing-xs, 0.25rem);
+        width: 100%;
+        margin-bottom: var(--st-spacing-md, 0.25rem);
+      }
+    `
+  ];
+
+  render() {
+    return html`
+      <slot></slot>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'st-field': StField;
+  }
+}

package/src/components/footer/footer.ts

@@ -0,0 +1,58 @@
+import {LitElement, html, css} from "lit";
+import {customElement} from "lit/decorators.js";
+import {resetStyles} from "../../styles/reset";
+
+@customElement("st-footer")
+export class StFooter extends LitElement {
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: block;
+        border-top: 1px solid var(--st-color-border);
+        background-color: var(--st-color-surface);
+        padding: var(--st-spacing-lg, 2rem) 0;
+        margin-top: auto; /* Pushes footer to the bottom of the page */
+      }
+
+      footer {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: var(--st-spacing-md, 1rem);
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: 0 var(--st-spacing-md, 1rem);
+        color: var(--st-color-text-muted);
+        font-size: 0.875rem;
+      }
+
+      /* Wrapper for footer links */
+      .links {
+        display: flex;
+        gap: var(--st-spacing-md, 1rem);
+      }
+
+      ::slotted(a) {
+        color: var(--st-color-text-muted);
+        text-decoration: none;
+        transition: color 0.2s;
+      }
+
+      ::slotted(a:hover) {
+        color: var(--st-color-primary);
+      }
+    `,
+  ];
+
+  render() {
+    return html`
+      <footer>
+        <slot></slot>
+        <div class="links">
+          <span>&copy; ${new Date().getFullYear()} Sondor.</span>
+        </div>
+      </footer>
+    `;
+  }
+}

package/src/components/form/form-step.ts

@@ -0,0 +1,32 @@
+import {LitElement, html, css} from "lit";
+import {customElement, property} from "lit/decorators.js";
+import {resetStyles} from "../../styles/reset.js";
+
+@customElement("st-form-step")
+export class StFormStep extends LitElement {
+  @property({type: String}) title = "";
+  @property({type: Boolean, reflect: true}) active = false;
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: block;
+      }
+      /* Hide inactive steps completely from the layout and accessibility tree */
+      :host(:not([active])) {
+        display: none;
+      }
+    `,
+  ];
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-form-step": StFormStep;
+  }
+}

package/src/components/form/form.ts

@@ -0,0 +1,376 @@
+import {LitElement, html, css} from "lit";
+import {customElement, property, state, queryAssignedElements, query} from "lit/decorators.js";
+import {resetStyles} from "../../styles/reset.js";
+import type {StFormStep} from "./form-step.js";
+
+export type FormLayout = "vertical" | "horizontal" | "inline";
+
+@customElement("st-form")
+export class StForm extends LitElement {
+  @property({type: String, reflect: true}) layout: FormLayout = "vertical";
+  @property({type: Boolean, reflect: true}) loading = false;
+  @property({type: String}) error = "";
+
+  @state() private _currentStepIndex = 0;
+
+  @queryAssignedElements({selector: "st-form-step"})
+  private _stepElements!: StFormStep[];
+
+  @query("form") private _formEl!: HTMLFormElement;
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: block;
+        position: relative;
+      }
+
+      form {
+        display: flex;
+        gap: var(--st-spacing-md);
+      }
+
+      /* ==========================================================
+         Layouts
+         ========================================================== */
+      :host([layout="vertical"]) form {
+        flex-direction: column;
+      }
+
+      :host([layout="horizontal"]) form {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+        align-items: start;
+      }
+
+      :host([layout="inline"]) form {
+        flex-direction: row;
+        align-items: flex-end;
+        flex-wrap: wrap;
+      }
+
+      .has-steps form {
+        display: flex;
+        flex-direction: column;
+      }
+
+      /* ==========================================================
+         Progress Navigation
+         ========================================================== */
+      .progress-nav {
+        display: flex;
+        align-items: center;
+        margin-bottom: var(--st-spacing-xl);
+        padding-bottom: var(--st-spacing-md);
+        overflow-x: auto;
+        scrollbar-width: none;
+      }
+
+      .step-indicator {
+        display: flex;
+        align-items: center;
+        gap: var(--st-spacing-sm);
+        color: var(--st-color-text-muted);
+        font-size: var(--st-font-size-sm);
+        font-weight: var(--st-font-weight-medium);
+        transition: color 0.2s ease;
+      }
+
+      .step-indicator.active {
+        color: var(--st-color-text);
+      }
+      .step-indicator.completed {
+        color: var(--st-color-success);
+      }
+
+      .step-circle {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 1.75rem;
+        height: 1.75rem;
+        border-radius: 50%;
+        border: 2px solid currentColor;
+        font-size: 0.875rem;
+        background-color: var(--st-color-bg);
+        transition: all 0.2s ease;
+      }
+
+      .step-indicator.active .step-circle {
+        background-color: var(--st-color-primary);
+        border-color: var(--st-color-primary);
+        color: var(--st-color-bg);
+      }
+
+      .step-indicator.completed .step-circle {
+        border-color: var(--st-color-success);
+        background-color: var(--st-color-success-bg, transparent);
+      }
+
+      .step-connector {
+        flex: 1;
+        height: 2px;
+        min-width: 24px;
+        margin: 0 var(--st-spacing-sm);
+        background-color: var(--st-color-border);
+        transition: background-color 0.2s ease;
+      }
+
+      .step-connector.completed {
+        background-color: var(--st-color-success);
+      }
+
+      /* ==========================================================
+         Actions & States
+         ========================================================== */
+      .form-actions {
+        display: flex;
+        gap: var(--st-spacing-md);
+        margin-top: var(--st-spacing-lg);
+        justify-content: flex-end;
+      }
+
+      .loading-overlay {
+        position: absolute;
+        inset: 0;
+        background: rgba(var(--st-color-bg-rgb, 255, 255, 255), 0.7);
+        backdrop-filter: blur(2px);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 10;
+        border-radius: inherit;
+        color: var(--st-color-text);
+        font-weight: var(--st-font-weight-medium);
+        gap: var(--st-spacing-sm);
+      }
+
+      @keyframes pulse {
+        0%,
+        100% {
+          opacity: 1;
+        }
+        50% {
+          opacity: 0.5;
+        }
+      }
+
+      .loading-overlay st-icon {
+        animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+      }
+    `,
+  ];
+
+  private _handleSlotChange() {
+    if (this._stepElements.length > 0) {
+      this._updateStepVisibility();
+    }
+  }
+
+  private _updateStepVisibility() {
+    this._stepElements.forEach((step, index) => {
+      step.active = index === this._currentStepIndex;
+    });
+    this.requestUpdate();
+  }
+
+  private _validateCurrentContext(): boolean {
+    if (this._stepElements.length === 0) {
+      return this._formEl.checkValidity();
+    }
+
+    const currentStep = this._stepElements[this._currentStepIndex];
+    let isValid = true;
+
+    // Find all custom and native form inputs assigned to the current step
+    const inputs = Array.from(
+      currentStep.querySelectorAll<
+        HTMLElement & {checkValidity?: () => boolean; reportValidity?: () => void}
+      >("*"),
+    );
+
+    for (const input of inputs) {
+      if (typeof input.checkValidity === "function") {
+        if (!input.checkValidity()) {
+          // Focus and report on the first invalid element encountered
+          if (isValid && typeof input.reportValidity === "function") {
+            input.reportValidity();
+          }
+          isValid = false;
+        }
+      }
+    }
+
+    return isValid;
+  }
+
+  private _triggerSubmission() {
+    // HTML5 method that triggers form validation and fires the native submit event
+    this._formEl.requestSubmit();
+  }
+
+  private _prevStep() {
+    if (this._currentStepIndex > 0) {
+      this._currentStepIndex--;
+      this._updateStepVisibility();
+    }
+  }
+
+  private _extractFormData(): FormData {
+    const formData = new FormData();
+
+    // Query all light-DOM children that have a 'name' attribute
+    const fields = this.querySelectorAll<
+      HTMLElement & {name: string; value: any; checked?: boolean; files?: FileList}
+    >("[name]");
+
+    fields.forEach((field) => {
+      // Standard HTML form behavior: ignore disabled fields
+      if (field.hasAttribute("disabled")) return;
+
+      const isToggle =
+        field.tagName === "ST-RADIO" ||
+        field.tagName === "ST-CHECKBOX" ||
+        field.getAttribute("type") === "radio" ||
+        field.getAttribute("type") === "checkbox";
+
+      if (isToggle) {
+        // Only append radios/checkboxes if they are actively checked
+        if (field.checked) {
+          formData.append(field.name, field.value || "on");
+        }
+      } else if (
+        field.tagName === "INPUT" &&
+        field.getAttribute("type") === "file" &&
+        field.files
+      ) {
+        // Handle native file uploads
+        Array.from(field.files).forEach((file) => formData.append(field.name, file));
+      } else if (field.value !== undefined) {
+        // Handle st-input, st-select, st-textarea, and standard inputs
+        formData.append(field.name, field.value);
+      }
+    });
+
+    return formData;
+  }
+
+  private _handleSubmit(e: Event) {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (!this._validateCurrentContext()) return;
+
+    const hasSteps = this._stepElements.length > 0;
+    const isLastStep = hasSteps ? this._currentStepIndex === this._stepElements.length - 1 : true;
+
+    if (hasSteps && !isLastStep) {
+      this._currentStepIndex++;
+      this._updateStepVisibility();
+      return;
+    }
+
+    // Use our custom extractor to pierce the Shadow DOM boundary
+    const formData = this._extractFormData();
+
+    this.dispatchEvent(
+      new CustomEvent("submit", {
+        bubbles: true,
+        composed: true,
+        cancelable: true,
+        detail: {formData},
+      }),
+    );
+  }
+
+  render() {
+    const hasSteps = this._stepElements?.length > 0;
+    const isLastStep = hasSteps ? this._currentStepIndex === this._stepElements.length - 1 : true;
+
+    return html`
+      <div class="${hasSteps ? "has-steps" : ""}" aria-busy=${this.loading}>
+        ${this.loading
+          ? html`
+              <div class="loading-overlay">
+                <st-icon name="cloud-download" color="primary"></st-icon> Processing...
+              </div>
+            `
+          : ""}
+        ${hasSteps
+          ? html`
+              <div class="progress-nav" role="tablist">
+                ${this._stepElements.map((step, index) => {
+                  const isActive = index === this._currentStepIndex;
+                  const isCompleted = index < this._currentStepIndex;
+
+                  return html`
+                    <div
+                      class="step-indicator ${isActive ? "active" : ""} ${isCompleted
+                        ? "completed"
+                        : ""}"
+                      role="tab"
+                      aria-selected=${isActive}
+                    >
+                      <div class="step-circle">
+                        ${isCompleted
+                          ? html`<st-icon name="check-circle" size="sm"></st-icon>`
+                          : html`${index + 1}`}
+                      </div>
+                      <span>${step.title || `Step ${index + 1}`}</span>
+                    </div>
+                    ${index < this._stepElements.length - 1
+                      ? html` <div class="step-connector ${isCompleted ? "completed" : ""}"></div> `
+                      : ""}
+                  `;
+                })}
+              </div>
+            `
+          : ""}
+        ${this.error
+          ? html`
+              <st-alert color="error" style="margin-bottom: var(--st-spacing-lg);">
+                <st-icon slot="icon" name="alert-triangle"></st-icon>
+                ${this.error}
+              </st-alert>
+            `
+          : ""}
+
+        <form @submit=${this._handleSubmit}>
+          <slot @slotchange=${this._handleSlotChange}></slot>
+
+          <div class="form-actions">
+            ${hasSteps && this._currentStepIndex > 0
+              ? html`
+                  <st-button
+                    variant="secondary"
+                    type="button"
+                    @click=${this._prevStep}
+                    ?disabled=${this.loading}
+                  >
+                    Back
+                  </st-button>
+                `
+              : ""}
+
+            <!-- Type is "button", but click triggers requestSubmit() on the internal form -->
+            <st-button
+              color="primary"
+              type="button"
+              @click=${this._triggerSubmission}
+              ?disabled=${this.loading}
+            >
+              ${this.loading ? "Submitting..." : isLastStep ? "Submit" : "Continue"}
+            </st-button>
+          </div>
+        </form>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-form": StForm;
+  }
+}