@sondor-technology/sondor-components 1.0.0-1165-initial-setup.11

package/src/components/link/link.ts

@@ -0,0 +1,98 @@
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { resetStyles } from '../../styles/reset';
+
+@customElement('st-link')
+export class StLink extends LitElement {
+  @property({ type: String }) href = '#';
+  @property({ type: String }) target: '_blank' | '_self' = '_self';
+  @property({ type: String, reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';
+  @property({ type: String, reflect: true }) variant: 'inline' | 'standalone' = 'inline';
+  @property({ type: String, reflect: true }) color: 'default' | 'primary' | 'muted' = 'primary';
+
+  static 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;
+      }
+    `
+  ];
+
+  render() {
+    return html`
+      <a href="${this.href}" target="${this.target}">
+        <slot></slot>
+      </a>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'st-link': StLink;
+  }
+}

package/src/components/metadata/metadata.ts

@@ -0,0 +1,67 @@
+import { LitElement, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+@customElement('st-metadata')
+export class StMetadata extends LitElement {
+  @property({ type: String }) pageTitle = '';
+  @property({ type: String }) description = '';
+  @property({ type: String }) image = '';
+
+  protected createRenderRoot() { return this; }
+
+  updated() {
+    this._updateMetadata();
+  }
+
+  private _updateMetadata() {
+    // Read site name from environment variable (e.g., VITE_SITE_NAME)
+    const siteName = (import.meta as any).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);
+  }
+
+  private _setMeta(attrName: 'name' | 'property', attrValue: string, content: string) {
+    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);
+  }
+
+  private _setCanonical(url: string) {
+    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;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'st-metadata': StMetadata;
+  }
+}

package/src/components/modal/modal.ts

@@ -0,0 +1,159 @@
+import { LitElement, html, css, PropertyValues } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { resetStyles } from '../../styles/reset.js';
+
+@customElement('st-modal')
+export class StModal extends LitElement {
+  /**
+   * Controls whether the modal is open.
+   */
+  @property({ type: Boolean, reflect: true }) open = false;
+
+  /**
+   * Title text displayed in the modal header.
+   */
+  @property({ type: String }) heading = '';
+
+  @query('dialog') private dialogEl!: HTMLDialogElement;
+
+  static 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);
+      }
+    `
+  ];
+
+  updated(changedProperties: PropertyValues) {
+    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();
+        }
+      }
+    }
+  }
+
+  private handleClose() {
+    this.open = false;
+    this.dispatchEvent(new CustomEvent('st-close', { bubbles: true, composed: true }));
+  }
+
+  private onDialogClose() {
+    if (this.open) {
+      this.open = false;
+      this.dispatchEvent(new CustomEvent('st-close', { bubbles: true, composed: true }));
+    }
+  }
+
+  private handleBackdropClick(e: MouseEvent) {
+    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: MouseEvent) => 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: MouseEvent) => e.stopPropagation()}>
+          <slot></slot>
+        </div>
+        <div class="modal-footer" @click=${(e: MouseEvent) => e.stopPropagation()}>
+          <slot name="footer"></slot>
+        </div>
+      </dialog>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'st-modal': StModal;
+  }
+}