@sondor-technology/sondor-components 1.0.0 → 1.0.1-develop.11

package/src/components/drawer/drawer.ts

@@ -1,218 +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;
-  }
+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

@@ -1,31 +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;
-  }
+import { LitElement, html, css } from 'lit';
+import { customElement, } from 'lit/decorators.js';
+import { resetStyles } from '../../styles/reset.js';
+
+@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

@@ -1,58 +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>
-    `;
-  }
-}
+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

@@ -1,32 +1,36 @@
-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;
-  }
-}
+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;
+  
+  // Declare the validate function property (attribute: false prevents reflection of functions to DOM attributes)
+  @property({attribute: false})
+  validate?: () => Promise<boolean> | boolean;
+
+  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;
+  }
+}