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

package/dist/components/link/link.js

@@ -0,0 +1,116 @@
+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 StLink = class StLink extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.href = '#';
+        this.target = '_self';
+        this.size = 'md';
+        this.variant = 'inline';
+        this.color = 'primary';
+    }
+    render() {
+        return html `
+      <a href="${this.href}" target="${this.target}">
+        <slot></slot>
+      </a>
+    `;
+    }
+};
+StLink.styles = [
+    resetStyles,
+    css `
+      :host {
+        display: inline-flex;
+        align-items: center;
+      }
+
+      a {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.25em;
+        text-decoration: none;
+        font-weight: 500;
+        transition: color 0.2s ease, opacity 0.2s ease;
+      }
+
+      /* ==========================================================
+         Colors
+         ========================================================== */
+      :host([color="primary"]) a {
+        color: var(--st-color-primary);
+      }
+      :host([color="default"]) a {
+        color: var(--st-color-text);
+      }
+      :host([color="muted"]) a {
+        color: var(--st-color-text-muted);
+      }
+
+      /* Hover states */
+      :host([color="primary"]) a:hover {
+        filter: brightness(1.1);
+      }
+      :host([color="default"]) a:hover {
+        color: var(--st-color-primary);
+      }
+      :host([color="muted"]) a:hover {
+        color: var(--st-color-text);
+      }
+
+      /* ==========================================================
+         Sizes
+         ========================================================== */
+      :host([size="sm"]) a { font-size: 0.875rem; }
+      :host([size="md"]) a { font-size: 1rem; }
+      :host([size="lg"]) a { font-size: 1.125rem; }
+
+      /* ==========================================================
+         Variants
+         ========================================================== */
+      /* inline links live inside paragraphs and underline on hover */
+      :host([variant="inline"]) a {
+        text-decoration: underline;
+        text-underline-offset: 4px;
+        font-weight: inherit; /* Inherits from surrounding paragraph text */
+      }
+      :host([variant="inline"]) a:hover {
+        text-decoration-thickness: 2px;
+      }
+
+      /* standalone links (e.g., footers, sidebars) have no underline by default */
+      :host([variant="standalone"]) a {
+        text-decoration: none;
+      }
+      :host([variant="standalone"]) a:hover {
+        text-decoration: underline;
+        text-underline-offset: 4px;
+      }
+    `
+];
+__decorate([
+    property({ type: String })
+], StLink.prototype, "href", void 0);
+__decorate([
+    property({ type: String })
+], StLink.prototype, "target", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], StLink.prototype, "size", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], StLink.prototype, "variant", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], StLink.prototype, "color", void 0);
+StLink = __decorate([
+    customElement('st-link')
+], StLink);
+export { StLink };

package/dist/components/metadata/metadata.d.ts

@@ -0,0 +1,18 @@
+import { LitElement } from 'lit';
+export declare class StMetadata extends LitElement {
+    pageTitle: string;
+    description: string;
+    image: string;
+    protected createRenderRoot(): this;
+    updated(): void;
+    private _updateMetadata;
+    private _setMeta;
+    private _setCanonical;
+    render(): symbol;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'st-metadata': StMetadata;
+    }
+}
+//# sourceMappingURL=metadata.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"metadata.d.ts","sourceRoot":"","sources":["../../../src/components/metadata/metadata.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAW,MAAM,KAAK,CAAC;AAG1C,qBACa,UAAW,SAAQ,UAAU;IACZ,SAAS,SAAM;IACf,WAAW,SAAM;IACjB,KAAK,SAAM;IAEvC,SAAS,CAAC,gBAAgB,SAAmB;IAE7C,OAAO,SAEN;IAED,OAAO,CAAC,eAAe;IAsBvB,OAAO,CAAC,QAAQ;IAUhB,OAAO,CAAC,aAAa;IAUrB,MAAM,WAEL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/dist/components/metadata/metadata.js

@@ -0,0 +1,71 @@
+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, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+let StMetadata = class StMetadata extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.pageTitle = '';
+        this.description = '';
+        this.image = '';
+    }
+    createRenderRoot() { return this; }
+    updated() {
+        this._updateMetadata();
+    }
+    _updateMetadata() {
+        // Read site name from environment variable (e.g., VITE_SITE_NAME)
+        const siteName = import.meta.env?.VITE_SITE_NAME || '';
+        if (this.pageTitle) {
+            // If site name is configured, append it; otherwise use the title standalone
+            document.title = siteName ? `${this.pageTitle} - ${siteName}` : this.pageTitle;
+            this._setMeta('property', 'og:title', this.pageTitle);
+        }
+        if (this.description) {
+            this._setMeta('name', 'description', this.description);
+            this._setMeta('property', 'og:description', this.description);
+        }
+        if (this.image) {
+            this._setMeta('property', 'og:image', this.image);
+        }
+        this._setCanonical(window.location.href);
+    }
+    _setMeta(attrName, attrValue, content) {
+        let meta = document.head.querySelector(`meta[${attrName}="${attrValue}"]`);
+        if (!meta) {
+            meta = document.createElement('meta');
+            meta.setAttribute(attrName, attrValue);
+            document.head.appendChild(meta);
+        }
+        meta.setAttribute('content', content);
+    }
+    _setCanonical(url) {
+        let link = document.head.querySelector('link[rel="canonical"]');
+        if (!link) {
+            link = document.createElement('link');
+            link.setAttribute('rel', 'canonical');
+            document.head.appendChild(link);
+        }
+        link.setAttribute('href', url);
+    }
+    render() {
+        return nothing;
+    }
+};
+__decorate([
+    property({ type: String })
+], StMetadata.prototype, "pageTitle", void 0);
+__decorate([
+    property({ type: String })
+], StMetadata.prototype, "description", void 0);
+__decorate([
+    property({ type: String })
+], StMetadata.prototype, "image", void 0);
+StMetadata = __decorate([
+    customElement('st-metadata')
+], StMetadata);
+export { StMetadata };

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

@@ -0,0 +1,24 @@
+import { LitElement, PropertyValues } from 'lit';
+export declare class StModal extends LitElement {
+    /**
+     * Controls whether the modal is open.
+     */
+    open: boolean;
+    /**
+     * Title text displayed in the modal header.
+     */
+    heading: string;
+    private dialogEl;
+    static styles: import("lit").CSSResult[];
+    updated(changedProperties: PropertyValues): void;
+    private handleClose;
+    private onDialogClose;
+    private handleBackdropClick;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'st-modal': StModal;
+    }
+}
+//# sourceMappingURL=modal.d.ts.map

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

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

package/dist/components/modal/modal.js

@@ -0,0 +1,163 @@
+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, query } from 'lit/decorators.js';
+import { resetStyles } from '../../styles/reset.js';
+let StModal = class StModal extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Controls whether the modal is open.
+         */
+        this.open = false;
+        /**
+         * Title text displayed in the modal header.
+         */
+        this.heading = '';
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('open')) {
+            if (this.dialogEl) {
+                if (this.open && !this.dialogEl.open) {
+                    this.dialogEl.showModal();
+                }
+                else if (!this.open && this.dialogEl.open) {
+                    this.dialogEl.close();
+                }
+            }
+        }
+    }
+    handleClose() {
+        this.open = false;
+        this.dispatchEvent(new CustomEvent('st-close', { bubbles: true, composed: true }));
+    }
+    onDialogClose() {
+        if (this.open) {
+            this.open = false;
+            this.dispatchEvent(new CustomEvent('st-close', { bubbles: true, composed: true }));
+        }
+    }
+    handleBackdropClick(e) {
+        const rect = this.dialogEl.getBoundingClientRect();
+        if (e.clientX < rect.left ||
+            e.clientX > rect.right ||
+            e.clientY < rect.top ||
+            e.clientY > rect.bottom) {
+            this.handleClose();
+        }
+    }
+    render() {
+        return html `
+      <dialog 
+        @cancel=${this.handleClose} 
+        @click=${this.handleBackdropClick} 
+        @close=${this.onDialogClose}
+      >
+        <div class="modal-header" @click=${(e) => e.stopPropagation()}>
+          <slot name="header">
+            <h3 class="modal-title">${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>
+        </div>
+        <div class="modal-body" @click=${(e) => e.stopPropagation()}>
+          <slot></slot>
+        </div>
+        <div class="modal-footer" @click=${(e) => e.stopPropagation()}>
+          <slot name="footer"></slot>
+        </div>
+      </dialog>
+    `;
+    }
+};
+StModal.styles = [
+    resetStyles,
+    css `
+      :host {
+        display: contents;
+      }
+
+      dialog {
+        padding: 0;
+        border: 1px solid var(--st-color-border);
+        border-radius: var(--st-radius-lg, 0.5rem);
+        background-color: var(--st-color-surface);
+        color: var(--st-color-text);
+        width: 100%;
+        max-width: 500px;
+        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);
+      }
+
+      dialog::backdrop {
+        background-color: rgba(0, 0, 0, 0.5);
+        backdrop-filter: blur(2px);
+      }
+
+      .modal-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);
+      }
+
+      .modal-title {
+        font-size: 1.125rem;
+        font-weight: 600;
+        margin: 0;
+      }
+
+      .close-btn {
+        background: none;
+        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);
+        transition: color 0.2s, background-color 0.2s;
+      }
+
+      .close-btn:hover {
+        color: var(--st-color-text);
+        background-color: var(--st-color-surface-muted, #f1f5f9);
+      }
+
+      .modal-body {
+        padding: var(--st-spacing-lg);
+        font-size: var(--st-font-size-sm, 0.875rem);
+        line-height: 1.5;
+      }
+
+      .modal-footer {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        gap: var(--st-spacing-sm);
+        padding: var(--st-spacing-md) var(--st-spacing-lg);
+        border-top: 1px solid var(--st-color-border);
+        background-color: var(--st-color-surface-muted, #f8fafc);
+      }
+    `
+];
+__decorate([
+    property({ type: Boolean, reflect: true })
+], StModal.prototype, "open", void 0);
+__decorate([
+    property({ type: String })
+], StModal.prototype, "heading", void 0);
+__decorate([
+    query('dialog')
+], StModal.prototype, "dialogEl", void 0);
+StModal = __decorate([
+    customElement('st-modal')
+], StModal);
+export { StModal };

package/dist/components/page-layout/page-layout.d.ts

@@ -0,0 +1,46 @@
+import { LitElement, PropertyValues } from 'lit';
+export type LayoutVariant = 'app-shell' | 'content-sidebar' | 'single-column' | 'three-column';
+export declare class StPageLayout extends LitElement {
+    /**
+     * Defines the structural layout variant to render.
+     */
+    variant: LayoutVariant;
+    /**
+     * Maximum width for the left sidebar section (e.g., '20rem', '300px').
+     */
+    sidebarWidth: string;
+    /**
+     * Maximum width for the right sidebar section (e.g., '16rem', '250px').
+     */
+    rightSidebarWidth: string;
+    /**
+     * Optional maximum width for the main content area (e.g., '48rem', '800px').
+     */
+    mainMaxWidth: string;
+    /**
+     * When true, expands the main content area to fill 100% of the available width between sidebars.
+     */
+    fillMain: boolean;
+    private _mobileMenuOpen;
+    private _touchStartX;
+    private _currentTranslateX;
+    private _isDragging;
+    updated(changedProperties: PropertyValues<this>): void;
+    private _toggleMobileMenu;
+    private _closeMobileMenu;
+    private _handleNavClick;
+    private _handleTouchStart;
+    private _handleTouchMove;
+    private _handleTouchEnd;
+    private _resizeListener;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'st-page-layout': StPageLayout;
+    }
+}
+//# sourceMappingURL=page-layout.d.ts.map

package/dist/components/page-layout/page-layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-layout.d.ts","sourceRoot":"","sources":["../../../src/components/page-layout/page-layout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAI5D,MAAM,MAAM,aAAa,GAAG,WAAW,GAAG,iBAAiB,GAAG,eAAe,GAAG,cAAc,CAAC;AAE/F,qBACa,YAAa,SAAQ,UAAU;IAC1C;;OAEG;IAEH,OAAO,EAAE,aAAa,CAAmB;IAEzC;;OAEG;IAEH,YAAY,SAAM;IAElB;;OAEG;IAEH,iBAAiB,SAAM;IAEvB;;OAEG;IAEH,YAAY,SAAM;IAElB;;OAEG;IAEH,QAAQ,UAAS;IAGjB,OAAO,CAAC,eAAe,CAAS;IAEhC,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,kBAAkB,CAAK;IAC/B,OAAO,CAAC,WAAW,CAAS;IAEnB,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,QA0BvD;IAED,OAAO,CAAC,iBAAiB,CAEvB;IAEF,OAAO,CAAC,gBAAgB,CAEtB;IAGF,OAAO,CAAC,eAAe,CAUrB;IAEF,OAAO,CAAC,iBAAiB,CAMvB;IAEF,OAAO,CAAC,gBAAgB,CAUtB;IAEF,OAAO,CAAC,eAAe,CAarB;IAEF,OAAO,CAAC,eAAe,CAIrB;IAEF,iBAAiB,SAGhB;IAED,oBAAoB,SAGnB;IAED,MAAM,CAAC,MAAM,4BAsZX;IAEF,MAAM,yCAgJL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}