@sondor-technology/sondor-components 1.0.1-develop.6 → 1.0.1-develop.9

package/dist/components/checkbox/checkbox.d.ts

@@ -11,11 +11,14 @@ export declare class StCheckbox extends LitElement {
     disabled: boolean;
     invalid: boolean;
     required: boolean;
+    errorMessage: string;
     ariaLabel: string;
     constructor();
     static styles: import("lit").CSSResult[];
     updated(changedProperties: PropertyValues<this>): void;
     private _syncValidity;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
     formResetCallback(): void;
     private _handleChange;
     render(): import("lit-html").TemplateResult<1>;

package/dist/components/checkbox/checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAa,cAAc,EAAC,MAAM,KAAK,CAAC;AAI1D,qBACa,UAAW,SAAQ,UAAU;IACxC,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAO,CAAC,UAAU,CAAmB;IAErB,OAAO,CAAC,QAAQ,CAAoB;IAEX,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAChC,IAAI,SAAM;IAEzB,KAAK,SAAQ;IAEG,OAAO,UAAS;IAChB,aAAa,UAAS;IAEtB,QAAQ,UAAS;IACjB,OAAO,UAAS;IAChB,QAAQ,UAAS;IAEtB,SAAS,SAAM;IAEtD,cAaG;IAED,MAAM,CAAC,MAAM,4BAuHX;IAEO,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,QAYvD;IAED,OAAO,CAAC,aAAa;IASrB,iBAAiB,SAKhB;IAED,OAAO,CAAC,aAAa;IAcrB,MAAM,yCAyBL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAa,cAAc,EAAC,MAAM,KAAK,CAAC;AAI1D,qBACa,UAAW,SAAQ,UAAU;IACxC,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAO,CAAC,UAAU,CAAmB;IAErB,OAAO,CAAC,QAAQ,CAAoB;IAEX,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAChC,IAAI,SAAM;IACzB,KAAK,SAAQ;IAEG,OAAO,UAAS;IAChB,aAAa,UAAS;IAEtB,QAAQ,UAAS;IACjB,OAAO,UAAS;IAChB,QAAQ,UAAS;IACjC,YAAY,SAAM;IAEP,SAAS,SAAM;IAEpD,cAWC;IAED,MAAM,CAAC,MAAM,4BA6GX;IAEO,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,QAWvD;IAED,OAAO,CAAC,aAAa;IAmBd,aAAa,IAAI,OAAO,CAkB9B;IAEM,cAAc,IAAI,OAAO,CAK/B;IAED,iBAAiB,SAMhB;IAED,OAAO,CAAC,aAAa;IAkBrB,MAAM,yCAwBL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/dist/components/checkbox/checkbox.js

@@ -12,28 +12,25 @@ let StCheckbox = class StCheckbox extends LitElement {
         super();
         this.size = "md";
         this.name = "";
-        // Checkboxes default to 'on' natively if no value is provided
         this.value = "on";
         this.checked = false;
         this.indeterminate = false;
         this.disabled = false;
         this.invalid = false;
         this.required = false;
+        this.errorMessage = "";
         this.ariaLabel = "";
         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();
         });
     }
     updated(changedProperties) {
         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();
         }
@@ -44,11 +41,38 @@ let StCheckbox = class StCheckbox extends LitElement {
     _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);
+        }
+    }
+    checkValidity() {
+        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;
+    }
+    reportValidity() {
+        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());
     }
@@ -56,11 +80,13 @@ let StCheckbox = class StCheckbox extends LitElement {
         e.stopPropagation();
         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 }));
     }
     render() {
@@ -78,7 +104,6 @@ let StCheckbox = class StCheckbox extends LitElement {
           @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">
@@ -120,7 +145,6 @@ StCheckbox.styles = [
         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);
@@ -133,7 +157,6 @@ StCheckbox.styles = [
         border-width: 0;
       }
 
-      /* Custom Checkbox Box */
       .control {
         display: flex;
         align-items: center;
@@ -145,30 +168,25 @@ StCheckbox.styles = [
         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);
@@ -184,14 +202,12 @@ StCheckbox.styles = [
           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;
       }
@@ -200,7 +216,6 @@ StCheckbox.styles = [
         cursor: not-allowed;
       }
 
-      /* Invalid State */
       :host([invalid]) .control {
         border-color: var(--st-color-error);
       }
@@ -238,6 +253,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], StCheckbox.prototype, "required", void 0);
+__decorate([
+    property({ type: String })
+], StCheckbox.prototype, "errorMessage", void 0);
 __decorate([
     property({ attribute: "aria-label" })
 ], StCheckbox.prototype, "ariaLabel", void 0);

package/dist/components/form/form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../../src/components/form/form.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAK1C,MAAM,MAAM,UAAU,GAAG,UAAU,GAAG,YAAY,GAAG,QAAQ,CAAC;AAE9D,qBACa,MAAO,SAAQ,UAAU;IACK,MAAM,EAAE,UAAU,CAAc;IAC/B,OAAO,UAAS;IAChC,KAAK,SAAM;IAE5B,OAAO,CAAC,iBAAiB,CAAK;IAGvC,OAAO,CAAC,aAAa,CAAgB;IAEtB,OAAO,CAAC,OAAO,CAAmB;IAEjD,MAAM,CAAC,MAAM,4BA8IX;IAEF,OAAO,CAAC,iBAAiB;IAMzB,OAAO,CAAC,qBAAqB;IAO7B,OAAO,CAAC,uBAAuB;IA8B/B,OAAO,CAAC,kBAAkB;IAK1B,OAAO,CAAC,SAAS;IAOjB,OAAO,CAAC,gBAAgB;IAuCxB,OAAO,CAAC,aAAa;IA4BrB,MAAM,yCAkFL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}
+{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../../src/components/form/form.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAK1C,MAAM,MAAM,UAAU,GAAG,UAAU,GAAG,YAAY,GAAG,QAAQ,CAAC;AAE9D,qBACa,MAAO,SAAQ,UAAU;IACK,MAAM,EAAE,UAAU,CAAc;IAC/B,OAAO,UAAS;IAChC,KAAK,SAAM;IAE5B,OAAO,CAAC,iBAAiB,CAAK;IAGvC,OAAO,CAAC,aAAa,CAAgB;IAEtB,OAAO,CAAC,OAAO,CAAmB;IAEjD,MAAM,CAAC,MAAM,4BA8IX;IAEF,OAAO,CAAC,iBAAiB;IAMzB,OAAO,CAAC,qBAAqB;IAO7B,OAAO,CAAC,uBAAuB;IAoC/B,OAAO,CAAC,kBAAkB;IAK1B,OAAO,CAAC,SAAS;IAOjB,OAAO,CAAC,gBAAgB;IAuCxB,OAAO,CAAC,aAAa;IA4BrB,MAAM,yCAkFL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}

package/dist/components/form/form.js

@@ -27,13 +27,12 @@ let StForm = class StForm extends LitElement {
         this.requestUpdate();
     }
     _validateCurrentContext() {
-        if (this._stepElements.length === 0) {
-            return this._formEl.checkValidity();
-        }
-        const currentStep = this._stepElements[this._currentStepIndex];
+        const scope = this._stepElements.length > 0
+            ? this._stepElements[this._currentStepIndex]
+            : this;
         let isValid = true;
-        // Find all custom and native form inputs assigned to the current step
-        const inputs = Array.from(currentStep.querySelectorAll("*"));
+        // Find all elements that expose validation functions (e.g. checkValidity / reportValidity)
+        const inputs = Array.from(scope.querySelectorAll("*"));
         for (const input of inputs) {
             if (typeof input.checkValidity === "function") {
                 if (!input.checkValidity()) {
@@ -45,6 +44,12 @@ let StForm = class StForm extends LitElement {
                 }
             }
         }
+        // Also check standard form elements if not using steps
+        if (this._stepElements.length === 0 && this._formEl) {
+            if (!this._formEl.checkValidity()) {
+                isValid = false;
+            }
+        }
         return isValid;
     }
     _triggerSubmission() {

package/dist/components/icon/icon.d.ts

@@ -1,8 +1,9 @@
 import { LitElement } from 'lit';
 import { IconName } from './icon-paths.js';
+export type IconVariant = 'outline' | 'solid';
 export declare class StIcon extends LitElement {
     name: IconName | string;
-    variant: 'outline' | 'solid';
+    variant: IconVariant;
     color: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
     size: 'sm' | 'md' | 'lg' | 'xl';
     static styles: import("lit").CSSResult[];

package/dist/components/icon/icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../src/components/icon/icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,EAAa,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAGtD,qBACa,MAAO,SAAQ,UAAU;IACR,IAAI,EAAE,QAAQ,GAAG,MAAM,CAAM;IAC7B,OAAO,EAAE,SAAS,GAAG,OAAO,CAAa;IAG1B,KAAK,EAAE,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAa;IAGlG,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAElF,MAAM,CAAC,MAAM,4BAsCX;IAEF,MAAM,yCAmBL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../src/components/icon/icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,EAAa,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAGtD,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,OAAO,CAAC;AAE9C,qBACa,MAAO,SAAQ,UAAU;IACR,IAAI,EAAE,QAAQ,GAAG,MAAM,CAAM;IAC7B,OAAO,EAAE,WAAW,CAAa;IAGlB,KAAK,EAAE,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAa;IAGlG,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAElF,MAAM,CAAC,MAAM,4BAsCX;IAEF,MAAM,yCAmBL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}

package/dist/components/modal/modal.d.ts

@@ -8,10 +8,21 @@ export declare class StModal extends LitElement {
      * Title text displayed in the modal header.
      */
     heading: string;
+    /**
+     * Size of the modal (sm, md, lg, xl, xxl).
+     */
+    size: 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+    /**
+     * If true, the modal cannot be closed by clicking the backdrop or pressing Esc.
+     */
+    static: boolean;
     private dialogEl;
+    private isClosing;
     static styles: import("lit").CSSResult[];
     updated(changedProperties: PropertyValues): void;
+    private closeWithAnimation;
     private handleClose;
+    private handleCancel;
     private onDialogClose;
     private handleBackdropClick;
     render(): import("lit-html").TemplateResult<1>;

package/dist/components/modal/modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/components/modal/modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAI5D,qBACa,OAAQ,SAAQ,UAAU;IACrC;;OAEG;IACyC,IAAI,UAAS;IAEzD;;OAEG;IACyB,OAAO,SAAM;IAExB,OAAO,CAAC,QAAQ,CAAqB;IAEtD,MAAM,CAAC,MAAM,4BAwEX;IAEF,OAAO,CAAC,iBAAiB,EAAE,cAAc,QAUxC;IAED,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,mBAAmB;IAY3B,MAAM,yCAuBL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/components/modal/modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,cAAc,EAAW,MAAM,KAAK,CAAC;AAIrE,qBACa,OAAQ,SAAQ,UAAU;IACrC;;OAEG;IACyC,IAAI,UAAS;IAEzD;;OAEG;IACyB,OAAO,SAAM;IAEzC;;OAEG;IACyB,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAQ;IAE3E;;OAEG;IAC0B,MAAM,UAAS;IAE3B,OAAO,CAAC,QAAQ,CAAqB;IAEtD,OAAO,CAAC,SAAS,CAAS;IAE1B,MAAM,CAAC,MAAM,4BAkHX;IAEF,OAAO,CAAC,iBAAiB,EAAE,cAAc,QAYxC;IAED,OAAO,CAAC,kBAAkB;IAiB1B,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,mBAAmB;IAe3B,MAAM,yCA4BL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

package/dist/components/modal/modal.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { LitElement, html, css } from 'lit';
+import { LitElement, html, css, nothing } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { resetStyles } from '../../styles/reset.js';
 let StModal = class StModal extends LitElement {
@@ -18,23 +18,55 @@ let StModal = class StModal extends LitElement {
          * Title text displayed in the modal header.
          */
         this.heading = '';
+        /**
+         * Size of the modal (sm, md, lg, xl, xxl).
+         */
+        this.size = 'md';
+        /**
+         * If true, the modal cannot be closed by clicking the backdrop or pressing Esc.
+         */
+        this.static = false;
+        this.isClosing = false;
     }
     updated(changedProperties) {
         if (changedProperties.has('open')) {
-            if (this.dialogEl) {
-                if (this.open && !this.dialogEl.open) {
+            if (this.open) {
+                this.dialogEl.classList.remove('closing');
+                this.isClosing = false;
+                if (!this.dialogEl.open) {
                     this.dialogEl.showModal();
                 }
-                else if (!this.open && this.dialogEl.open) {
-                    this.dialogEl.close();
-                }
+            }
+            else if (this.dialogEl.open && !this.isClosing) {
+                this.closeWithAnimation();
             }
         }
     }
+    closeWithAnimation() {
+        if (this.isClosing)
+            return;
+        this.isClosing = true;
+        this.dialogEl.classList.add('closing');
+        const onAnimationEnd = () => {
+            this.dialogEl.removeEventListener('animationend', onAnimationEnd);
+            this.dialogEl.classList.remove('closing');
+            this.isClosing = false;
+            if (!this.open) {
+                this.dialogEl.close();
+            }
+        };
+        this.dialogEl.addEventListener('animationend', onAnimationEnd);
+    }
     handleClose() {
         this.open = false;
         this.dispatchEvent(new CustomEvent('st-close', { bubbles: true, composed: true }));
     }
+    handleCancel(e) {
+        e.preventDefault();
+        if (!this.static) {
+            this.handleClose();
+        }
+    }
     onDialogClose() {
         if (this.open) {
             this.open = false;
@@ -42,28 +74,36 @@ let StModal = class StModal extends LitElement {
         }
     }
     handleBackdropClick(e) {
+        if (this.static)
+            return;
         const rect = this.dialogEl.getBoundingClientRect();
-        if (e.clientX < rect.left ||
+        const clickedOutside = e.clientX < rect.left ||
             e.clientX > rect.right ||
             e.clientY < rect.top ||
-            e.clientY > rect.bottom) {
+            e.clientY > rect.bottom;
+        if (clickedOutside) {
             this.handleClose();
         }
     }
     render() {
         return html `
       <dialog 
-        @cancel=${this.handleClose} 
+        class="size-${this.size}"
+        aria-labelledby=${this.heading ? 'modal-heading' : nothing}
+        @cancel=${this.handleCancel} 
         @click=${this.handleBackdropClick} 
         @close=${this.onDialogClose}
       >
         <div class="modal-header" @click=${(e) => e.stopPropagation()}>
           <slot name="header">
-            <h3 class="modal-title">${this.heading}</h3>
+            <h3 class="modal-title" id="modal-heading">${this.heading}</h3>
           </slot>
-          <button class="close-btn" @click=${this.handleClose} aria-label="Close modal">
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-          </button>
+          
+          ${!this.static ? html `
+            <button class="close-btn" @click=${this.handleClose} aria-label="Close modal">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+            </button>
+          ` : nothing}
         </div>
         <div class="modal-body" @click=${(e) => e.stopPropagation()}>
           <slot></slot>
@@ -88,17 +128,59 @@ StModal.styles = [
         border-radius: var(--st-radius-lg, 0.5rem);
         background-color: var(--st-color-surface);
         color: var(--st-color-text);
-        width: 100%;
-        max-width: 500px;
+        
+        /* Responsive width calculation */
+        width: calc(100% - 2rem);
+        margin: auto;
+        
         box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
         font-family: var(--st-font-family, inherit);
       }
 
+      /* Sizes */
+      dialog.size-sm { max-width: 400px; }
+      dialog.size-md { max-width: 500px; }
+      dialog.size-lg { max-width: 800px; }
+      dialog.size-xl { max-width: 1024px; }
+      dialog.size-xxl { max-width: 1280px; }
+
       dialog::backdrop {
         background-color: rgba(0, 0, 0, 0.5);
         backdrop-filter: blur(2px);
       }
 
+      /* Animations */
+      @keyframes fade-in {
+        from { opacity: 0; }
+        to { opacity: 1; }
+      }
+      @keyframes fade-out {
+        from { opacity: 1; }
+        to { opacity: 0; }
+      }
+      @keyframes slide-up {
+        from { opacity: 0; transform: translateY(20px) scale(0.95); }
+        to { opacity: 1; transform: translateY(0) scale(1); }
+      }
+      @keyframes slide-down {
+        from { opacity: 1; transform: translateY(0) scale(1); }
+        to { opacity: 0; transform: translateY(20px) scale(0.95); }
+      }
+
+      dialog[open] {
+        animation: slide-up 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+      }
+      dialog[open]::backdrop {
+        animation: fade-in 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+      }
+      
+      dialog.closing {
+        animation: slide-down 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+      }
+      dialog.closing::backdrop {
+        animation: fade-out 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+      }
+
       .modal-header {
         display: flex;
         align-items: center;
@@ -154,6 +236,12 @@ __decorate([
 __decorate([
     property({ type: String })
 ], StModal.prototype, "heading", void 0);
+__decorate([
+    property({ type: String })
+], StModal.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean })
+], StModal.prototype, "static", void 0);
 __decorate([
     query('dialog')
 ], StModal.prototype, "dialogEl", void 0);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sondor-technology/sondor-components",
-  "version": "1.0.1-develop.6",
+  "version": "1.0.1-develop.9",
   "description": "",
   "main": "src/index.js",
   "types": "dist/index.d.ts",

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/form/form.ts

@@ -176,20 +176,19 @@ export class StForm extends LitElement {
   }
 
   private _validateCurrentContext(): boolean {
-    if (this._stepElements.length === 0) {
-      return this._formEl.checkValidity();
-    }
+    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
+    // Find all elements that expose validation functions (e.g. checkValidity / reportValidity)
     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()) {
@@ -202,6 +201,13 @@ export class StForm extends LitElement {
       }
     }
 
+    // Also check standard form elements if not using steps
+    if (this._stepElements.length === 0 && this._formEl) {
+      if (!this._formEl.checkValidity()) {
+        isValid = false;
+      }
+    }
+
     return isValid;
   }
 
@@ -373,4 +379,4 @@ declare global {
   interface HTMLElementTagNameMap {
     "st-form": StForm;
   }
-}
+}

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/modal/modal.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, css, PropertyValues } from 'lit';
+import { LitElement, html, css, PropertyValues, nothing } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { resetStyles } from '../../styles/reset.js';
 
@@ -14,8 +14,20 @@ export class StModal extends LitElement {
    */
   @property({ type: String }) heading = '';
 
+  /**
+   * Size of the modal (sm, md, lg, xl, xxl).
+   */
+  @property({ type: String }) size: 'sm' | 'md' | 'lg' | 'xl' | 'xxl' = 'md';
+
+  /**
+   * If true, the modal cannot be closed by clicking the backdrop or pressing Esc.
+   */
+  @property({ type: Boolean }) static = false;
+
   @query('dialog') private dialogEl!: HTMLDialogElement;
 
+  private isClosing = false;
+
   static styles = [
     resetStyles,
     css`
@@ -29,17 +41,59 @@ export class StModal extends LitElement {
         border-radius: var(--st-radius-lg, 0.5rem);
         background-color: var(--st-color-surface);
         color: var(--st-color-text);
-        width: 100%;
-        max-width: 500px;
+        
+        /* Responsive width calculation */
+        width: calc(100% - 2rem);
+        margin: auto;
+        
         box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
         font-family: var(--st-font-family, inherit);
       }
 
+      /* Sizes */
+      dialog.size-sm { max-width: 400px; }
+      dialog.size-md { max-width: 500px; }
+      dialog.size-lg { max-width: 800px; }
+      dialog.size-xl { max-width: 1024px; }
+      dialog.size-xxl { max-width: 1280px; }
+
       dialog::backdrop {
         background-color: rgba(0, 0, 0, 0.5);
         backdrop-filter: blur(2px);
       }
 
+      /* Animations */
+      @keyframes fade-in {
+        from { opacity: 0; }
+        to { opacity: 1; }
+      }
+      @keyframes fade-out {
+        from { opacity: 1; }
+        to { opacity: 0; }
+      }
+      @keyframes slide-up {
+        from { opacity: 0; transform: translateY(20px) scale(0.95); }
+        to { opacity: 1; transform: translateY(0) scale(1); }
+      }
+      @keyframes slide-down {
+        from { opacity: 1; transform: translateY(0) scale(1); }
+        to { opacity: 0; transform: translateY(20px) scale(0.95); }
+      }
+
+      dialog[open] {
+        animation: slide-up 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+      }
+      dialog[open]::backdrop {
+        animation: fade-in 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+      }
+      
+      dialog.closing {
+        animation: slide-down 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+      }
+      dialog.closing::backdrop {
+        animation: fade-out 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+      }
+
       .modal-header {
         display: flex;
         align-items: center;
@@ -92,21 +146,47 @@ export class StModal extends LitElement {
 
   updated(changedProperties: PropertyValues) {
     if (changedProperties.has('open')) {
-      if (this.dialogEl) {
-        if (this.open && !this.dialogEl.open) {
+      if (this.open) {
+        this.dialogEl.classList.remove('closing');
+        this.isClosing = false;
+        if (!this.dialogEl.open) {
           this.dialogEl.showModal();
-        } else if (!this.open && this.dialogEl.open) {
-          this.dialogEl.close();
         }
+      } else if (this.dialogEl.open && !this.isClosing) {
+        this.closeWithAnimation();
       }
     }
   }
 
+  private closeWithAnimation() {
+    if (this.isClosing) return;
+    this.isClosing = true;
+    this.dialogEl.classList.add('closing');
+    
+    const onAnimationEnd = () => {
+      this.dialogEl.removeEventListener('animationend', onAnimationEnd);
+      this.dialogEl.classList.remove('closing');
+      this.isClosing = false;
+      if (!this.open) {
+        this.dialogEl.close();
+      }
+    };
+    
+    this.dialogEl.addEventListener('animationend', onAnimationEnd);
+  }
+
   private handleClose() {
     this.open = false;
     this.dispatchEvent(new CustomEvent('st-close', { bubbles: true, composed: true }));
   }
 
+  private handleCancel(e: Event) {
+    e.preventDefault(); 
+    if (!this.static) {
+      this.handleClose();
+    }
+  }
+
   private onDialogClose() {
     if (this.open) {
       this.open = false;
@@ -115,13 +195,16 @@ export class StModal extends LitElement {
   }
 
   private handleBackdropClick(e: MouseEvent) {
+    if (this.static) return;
+
     const rect = this.dialogEl.getBoundingClientRect();
-    if (
+    const clickedOutside = 
       e.clientX < rect.left ||
       e.clientX > rect.right ||
       e.clientY < rect.top ||
-      e.clientY > rect.bottom
-    ) {
+      e.clientY > rect.bottom;
+
+    if (clickedOutside) {
       this.handleClose();
     }
   }
@@ -129,17 +212,22 @@ export class StModal extends LitElement {
   render() {
     return html`
       <dialog 
-        @cancel=${this.handleClose} 
+        class="size-${this.size}"
+        aria-labelledby=${this.heading ? 'modal-heading' : nothing}
+        @cancel=${this.handleCancel} 
         @click=${this.handleBackdropClick} 
         @close=${this.onDialogClose}
       >
         <div class="modal-header" @click=${(e: MouseEvent) => e.stopPropagation()}>
           <slot name="header">
-            <h3 class="modal-title">${this.heading}</h3>
+            <h3 class="modal-title" id="modal-heading">${this.heading}</h3>
           </slot>
-          <button class="close-btn" @click=${this.handleClose} aria-label="Close modal">
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-          </button>
+          
+          ${!this.static ? html`
+            <button class="close-btn" @click=${this.handleClose} aria-label="Close modal">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+            </button>
+          ` : nothing}
         </div>
         <div class="modal-body" @click=${(e: MouseEvent) => e.stopPropagation()}>
           <slot></slot>