@sondor-technology/sondor-components 1.0.4 → 1.0.6

package/src/components/grid/grid-row.ts

@@ -1,14 +1,14 @@
-import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { resetStyles } from '../../styles/reset.js';
+import {LitElement, html, css, PropertyValues} from "lit";
+import {customElement, property} from "lit/decorators.js";
+import {resetStyles} from "../../styles/reset.js";
 
-@customElement('st-grid-row')
+@customElement("st-grid-row")
 export class StGridRow extends LitElement {
-  @property({ type: Number }) xs = 1;
-  @property({ type: Number }) sm?: number;
-  @property({ type: Number }) md?: number;
-  @property({ type: Number }) lg?: number;
-  @property({ type: Number }) xl?: number;
+  @property({type: Number}) xs = 1;
+  @property({type: Number}) sm?: number;
+  @property({type: Number}) md?: number;
+  @property({type: Number}) lg?: number;
+  @property({type: Number}) xl?: number;
 
   static styles = [
     resetStyles,
@@ -22,46 +22,59 @@ export class StGridRow extends LitElement {
       }
 
       /* Mobile First (xs) */
-      :host { --_cols: var(--grid-xs, 1); }
+      :host {
+        --_cols: var(--grid-xs, 1);
+      }
 
       /* Small (sm: >= 640px) */
       @media (min-width: 640px) {
-        :host { --_cols: var(--grid-sm, var(--grid-xs, 1)); }
+        :host {
+          --_cols: var(--grid-sm, var(--grid-xs, 1));
+        }
       }
-      
+
       /* Medium (md: >= 768px) */
       @media (min-width: 768px) {
-        :host { --_cols: var(--grid-md, var(--grid-sm, var(--grid-xs, 1))); }
+        :host {
+          --_cols: var(--grid-md, var(--grid-sm, var(--grid-xs, 1)));
+        }
       }
-      
+
       /* Large (lg: >= 1024px) */
       @media (min-width: 1024px) {
-        :host { --_cols: var(--grid-lg, var(--grid-md, var(--grid-sm, var(--grid-xs, 1)))); }
+        :host {
+          --_cols: var(--grid-lg, var(--grid-md, var(--grid-sm, var(--grid-xs, 1))));
+        }
       }
-      
+
       /* Extra Large (xl: >= 1280px) */
       @media (min-width: 1280px) {
-        :host { --_cols: var(--grid-xl, var(--grid-lg, var(--grid-md, var(--grid-sm, var(--grid-xs, 1))))); }
+        :host {
+          --_cols: var(
+            --grid-xl,
+            var(--grid-lg, var(--grid-md, var(--grid-sm, var(--grid-xs, 1))))
+          );
+        }
       }
-    `
+    `,
   ];
 
-  updated(changedProperties: Map<string, any>) {
+  updated(changedProperties: PropertyValues<this>) {
     super.updated(changedProperties);
-    
-    this.style.setProperty('--grid-xs', this.xs.toString());
-    
-    if (this.sm !== undefined) this.style.setProperty('--grid-sm', this.sm.toString());
-    else this.style.removeProperty('--grid-sm');
 
-    if (this.md !== undefined) this.style.setProperty('--grid-md', this.md.toString());
-    else this.style.removeProperty('--grid-md');
+    this.style.setProperty("--grid-xs", this.xs.toString());
+
+    if (this.sm !== undefined) this.style.setProperty("--grid-sm", this.sm.toString());
+    else this.style.removeProperty("--grid-sm");
 
-    if (this.lg !== undefined) this.style.setProperty('--grid-lg', this.lg.toString());
-    else this.style.removeProperty('--grid-lg');
+    if (this.md !== undefined) this.style.setProperty("--grid-md", this.md.toString());
+    else this.style.removeProperty("--grid-md");
 
-    if (this.xl !== undefined) this.style.setProperty('--grid-xl', this.xl.toString());
-    else this.style.removeProperty('--grid-xl');
+    if (this.lg !== undefined) this.style.setProperty("--grid-lg", this.lg.toString());
+    else this.style.removeProperty("--grid-lg");
+
+    if (this.xl !== undefined) this.style.setProperty("--grid-xl", this.xl.toString());
+    else this.style.removeProperty("--grid-xl");
   }
 
   render() {
@@ -71,6 +84,6 @@ export class StGridRow extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    'st-grid-row': StGridRow;
+    "st-grid-row": StGridRow;
   }
-}
+}

package/src/components/grid/grid.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from 'lit';
+import { LitElement, html, css, PropertyValues } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { resetStyles } from '../../styles/reset.js';
 
@@ -19,10 +19,13 @@ export class StGrid extends LitElement {
     `
   ];
 
-  updated(changedProperties: Map<string, any>) {
+  updated(changedProperties: PropertyValues<this>) {
     super.updated(changedProperties);
-    // This CSS variable will automatically cascade down the DOM tree
-    this.style.setProperty('--grid-gap', this.gap);
+    
+    // Performance optimization: Only touch the DOM if the gap property actually changed
+    if (changedProperties.has('gap')) {
+      this.style.setProperty('--grid-gap', this.gap);
+    }
   }
 
   render() {

package/src/components/input/input.ts

@@ -1,6 +1,6 @@
 import {LitElement, html, css, PropertyValues} from "lit";
 import {customElement, property, query} from "lit/decorators.js";
-import {ifDefined} from "lit/directives/if-defined.js"; // Helper for optional attributes
+import {ifDefined} from "lit/directives/if-defined.js";
 import {resetStyles} from "../../styles/reset.js";
 
 export type InputType = "text" | "password" | "email" | "number" | "search" | "url";
@@ -8,6 +8,7 @@ export type InputType = "text" | "password" | "email" | "number" | "search" | "u
 @customElement("st-input")
 export class StInput extends LitElement {
   static formAssociated = true;
+  static shadowRootOptions = {...LitElement.shadowRootOptions, delegatesFocus: true};
   private _internals: ElementInternals;
 
   @query("input") private _inputEl!: HTMLInputElement;
@@ -17,8 +18,8 @@ export class StInput extends LitElement {
   @property({type: String}) placeholder = "";
   @property({type: String}) type: InputType = "text";
   @property({attribute: "help-text"}) helpText = "";
+  @property({ type: String }) autocomplete?: string;
 
-  // Validation Properties
   @property({type: Boolean, reflect: true}) required = false;
   @property({type: Number}) minlength?: number;
   @property({type: Number}) maxlength?: number;
@@ -32,12 +33,10 @@ export class StInput extends LitElement {
     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;
     });
 
-    // 2. Trigger error state if the st-form tries to submit and fails
     this.addEventListener("invalid", () => {
       this.invalid = true;
     });
@@ -61,41 +60,34 @@ export class StInput extends LitElement {
         font-weight: var(--st-font-weight-medium);
         color: var(--st-color-text);
         margin-bottom: 0.5em;
+        cursor: pointer;
       }
 
-      /* 1. The Wrapper acts as the visual input field */
       .input-wrapper {
         display: flex;
         align-items: center;
         gap: var(--st-spacing-sm);
         width: 100%;
-
         background-color: var(--st-color-bg);
         border: 1px solid var(--st-color-border);
         border-radius: 4px;
-
-        /* Horizontal padding on the wrapper, vertical on the input */
         padding: 0 var(--st-spacing-md);
         transition:
           border-color 0.2s ease,
           box-shadow 0.2s ease;
       }
 
-      /* 2. Apply focus ring to the wrapper when the internal input is focused */
       .input-wrapper:focus-within {
         border-color: var(--st-color-primary);
         box-shadow: 0 0 0 1px var(--st-color-primary);
       }
 
-      /* 3. The actual input becomes transparent and fills the wrapper */
       input {
         flex: 1;
         width: 100%;
         border: none;
         background: transparent;
         outline: none;
-
-        /* Vertical padding stretches the wrapper */
         padding: var(--st-spacing-sm) 0;
         font-size: var(--st-font-size-base);
         color: var(--st-color-text);
@@ -105,77 +97,63 @@ export class StInput extends LitElement {
         color: var(--st-color-text-muted);
       }
 
-      /* Slotted Icons */
       ::slotted(svg) {
         width: 1.25em;
         height: 1.25em;
-        /* Default icons to the muted text color */
         color: var(--st-color-text-muted);
         fill: currentColor;
         flex-shrink: 0;
       }
 
-      /* Interactive Slotted Elements (like clear buttons) */
       ::slotted(st-button) {
-        /* Pull the button back slightly so it aligns nicely with the input padding */
         margin-right: calc(var(--st-spacing-sm) * -1);
       }
 
-      /* Invalid State */
+      .help-text {
+        font-size: var(--st-font-size-xs);
+        color: var(--st-color-text-muted);
+        margin: 0;
+      }
+
       :host([invalid]) .input-wrapper {
         border-color: var(--st-color-error);
       }
+
       :host([invalid]) .input-wrapper:focus-within {
         box-shadow: 0 0 0 1px var(--st-color-error);
       }
+
       :host([invalid]) .help-text {
         color: var(--st-color-error);
       }
 
-      /* Disabled & Readonly States */
       :host([disabled]) .input-wrapper {
         opacity: 0.5;
         cursor: not-allowed;
         background-color: var(--st-color-surface);
       }
+
       :host([disabled]) input {
         cursor: not-allowed;
       }
+
       :host([readonly]) .input-wrapper {
         background-color: var(--st-color-surface);
       }
-
-      .help-text {
-        font-size: var(--st-font-size-xs);
-        color: var(--st-color-text-muted);
-        margin: 0;
-      }
-
-      :host([invalid]) .input-wrapper {
-        border-color: var(--st-color-error);
-      }
-      :host([invalid]) .help-text {
-        color: var(--st-color-error);
-      }
     `,
   ];
 
   override updated(changedProperties: PropertyValues<this>) {
     super.updated(changedProperties);
 
-    // Sync the value to the form engine
     if (changedProperties.has("value")) {
       this._internals.setFormValue(this.value);
     }
-
-    // Sync validity whenever properties change (like value or required status)
     this._syncValidity();
   }
 
   private _syncValidity() {
     if (!this._inputEl) return;
-
-    // setValidity arguments: (ValidityState object, Custom Error Message, Anchor Element for Tooltip)
     this._internals.setValidity(
       this._inputEl.validity,
       this._inputEl.validationMessage,
@@ -186,11 +164,9 @@ export class StInput extends LitElement {
   formResetCallback() {
     this.value = "";
     this._internals.setFormValue("");
-    // Need to wait for the render cycle to finish before checking validity on reset
     this.updateComplete.then(() => this._syncValidity());
   }
 
-  // Expose standard native methods so external scripts can call them on the component
   checkValidity() {
     return this._internals.checkValidity();
   }
@@ -200,7 +176,7 @@ export class StInput extends LitElement {
   }
 
   private _handleInput(e: Event) {
-    const target = e.target as HTMLTextAreaElement;
+    const target = e.target as HTMLInputElement;
     this.value = target.value;
 
     if (this.invalid && target.validity.valid) {
@@ -214,7 +190,14 @@ export class StInput extends LitElement {
     this.dispatchEvent(new Event("change", {bubbles: true, composed: true}));
   }
 
-  render() {
+render() {
+    const helpTextId = this.helpText ? "help-text" : undefined;
+    
+    // Security: Prevent OS/Extensions from logging sensitive data via spellcheck
+    const isSensitive = this.type === "password" || this.type === "email";
+    const safeSpellcheck = isSensitive ? "false" : undefined;
+    const safeAutocapitalize = isSensitive ? "none" : undefined;
+
     return html`
       <div class="form-control">
         ${this.label ? html`<label for="input">${this.label}</label>` : ""}
@@ -234,6 +217,11 @@ export class StInput extends LitElement {
             minlength=${ifDefined(this.minlength)}
             maxlength=${ifDefined(this.maxlength)}
             pattern=${ifDefined(this.pattern)}
+            autocomplete=${ifDefined(this.autocomplete as any)}
+            spellcheck=${ifDefined(safeSpellcheck)}
+            autocapitalize=${ifDefined(safeAutocapitalize)}
+            aria-invalid=${this.invalid ? "true" : "false"}
+            aria-describedby=${ifDefined(helpTextId)}
             @input=${this._handleInput}
             @change=${this._handleChange}
           />
@@ -241,8 +229,16 @@ export class StInput extends LitElement {
           <slot name="suffix"></slot>
         </div>
 
-        ${this.helpText ? html`<div class="help-text">${this.helpText}</div>` : ""}
+        ${this.helpText 
+          ? html`<div id="help-text" class="help-text">${this.helpText}</div>` 
+          : ""}
       </div>
     `;
   }
 }
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-input": StInput;
+  }
+}

package/src/components/link/link.ts

@@ -1,21 +1,23 @@
-import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { resetStyles } from '../../styles/reset.js';
+import {LitElement, html, css} from "lit";
+import {customElement, property} from "lit/decorators.js";
+import {ifDefined} from "lit/directives/if-defined.js";
+import {resetStyles} from "../../styles/reset.js";
 
-@customElement('st-link')
+@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';
+  @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;
+        align-items: baseline; /* Ensures it sits perfectly inside a line of text */
+        vertical-align: baseline;
       }
 
       a {
@@ -24,7 +26,17 @@ export class StLink extends LitElement {
         gap: 0.25em;
         text-decoration: none;
         font-weight: 500;
-        transition: color 0.2s ease, opacity 0.2s ease;
+        transition:
+          color 0.2s ease,
+          opacity 0.2s ease,
+          text-decoration-thickness 0.2s ease;
+      }
+
+      /* Accessibility: Clear focus indicators for keyboard navigation */
+      a:focus-visible {
+        outline: 2px solid var(--st-color-primary);
+        outline-offset: 2px;
+        border-radius: 2px;
       }
 
       /* ==========================================================
@@ -54,24 +66,28 @@ export class StLink extends LitElement {
       /* ==========================================================
          Sizes
          ========================================================== */
-      :host([size="sm"]) a { font-size: 0.875rem; }
-      :host([size="md"]) a { font-size: 1rem; }
-      :host([size="lg"]) a { font-size: 1.125rem; }
+      :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 */
+        font-weight: inherit;
       }
       :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;
       }
@@ -79,12 +95,20 @@ export class StLink extends LitElement {
         text-decoration: underline;
         text-underline-offset: 4px;
       }
-    `
+    `,
   ];
 
   render() {
+    // SECURITY: Prevent XSS via javascript: URI injection
+    const sanitizedHref = this.href?.trim().toLowerCase().startsWith("javascript:")
+      ? "#blocked"
+      : this.href;
+
+    // SECURITY: Prevent Reverse Tabnabbing for external links
+    const secureRel = this.target === "_blank" ? "noopener noreferrer" : undefined;
+
     return html`
-      <a href="${this.href}" target="${this.target}">
+      <a href="${sanitizedHref}" target="${this.target}" rel="${ifDefined(secureRel)}">
         <slot></slot>
       </a>
     `;
@@ -93,6 +117,6 @@ export class StLink extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    'st-link': StLink;
+    "st-link": StLink;
   }
-}
+}

package/src/components/metadata/metadata.ts

@@ -1,58 +1,60 @@
-import { LitElement, nothing } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import {LitElement, nothing, PropertyValues} from "lit";
+import {customElement, property} from "lit/decorators.js";
 
-@customElement('st-metadata')
+@customElement("st-metadata")
 export class StMetadata extends LitElement {
-  @property({ type: String }) pageTitle = '';
-  @property({ type: String }) description = '';
-  @property({ type: String }) image = '';
+  @property({type: String}) pageTitle = "";
+  @property({type: String}) description = "";
+  @property({type: String}) image = "";
 
-  protected createRenderRoot() { return this; }
+  protected createRenderRoot() {
+    return this;
+  }
 
-  updated() {
+  // 🚀 Added strict PropertyValues typing and super call
+  override updated(changedProperties: PropertyValues<this>) {
+    super.updated(changedProperties);
     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 || '';
+    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);
+      this._setMeta("property", "og:title", this.pageTitle);
     }
 
     if (this.description) {
-      this._setMeta('name', 'description', this.description);
-      this._setMeta('property', 'og:description', 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._setMeta("property", "og:image", this.image);
     }
-    
+
     this._setCanonical(window.location.href);
   }
 
-  private _setMeta(attrName: 'name' | 'property', attrValue: string, content: string) {
+  private _setMeta(attrName: "name" | "property", attrValue: string, content: string) {
     let meta = document.head.querySelector(`meta[${attrName}="${attrValue}"]`);
     if (!meta) {
-      meta = document.createElement('meta');
+      meta = document.createElement("meta");
       meta.setAttribute(attrName, attrValue);
       document.head.appendChild(meta);
     }
-    meta.setAttribute('content', content);
+    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');
+      link = document.createElement("link");
+      link.setAttribute("rel", "canonical");
       document.head.appendChild(link);
     }
-    link.setAttribute('href', url);
+    link.setAttribute("href", url);
   }
 
   render() {
@@ -62,6 +64,6 @@ export class StMetadata extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    'st-metadata': StMetadata;
+    "st-metadata": StMetadata;
   }
-}
+}