@sondor-technology/sondor-components 1.0.1-develop.13 → 1.0.1-develop.15

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,9 @@ export class StInput extends LitElement {
   @property({type: String}) placeholder = "";
   @property({type: String}) type: InputType = "text";
   @property({attribute: "help-text"}) helpText = "";
+  @property({type: String}) error = "";
+  @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 +34,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;
+      this.invalid = !!this.error || !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 +61,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,92 +98,98 @@ 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;
+      }
+
+      /* 🚀 NEW: Explicit error text styling */
+      .error-text {
+        font-size: var(--st-font-size-xs);
+        color: var(--st-color-error, #dc2626);
+        margin: 0;
+        font-weight: 500;
+      }
+
       :host([invalid]) .input-wrapper {
-        border-color: var(--st-color-error);
+        border-color: var(--st-color-error, #dc2626);
       }
+
       :host([invalid]) .input-wrapper:focus-within {
-        box-shadow: 0 0 0 1px var(--st-color-error);
+        box-shadow: 0 0 0 1px var(--st-color-error, #dc2626);
       }
+
       :host([invalid]) .help-text {
-        color: var(--st-color-error);
+        color: var(--st-color-error, #dc2626);
       }
 
-      /* 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();
+    
+    if (changedProperties.has("value") || changedProperties.has("error") || changedProperties.has("required")) {
+      this._syncValidity();
+    }
   }
 
   private _syncValidity() {
     if (!this._inputEl) return;
+    
+    if (this.error) {
+      this._internals.setValidity({ customError: true }, this.error, this._inputEl);
+      this.invalid = true;
+      return;
+    }
 
-    // setValidity arguments: (ValidityState object, Custom Error Message, Anchor Element for Tooltip)
     this._internals.setValidity(
       this._inputEl.validity,
       this._inputEl.validationMessage,
       this._inputEl,
     );
+    
+    if (this.invalid && this._inputEl.validity.valid) {
+      this.invalid = false;
+    }
   }
 
   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,10 +199,10 @@ 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) {
+    if (this.invalid && target.validity.valid && !this.error) {
       this.invalid = false;
     }
 
@@ -215,6 +214,12 @@ export class StInput extends LitElement {
   }
 
   render() {
+    const descriptionId = this.error ? "error-text" : (this.helpText ? "help-text" : undefined);
+    
+    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 +239,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(descriptionId)}
             @input=${this._handleInput}
             @change=${this._handleChange}
           />
@@ -241,7 +251,11 @@ export class StInput extends LitElement {
           <slot name="suffix"></slot>
         </div>
 
-        ${this.helpText ? html`<div class="help-text">${this.helpText}</div>` : ""}
+        ${this.error 
+          ? html`<div id="error-text" class="error-text">${this.error}</div>`
+          : this.helpText 
+            ? html`<div id="help-text" class="help-text">${this.helpText}</div>` 
+            : ""}
       </div>
     `;
   }

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;
   }
-}
+}