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

package/src/components/link/link.ts

@@ -1,98 +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;
-  }
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { resetStyles } from '../../styles/reset.js';
+
+@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

@@ -1,67 +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;
-  }
+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;
+  }
 }