@sondor-technology/sondor-components 1.0.0-1165-initial-setup.11 → 1.0.1-develop.10

package/dist/components/vertical-nav/vertical-nav-item.d.ts

@@ -2,7 +2,13 @@ import { LitElement } from 'lit';
 export declare class StNavItem extends LitElement {
     href: string;
     active: boolean;
+    depth: number;
     static styles: import("lit").CSSResult[];
     render(): import("lit-html").TemplateResult<1>;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'st-vertical-nav-item': StNavItem;
+    }
+}
 //# sourceMappingURL=vertical-nav-item.d.ts.map

package/dist/components/vertical-nav/vertical-nav-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vertical-nav-item.d.ts","sourceRoot":"","sources":["../../../src/components/vertical-nav/vertical-nav-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,qBACa,SAAU,SAAQ,UAAU;IACX,IAAI,SAAO;IACK,MAAM,UAAS;IAE3D,MAAM,CAAC,MAAM,4BA+BX;IAEF,MAAM,yCAML;CACF"}
+{"version":3,"file":"vertical-nav-item.d.ts","sourceRoot":"","sources":["../../../src/components/vertical-nav/vertical-nav-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,qBACa,SAAU,SAAQ,UAAU;IACX,IAAI,SAAO;IACK,MAAM,UAAS;IAC/B,KAAK,SAAK;IAEtC,MAAM,CAAC,MAAM,4BA8CX;IAEF,MAAM,yCAOL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,SAAS,CAAC;KACnC;CACF"}

package/dist/components/vertical-nav/vertical-nav-item.js

@@ -12,10 +12,12 @@ let StNavItem = class StNavItem extends LitElement {
         super(...arguments);
         this.href = '#';
         this.active = false;
+        this.depth = 0;
     }
     render() {
         return html `
-      <a href=${this.href} part="link">
+      <a href=${this.href} part="link" style="--nav-depth: ${this.depth}">
+        <slot name="icon"></slot>
         <slot></slot>
       </a>
     `;
@@ -26,30 +28,45 @@ StNavItem.styles = [
     css `
       :host {
         display: block;
+        overflow: hidden;
       }
 
       a {
         display: flex;
         align-items: center;
-        padding: 6px var(--st-spacing-lg);
+        gap: var(--st-spacing-sm, 8px);
+        width: 100%;
+        box-sizing: border-box;
+        padding: 8px var(--st-spacing-xl);
+        padding-left: calc(var(--st-spacing-xl, 24px) + (var(--nav-depth, 0) * 16px));
         color: var(--st-color-text-muted);
         font-size: var(--st-font-size-sm);
         text-decoration: none;
-        border-left: 2px solid transparent;
+        border-left: 3px solid transparent;
         transition: all 0.15s ease;
+
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
 
       a:hover {
         color: var(--st-color-text);
-        background-color: var(--st-color-surface);
+        background-color: var(--st-color-surface-hover, rgba(0,0,0,0.03));
+      }
+
+      ::slotted([slot="icon"]) {
+        width: 1rem;
+        height: 1rem;
+        flex-shrink: 0;
+        color: inherit;
       }
 
-      /* Active state: Purple text with a left border indicator */
       :host([active]) a {
         color: var(--st-color-primary);
         border-left-color: var(--st-color-primary);
-        font-weight: var(--st-font-weight-medium);
-        background-color: transparent;
+        font-weight: var(--st-font-weight-bold);
+        background-color: var(--st-color-primary-light, rgba(98, 0, 238, 0.05));
       }
     `
 ];
@@ -59,6 +76,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], StNavItem.prototype, "active", void 0);
+__decorate([
+    property({ type: Number })
+], StNavItem.prototype, "depth", void 0);
 StNavItem = __decorate([
     customElement('st-vertical-nav-item')
 ], StNavItem);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sondor-technology/sondor-components",
-  "version": "1.0.0-1165-initial-setup.11",
+  "version": "1.0.1-develop.10",
   "description": "",
   "main": "src/index.js",
   "types": "dist/index.d.ts",
@@ -101,6 +101,10 @@
       "types": "./dist/components/icon/icon.d.ts",
       "default": "./dist/components/icon/icon.js"
     },
+    "./icon-paths": {
+      "types": "./dist/components/icon/icon-paths.d.ts",
+      "default": "./dist/components/icon/icon-paths.js"
+    },
     "./footer": {
       "types": "./dist/components/footer/footer.d.ts",
       "default": "./dist/components/footer/footer.js"

package/src/components/checkbox/checkbox.ts

@@ -11,7 +11,6 @@ export class StCheckbox extends LitElement {
 
   @property({type: String, reflect: true}) size: "sm" | "md" | "lg" = "md";
   @property({type: String, reflect: true}) name = "";
-  // Checkboxes default to 'on' natively if no value is provided
   @property({type: String}) value = "on";
 
   @property({type: Boolean, reflect: true}) checked = false;
@@ -20,21 +19,20 @@ export class StCheckbox extends LitElement {
   @property({type: Boolean, reflect: true}) disabled = false;
   @property({type: Boolean, reflect: true}) invalid = false;
   @property({type: Boolean, reflect: true}) required = false;
+  @property({type: String}) errorMessage = "";
 
   @property({attribute: "aria-label"}) ariaLabel = "";
 
-constructor() {
+  constructor() {
     super();
     this._internals = this.attachInternals();
 
-    // 1. Trigger error state if the user clicks away and the field is invalid
     this.addEventListener('focusout', () => {
-      this.invalid = !this._inputEl.validity.valid;
+      this.invalid = !this.checkValidity();
     });
 
-    // 2. Trigger error state if the st-form tries to submit and fails
     this.addEventListener('invalid', () => {
-      this.invalid = true;
+      this.invalid = !this.checkValidity();
     });
   }
 
@@ -67,7 +65,6 @@ constructor() {
         font-size: var(--st-font-size-base);
       }
 
-      /* Visually hide the native input but keep it in the DOM for focus/screen readers */
       input {
         position: absolute;
         width: var(--checkbox-size);
@@ -80,7 +77,6 @@ constructor() {
         border-width: 0;
       }
 
-      /* Custom Checkbox Box */
       .control {
         display: flex;
         align-items: center;
@@ -92,30 +88,25 @@ constructor() {
         background-color: var(--st-color-bg);
         transition: all 0.2s ease;
         flex-shrink: 0;
-        /* Aligns the box nicely with standard text line-height */
         margin-top: 0.125rem;
       }
 
-      /* Hover State */
       label:hover .control {
         border-color: var(--st-color-primary-hover);
       }
 
-      /* Focus State */
       input:focus-visible + .control {
         box-shadow:
           0 0 0 2px var(--st-color-bg),
           0 0 0 4px var(--st-color-primary);
       }
 
-      /* Checked & Indeterminate States */
       :host([checked]) .control,
       :host([indeterminate]) .control {
         border-color: var(--st-color-primary);
         background-color: var(--st-color-primary);
       }
 
-      /* SVG Icons */
       svg {
         width: var(--checkbox-icon-size);
         height: var(--checkbox-icon-size);
@@ -131,14 +122,12 @@ constructor() {
           opacity 0.2s ease;
       }
 
-      /* Reveal Icons */
       :host([checked]) svg.icon-check,
       :host([indeterminate]) svg.icon-minus {
         opacity: 1;
         transform: scale(1);
       }
 
-      /* Disabled State */
       :host([disabled]) {
         pointer-events: none;
       }
@@ -147,7 +136,6 @@ constructor() {
         cursor: not-allowed;
       }
 
-      /* Invalid State */
       :host([invalid]) .control {
         border-color: var(--st-color-error);
       }
@@ -162,8 +150,7 @@ constructor() {
   override updated(changedProperties: PropertyValues<this>) {
     super.updated(changedProperties);
 
-    if (changedProperties.has("checked") || changedProperties.has("value")) {
-      // Form API: If checked, submit the value. If unchecked, submit null to remove it from FormData.
+    if (changedProperties.has("checked") || changedProperties.has("value") || changedProperties.has("errorMessage")) {
       this._internals.setFormValue(this.checked ? this.value : null);
       this._syncValidity();
     }
@@ -175,16 +162,54 @@ constructor() {
 
   private _syncValidity() {
     if (!this._inputEl) return;
-    this._internals.setValidity(
-      this._inputEl.validity,
-      this._inputEl.validationMessage,
-      this._inputEl,
-    );
+
+    if (this.required && !this.checked) {
+      const message = this.errorMessage || this._inputEl.validationMessage || "Please check this box if you want to proceed.";
+      this._internals.setValidity(
+        {valueMissing: true},
+        message,
+        this._inputEl,
+      );
+    } else {
+      this._internals.setValidity(
+        this._inputEl.validity,
+        this._inputEl.validationMessage,
+        this._inputEl,
+      );
+    }
+  }
+
+  public checkValidity(): boolean {
+    if (!this._inputEl) return true;
+
+    if (this.required && !this.checked) {
+      const message = this.errorMessage || this._inputEl.validationMessage || "Please check this box if you want to proceed.";
+      this._internals.setValidity(
+        {valueMissing: true},
+        message,
+        this._inputEl,
+      );
+      this.invalid = true;
+      return false;
+    }
+
+    const isValid = this._inputEl.checkValidity();
+    this._syncValidity();
+    this.invalid = !isValid;
+    return isValid;
+  }
+
+  public reportValidity(): boolean {
+    this._syncValidity();
+    const isValid = this._internals.reportValidity();
+    this.invalid = !isValid;
+    return isValid;
   }
 
   formResetCallback() {
     this.checked = false;
     this.indeterminate = false;
+    this.invalid = false;
     this._internals.setFormValue(null);
     this.updateComplete.then(() => this._syncValidity());
   }
@@ -194,12 +219,16 @@ constructor() {
 
     if (this.disabled) return;
 
-    // Standard native behavior: clicking an indeterminate checkbox unsets the indeterminate state
     if (this.indeterminate) {
       this.indeterminate = false;
     }
 
     this.checked = this._inputEl.checked;
+    
+    if (this.checkValidity()) {
+      this.invalid = false;
+    }
+
     this.dispatchEvent(new Event("change", {bubbles: true, composed: true}));
   }
 
@@ -218,7 +247,6 @@ constructor() {
           @change=${this._handleChange}
         />
         <div class="control">
-          <!-- Render both SVGs and use CSS to conditionally reveal them based on host attributes -->
           ${this.indeterminate
             ? html`<svg class="icon-minus" viewBox="0 0 24 24"><path d="M5 12h14"></path></svg>`
             : html`<svg class="icon-check" viewBox="0 0 24 24">
@@ -235,4 +263,4 @@ declare global {
   interface HTMLElementTagNameMap {
     "st-checkbox": StCheckbox;
   }
-}
+}

package/src/components/divider/divider.ts

@@ -1,6 +1,6 @@
 import { LitElement, html, css } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { resetStyles } from '../../styles/reset';
+import { resetStyles } from '../../styles/reset.js';
 
 @customElement('st-divider')
 export class StDivider extends LitElement {

package/src/components/field/field.ts

@@ -1,6 +1,6 @@
 import { LitElement, html, css } from 'lit';
 import { customElement, } from 'lit/decorators.js';
-import { resetStyles } from '../../styles/reset';
+import { resetStyles } from '../../styles/reset.js';
 
 @customElement('st-field')
 export class StField extends LitElement {

package/src/components/form/form.ts

@@ -31,9 +31,6 @@ export class StForm extends LitElement {
         gap: var(--st-spacing-md);
       }
 
-      /* ==========================================================
-         Layouts
-         ========================================================== */
       :host([layout="vertical"]) form {
         flex-direction: column;
       }
@@ -55,9 +52,6 @@ export class StForm extends LitElement {
         flex-direction: column;
       }
 
-      /* ==========================================================
-         Progress Navigation
-         ========================================================== */
       .progress-nav {
         display: flex;
         align-items: center;
@@ -121,9 +115,6 @@ export class StForm extends LitElement {
         background-color: var(--st-color-success);
       }
 
-      /* ==========================================================
-         Actions & States
-         ========================================================== */
       .form-actions {
         display: flex;
         gap: var(--st-spacing-md);
@@ -175,25 +166,23 @@ export class StForm extends LitElement {
     this.requestUpdate();
   }
 
-  private _validateCurrentContext(): boolean {
-    if (this._stepElements.length === 0) {
-      return this._formEl.checkValidity();
-    }
+  private async _validateCurrentContext(): Promise<boolean> {
+    const scope: ParentNode = this._stepElements.length > 0
+      ? this._stepElements[this._currentStepIndex]
+      : this;
 
-    const currentStep = this._stepElements[this._currentStepIndex];
     let isValid = true;
 
-    // Find all custom and native form inputs assigned to the current step
+    // 1. Validate standard DOM input components
     const inputs = Array.from(
-      currentStep.querySelectorAll<
-        HTMLElement & {checkValidity?: () => boolean; reportValidity?: () => void}
+      scope.querySelectorAll<
+        HTMLElement & {checkValidity?: () => boolean; reportValidity?: () => boolean}
       >("*"),
     );
-
+    
     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();
           }
@@ -202,11 +191,37 @@ export class StForm extends LitElement {
       }
     }
 
+    if (this._stepElements.length === 0 && this._formEl) {
+      if (!this._formEl.checkValidity()) {
+        isValid = false;
+      }
+    }
+
+    // 2. Execute step-level async/sync validation hook if defined
+    if (isValid && this._stepElements.length > 0) {
+      const currentStep = this._stepElements[this._currentStepIndex] as StFormStep & {
+        validate?: () => Promise<boolean> | boolean;
+      };
+
+      if (typeof currentStep.validate === "function") {
+        try {
+          this.loading = true;
+          const stepPassed = await currentStep.validate();
+          if (!stepPassed) {
+            isValid = false;
+          }
+        } catch (err) {
+          isValid = false;
+        } finally {
+          this.loading = false;
+        }
+      }
+    }
+
     return isValid;
   }
 
   private _triggerSubmission() {
-    // HTML5 method that triggers form validation and fires the native submit event
     this._formEl.requestSubmit();
   }
 
@@ -220,13 +235,11 @@ export class StForm extends LitElement {
   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 =
@@ -236,7 +249,6 @@ export class StForm extends LitElement {
         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");
         }
@@ -245,10 +257,8 @@ export class StForm extends LitElement {
         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);
       }
     });
@@ -256,11 +266,12 @@ export class StForm extends LitElement {
     return formData;
   }
 
-  private _handleSubmit(e: Event) {
+  private async _handleSubmit(e: Event) {
     e.preventDefault();
     e.stopPropagation();
 
-    if (!this._validateCurrentContext()) return;
+    const isValid = await this._validateCurrentContext();
+    if (!isValid) return;
 
     const hasSteps = this._stepElements.length > 0;
     const isLastStep = hasSteps ? this._currentStepIndex === this._stepElements.length - 1 : true;
@@ -271,7 +282,6 @@ export class StForm extends LitElement {
       return;
     }
 
-    // Use our custom extractor to pierce the Shadow DOM boundary
     const formData = this._extractFormData();
 
     this.dispatchEvent(
@@ -353,7 +363,6 @@ export class StForm extends LitElement {
                 `
               : ""}
 
-            <!-- Type is "button", but click triggers requestSubmit() on the internal form -->
             <st-button
               color="primary"
               type="button"
@@ -373,4 +382,4 @@ declare global {
   interface HTMLElementTagNameMap {
     "st-form": StForm;
   }
-}
+}

package/src/components/icon/icon-paths.ts

@@ -119,6 +119,22 @@ export const iconPaths = {
     outline: svg`<rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" stroke-width="2" fill="none"></rect><line x1="3" y1="8" x2="21" y2="8" stroke="currentColor" stroke-width="2"></line><line x1="7" y1="8" x2="7" y2="21" stroke="currentColor" stroke-width="2"></line><line x1="17" y1="8" x2="17" y2="21" stroke="currentColor" stroke-width="2"></line><line x1="10" y1="14" x2="14" y2="14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></line>`,
     solid: svg`<path fill="currentColor" d="M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5zm2 3h14V5H5v3zM7 9H3v12h4V9zm14 0h-4v12h4V9z"></path>`,
   },
+  calender: {
+    outline: svg`<rect x="3" y="4" width="18" height="18" rx="2" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></rect><line x1="16" y1="2" x2="16" y2="6" stroke="currentColor" stroke-width="2" stroke-linecap="round"></line><line x1="8" y1="2" x2="8" y2="6" stroke="currentColor" stroke-width="2" stroke-linecap="round"></line><line x1="3" y1="10" x2="21" y2="10" stroke="currentColor" stroke-width="2"></line>`,
+    solid: svg`<path fill="currentColor" d="M19 4h-1V2h-2v2H8V2H6v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V9h14v11z"></path>`,
+  },
+  user: {
+    outline: svg`<circle cx="12" cy="8" r="4" fill="none" stroke="currentColor" stroke-width="2"></circle><path d="M4 20c0-4 4-6 8-6s8 2 8 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>`,
+    solid: svg`<path fill="currentColor" d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-3.33 0-10 1.67-10 5v3h20v-3c0-3.33-6.67-5-10-5z"></path>`,
+  },
+  home: {
+    outline: svg`<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><polyline points="9 22 9 12 15 12 15 22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></polyline>`,
+    solid: svg`<path fill="currentColor" d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"></path>`,
+  },
+  "circle-cross": {
+    outline: svg`<circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></circle><line x1="15" y1="9" x2="9" y2="15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></line><line x1="9" y1="9" x2="15" y2="15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></line>`,
+    solid: svg`<path fill="currentColor" fill-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm3.36 6.64a1 1 0 0 1 0 1.41L13.41 12l1.95 1.95a1 1 0 0 1-1.41 1.41L12 13.41l-1.95 1.95a1 1 0 0 1-1.41-1.41L10.59 12 8.64 10.05a1 1 0 0 1 1.41-1.41L12 10.59l1.95-1.95a1 1 0 0 1 1.41 0z" clip-rule="evenodd"></path>`,
+  },
 };
 
 export type IconName = keyof typeof iconPaths;

package/src/components/icon/icon.ts

@@ -3,10 +3,12 @@ import { customElement, property } from 'lit/decorators.js';
 import { iconPaths, IconName } from './icon-paths.js';
 import { resetStyles } from '../../styles/reset.js';
 
+export type IconVariant = 'outline' | 'solid';
+
 @customElement('st-icon')
 export class StIcon extends LitElement {
   @property({ type: String }) name: IconName | string = '';
-  @property({ type: String }) variant: 'outline' | 'solid' = 'outline';
+  @property({ type: String }) variant: IconVariant = 'outline';
   
   // Semantic Colors
   @property({ type: String, reflect: true }) color: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' = 'default';

package/src/components/link/link.ts

@@ -1,6 +1,6 @@
 import { LitElement, html, css } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { resetStyles } from '../../styles/reset';
+import { resetStyles } from '../../styles/reset.js';
 
 @customElement('st-link')
 export class StLink extends LitElement {