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

package/dist/components/divider/divider.d.ts

@@ -0,0 +1,16 @@
+import { LitElement } from 'lit';
+export declare class StDivider extends LitElement {
+    direction: 'horizontal' | 'vertical';
+    thickness: string;
+    margin: string;
+    color: 'default' | 'primary' | 'border';
+    static styles: import("lit").CSSResult[];
+    updated(changedProperties: Map<string, any>): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'st-divider': StDivider;
+    }
+}
+//# sourceMappingURL=divider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"divider.d.ts","sourceRoot":"","sources":["../../../src/components/divider/divider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,qBACa,SAAU,SAAQ,UAAU;IACI,SAAS,EAAE,YAAY,GAAG,UAAU,CAAgB;IACnE,SAAS,SAAS;IAClB,MAAM,SAAO;IACE,KAAK,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAY;IAE9F,MAAM,CAAC,MAAM,4BAgCX;IAEF,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC,QAM1C;IAED,MAAM,yCAQL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

package/dist/components/divider/divider.js

@@ -0,0 +1,82 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 { customElement, property } from 'lit/decorators.js';
+import { resetStyles } from '../../styles/reset.js';
+let StDivider = class StDivider extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.direction = 'horizontal';
+        this.thickness = '1px';
+        this.margin = '0';
+        this.color = 'border';
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        // Sync properties to CSS variables for dynamic adjustment
+        this.style.setProperty('--divider-thickness', this.thickness);
+        this.style.setProperty('--divider-margin', this.margin);
+    }
+    render() {
+        // Accessibility: Set role and aria-orientation
+        return html `
+      <div 
+        role="separator" 
+        aria-orientation="${this.direction === 'horizontal' ? 'horizontal' : 'vertical'}"
+      ></div>
+    `;
+    }
+};
+StDivider.styles = [
+    resetStyles,
+    css `
+      :host {
+        display: block;
+        background-color: var(--divider-color, var(--st-color-border));
+        margin: var(--divider-margin, 0);
+      }
+
+      /* Horizontal Layout */
+      :host([direction="horizontal"]) {
+        width: 100%;
+        height: var(--divider-thickness, 1px);
+      }
+
+      /* Vertical Layout */
+      :host([direction="vertical"]) {
+        width: var(--divider-thickness, 1px);
+        height: 100%;
+        display: inline-block;
+        vertical-align: middle;
+      }
+
+      /* Color Variants */
+      :host([color="primary"]) {
+        background-color: var(--st-color-primary);
+      }
+      :host([color="default"]) {
+        background-color: var(--st-color-text);
+        opacity: 0.2;
+      }
+    `
+];
+__decorate([
+    property({ type: String, reflect: true })
+], StDivider.prototype, "direction", void 0);
+__decorate([
+    property({ type: String })
+], StDivider.prototype, "thickness", void 0);
+__decorate([
+    property({ type: String })
+], StDivider.prototype, "margin", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], StDivider.prototype, "color", void 0);
+StDivider = __decorate([
+    customElement('st-divider')
+], StDivider);
+export { StDivider };

package/dist/components/drawer/drawer.d.ts

@@ -0,0 +1,22 @@
+import { LitElement, nothing } from 'lit';
+export type DrawerPlacement = 'left' | 'right';
+export declare class StDrawer extends LitElement {
+    open: boolean;
+    placement: DrawerPlacement;
+    mobileOnly: boolean;
+    private _touchStartX;
+    private _currentTranslateX;
+    private _isDragging;
+    static styles: import("lit").CSSResult[];
+    private _close;
+    private _handleTouchStart;
+    private _handleTouchMove;
+    private _handleTouchEnd;
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'st-drawer': StDrawer;
+    }
+}
+//# sourceMappingURL=drawer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../src/components/drawer/drawer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,OAAO,EAAE,MAAM,KAAK,CAAC;AAIrD,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,OAAO,CAAC;AAE/C,qBACa,QAAS,SAAQ,UAAU;IACM,IAAI,UAAS;IACd,SAAS,EAAE,eAAe,CAAU;IACT,UAAU,UAAS;IAEzF,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,kBAAkB,CAAK;IAC/B,OAAO,CAAC,WAAW,CAAS;IAE5B,MAAM,CAAC,MAAM,4BAsHX;IAEF,OAAO,CAAC,MAAM;IAOd,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,gBAAgB;IAiBxB,OAAO,CAAC,eAAe;IAkBvB,MAAM,0DAyBL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/components/drawer/drawer.js

@@ -0,0 +1,226 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { resetStyles } from '../../styles/reset.js';
+let StDrawer = class StDrawer extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.open = false;
+        this.placement = 'left';
+        this.mobileOnly = false;
+        this._touchStartX = 0;
+        this._currentTranslateX = 0;
+        this._isDragging = false;
+    }
+    _close() {
+        this.open = false;
+        const panel = this.shadowRoot?.querySelector('.panel');
+        if (panel)
+            panel.style.transform = '';
+        this.dispatchEvent(new CustomEvent('st-close', { bubbles: true, composed: true }));
+    }
+    _handleTouchStart(e) {
+        this._touchStartX = e.touches[0].clientX;
+        this._isDragging = true;
+        const panel = this.shadowRoot?.querySelector('.panel');
+        if (panel)
+            panel.style.transition = 'none';
+    }
+    _handleTouchMove(e) {
+        if (!this._isDragging)
+            return;
+        const currentX = e.touches[0].clientX;
+        const diff = currentX - this._touchStartX;
+        const panel = this.shadowRoot?.querySelector('.panel');
+        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)`;
+        }
+    }
+    _handleTouchEnd() {
+        if (!this._isDragging)
+            return;
+        this._isDragging = false;
+        const panel = this.shadowRoot?.querySelector('.panel');
+        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) => 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>
+    `;
+    }
+};
+StDrawer.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;
+      }
+    `
+];
+__decorate([
+    property({ type: Boolean, reflect: true })
+], StDrawer.prototype, "open", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], StDrawer.prototype, "placement", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'mobile-only', reflect: true })
+], StDrawer.prototype, "mobileOnly", void 0);
+StDrawer = __decorate([
+    customElement('st-drawer')
+], StDrawer);
+export { StDrawer };

package/dist/components/field/field.d.ts

@@ -0,0 +1,11 @@
+import { LitElement } from 'lit';
+export declare class StField extends LitElement {
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'st-field': StField;
+    }
+}
+//# sourceMappingURL=field.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../../../src/components/field/field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,qBACa,OAAQ,SAAQ,UAAU;IACrC,MAAM,CAAC,MAAM,4BAWX;IAEF,MAAM,yCAIL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

package/dist/components/field/field.js

@@ -0,0 +1,32 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 { customElement, } from 'lit/decorators.js';
+import { resetStyles } from '../../styles/reset.js';
+let StField = class StField extends LitElement {
+    render() {
+        return html `
+      <slot></slot>
+    `;
+    }
+};
+StField.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);
+      }
+    `
+];
+StField = __decorate([
+    customElement('st-field')
+], StField);
+export { StField };

package/dist/components/footer/footer.d.ts

@@ -0,0 +1,6 @@
+import { LitElement } from "lit";
+export declare class StFooter extends LitElement {
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=footer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"footer.d.ts","sourceRoot":"","sources":["../../../src/components/footer/footer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAI1C,qBACa,QAAS,SAAQ,UAAU;IACtC,MAAM,CAAC,MAAM,4BAuCX;IAEF,MAAM,yCASL;CACF"}

package/dist/components/footer/footer.js

@@ -0,0 +1,65 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 { customElement } from "lit/decorators.js";
+import { resetStyles } from "../../styles/reset";
+let StFooter = class StFooter extends LitElement {
+    render() {
+        return html `
+      <footer>
+        <slot></slot>
+        <div class="links">
+          <span>&copy; ${new Date().getFullYear()} Sondor.</span>
+        </div>
+      </footer>
+    `;
+    }
+};
+StFooter.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);
+      }
+    `,
+];
+StFooter = __decorate([
+    customElement("st-footer")
+], StFooter);
+export { StFooter };

package/dist/components/form/form-step.d.ts

@@ -0,0 +1,13 @@
+import { LitElement } from "lit";
+export declare class StFormStep extends LitElement {
+    title: string;
+    active: boolean;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "st-form-step": StFormStep;
+    }
+}
+//# sourceMappingURL=form-step.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"form-step.d.ts","sourceRoot":"","sources":["../../../src/components/form/form-step.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAI1C,qBACa,UAAW,SAAQ,UAAU;IACd,KAAK,SAAM;IACK,MAAM,UAAS;IAEzD,MAAM,CAAC,MAAM,4BAWX;IAEF,MAAM,yCAEL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,UAAU,CAAC;KAC5B;CACF"}

package/dist/components/form/form-step.js

@@ -0,0 +1,41 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 { customElement, property } from "lit/decorators.js";
+import { resetStyles } from "../../styles/reset.js";
+let StFormStep = class StFormStep extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.title = "";
+        this.active = false;
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+StFormStep.styles = [
+    resetStyles,
+    css `
+      :host {
+        display: block;
+      }
+      /* Hide inactive steps completely from the layout and accessibility tree */
+      :host(:not([active])) {
+        display: none;
+      }
+    `,
+];
+__decorate([
+    property({ type: String })
+], StFormStep.prototype, "title", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], StFormStep.prototype, "active", void 0);
+StFormStep = __decorate([
+    customElement("st-form-step")
+], StFormStep);
+export { StFormStep };

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

@@ -0,0 +1,25 @@
+import { LitElement } from "lit";
+export type FormLayout = "vertical" | "horizontal" | "inline";
+export declare class StForm extends LitElement {
+    layout: FormLayout;
+    loading: boolean;
+    error: string;
+    private _currentStepIndex;
+    private _stepElements;
+    private _formEl;
+    static styles: import("lit").CSSResult[];
+    private _handleSlotChange;
+    private _updateStepVisibility;
+    private _validateCurrentContext;
+    private _triggerSubmission;
+    private _prevStep;
+    private _extractFormData;
+    private _handleSubmit;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "st-form": StForm;
+    }
+}
+//# sourceMappingURL=form.d.ts.map

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

@@ -0,0 +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"}