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

package/src/components/icon/icon.ts

@@ -1,83 +1,83 @@
-import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { iconPaths, IconName } from './icon-paths.js';
-import { resetStyles } from '../../styles/reset.js';
-
-@customElement('st-icon')
-export class StIcon extends LitElement {
-  @property({ type: String }) name: IconName | string = '';
-  @property({ type: String }) variant: 'outline' | 'solid' = 'outline';
-  
-  // Semantic Colors
-  @property({ type: String, reflect: true }) color: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' = 'default';
-  
-  // Standardized T-Shirt Sizes
-  @property({ type: String, reflect: true }) size: 'sm' | 'md' | 'lg' | 'xl' = 'md';
-
-  static styles = [
-    resetStyles,
-    css`
-      :host {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        color: inherit;
-        
-        /* Defaults to md (1.5rem) if no size attribute is matched */
-        width: var(--icon-size, 1.5rem);
-        height: var(--icon-size, 1.5rem);
-      }
-
-      /* ==========================================================
-         Size Variants
-         ========================================================== */
-      :host([size="sm"]) { --icon-size: 1.25rem; } /* 20px - Matches small buttons/inputs */
-      :host([size="md"]) { --icon-size: 1.5rem; }  /* 24px - Default standard size */
-      :host([size="lg"]) { --icon-size: 2rem; }    /* 32px - Large callouts */
-      :host([size="xl"]) { --icon-size: 2.5rem; }  /* 40px - Hero sections/Cards */
-
-      /* ==========================================================
-         Color Variants
-         ========================================================== */
-      :host([color="primary"]) { color: var(--st-color-primary); }
-      :host([color="secondary"]) { color: var(--st-color-secondary); }
-      :host([color="success"]) { color: var(--st-color-success); }
-      :host([color="warning"]) { color: var(--st-color-warning); }
-      :host([color="error"]) { color: var(--st-color-error); }
-      :host([color="info"]) { color: var(--st-color-info); }
-
-      svg {
-        width: 100%;
-        height: 100%;
-        display: block;
-      }
-    `
-  ];
-
-  render() {
-    const iconData = (iconPaths as Record<string, any>)[this.name];
-    if (!iconData) return html``;
-
-    const pathData = iconData[this.variant] || iconData.outline;
-
-    return html`
-      <svg 
-        viewBox="0 0 24 24" 
-        xmlns="http://www.w3.org/2000/svg"
-        fill="${this.variant === 'solid' ? 'currentColor' : 'none'}"
-        stroke="${this.variant === 'outline' ? 'currentColor' : 'none'}"
-        stroke-width="${this.variant === 'outline' ? '2' : '0'}"
-        stroke-linecap="round" 
-        stroke-linejoin="round"
-      >
-        ${pathData}
-      </svg>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'st-icon': StIcon;
-  }
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { iconPaths, IconName } from './icon-paths.js';
+import { resetStyles } from '../../styles/reset.js';
+
+@customElement('st-icon')
+export class StIcon extends LitElement {
+  @property({ type: String }) name: IconName | string = '';
+  @property({ type: String }) variant: 'outline' | 'solid' = 'outline';
+  
+  // Semantic Colors
+  @property({ type: String, reflect: true }) color: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' = 'default';
+  
+  // Standardized T-Shirt Sizes
+  @property({ type: String, reflect: true }) size: 'sm' | 'md' | 'lg' | 'xl' = 'md';
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        color: inherit;
+        
+        /* Defaults to md (1.5rem) if no size attribute is matched */
+        width: var(--icon-size, 1.5rem);
+        height: var(--icon-size, 1.5rem);
+      }
+
+      /* ==========================================================
+         Size Variants
+         ========================================================== */
+      :host([size="sm"]) { --icon-size: 1.25rem; } /* 20px - Matches small buttons/inputs */
+      :host([size="md"]) { --icon-size: 1.5rem; }  /* 24px - Default standard size */
+      :host([size="lg"]) { --icon-size: 2rem; }    /* 32px - Large callouts */
+      :host([size="xl"]) { --icon-size: 2.5rem; }  /* 40px - Hero sections/Cards */
+
+      /* ==========================================================
+         Color Variants
+         ========================================================== */
+      :host([color="primary"]) { color: var(--st-color-primary); }
+      :host([color="secondary"]) { color: var(--st-color-secondary); }
+      :host([color="success"]) { color: var(--st-color-success); }
+      :host([color="warning"]) { color: var(--st-color-warning); }
+      :host([color="error"]) { color: var(--st-color-error); }
+      :host([color="info"]) { color: var(--st-color-info); }
+
+      svg {
+        width: 100%;
+        height: 100%;
+        display: block;
+      }
+    `
+  ];
+
+  render() {
+    const iconData = (iconPaths as Record<string, any>)[this.name];
+    if (!iconData) return html``;
+
+    const pathData = iconData[this.variant] || iconData.outline;
+
+    return html`
+      <svg 
+        viewBox="0 0 24 24" 
+        xmlns="http://www.w3.org/2000/svg"
+        fill="${this.variant === 'solid' ? 'currentColor' : 'none'}"
+        stroke="${this.variant === 'outline' ? 'currentColor' : 'none'}"
+        stroke-width="${this.variant === 'outline' ? '2' : '0'}"
+        stroke-linecap="round" 
+        stroke-linejoin="round"
+      >
+        ${pathData}
+      </svg>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'st-icon': StIcon;
+  }
 }

package/src/components/input/input.ts

@@ -1,248 +1,248 @@
-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 {resetStyles} from "../../styles/reset.js";
-
-export type InputType = "text" | "password" | "email" | "number" | "search" | "url";
-
-@customElement("st-input")
-export class StInput extends LitElement {
-  static formAssociated = true;
-  private _internals: ElementInternals;
-
-  @query("input") private _inputEl!: HTMLInputElement;
-  @property({type: String, reflect: true}) name = "";
-  @property({type: String}) label = "";
-  @property({type: String}) value = "";
-  @property({type: String}) placeholder = "";
-  @property({type: String}) type: InputType = "text";
-  @property({attribute: "help-text"}) helpText = "";
-
-  // Validation Properties
-  @property({type: Boolean, reflect: true}) required = false;
-  @property({type: Number}) minlength?: number;
-  @property({type: Number}) maxlength?: number;
-  @property({type: String}) pattern?: string;
-
-  @property({type: Boolean, reflect: true}) disabled = false;
-  @property({type: Boolean, reflect: true}) invalid = false;
-  @property({type: Boolean, reflect: true}) readonly = false;
-
-  constructor() {
-    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;
-    });
-  }
-
-  static styles = [
-    resetStyles,
-    css`
-      :host {
-        display: block;
-      }
-
-      .form-control {
-        display: flex;
-        flex-direction: column;
-        gap: var(--st-spacing-xs);
-      }
-
-      label {
-        font-size: var(--st-font-size-sm);
-        font-weight: var(--st-font-weight-medium);
-        color: var(--st-color-text);
-        margin-bottom: 0.5em;
-      }
-
-      /* 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);
-      }
-
-      input::placeholder {
-        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 */
-      :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,
-      this._inputEl,
-    );
-  }
-
-  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();
-  }
-
-  reportValidity() {
-    return this._internals.reportValidity();
-  }
-
-  private _handleInput(e: Event) {
-    const target = e.target as HTMLTextAreaElement;
-    this.value = target.value;
-
-    if (this.invalid && target.validity.valid) {
-      this.invalid = false;
-    }
-
-    this.dispatchEvent(new Event("input", {bubbles: true, composed: true}));
-  }
-
-  private _handleChange(e: Event) {
-    this.dispatchEvent(new Event("change", {bubbles: true, composed: true}));
-  }
-
-  render() {
-    return html`
-      <div class="form-control">
-        ${this.label ? html`<label for="input">${this.label}</label>` : ""}
-
-        <div class="input-wrapper">
-          <slot name="prefix"></slot>
-
-          <input
-            id="input"
-            type=${this.type}
-            .name=${this.name}
-            .value=${this.value}
-            placeholder=${this.placeholder}
-            ?disabled=${this.disabled}
-            ?readonly=${this.readonly}
-            ?required=${this.required}
-            minlength=${ifDefined(this.minlength)}
-            maxlength=${ifDefined(this.maxlength)}
-            pattern=${ifDefined(this.pattern)}
-            @input=${this._handleInput}
-            @change=${this._handleChange}
-          />
-
-          <slot name="suffix"></slot>
-        </div>
-
-        ${this.helpText ? html`<div class="help-text">${this.helpText}</div>` : ""}
-      </div>
-    `;
-  }
-}
+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 {resetStyles} from "../../styles/reset.js";
+
+export type InputType = "text" | "password" | "email" | "number" | "search" | "url";
+
+@customElement("st-input")
+export class StInput extends LitElement {
+  static formAssociated = true;
+  private _internals: ElementInternals;
+
+  @query("input") private _inputEl!: HTMLInputElement;
+  @property({type: String, reflect: true}) name = "";
+  @property({type: String}) label = "";
+  @property({type: String}) value = "";
+  @property({type: String}) placeholder = "";
+  @property({type: String}) type: InputType = "text";
+  @property({attribute: "help-text"}) helpText = "";
+
+  // Validation Properties
+  @property({type: Boolean, reflect: true}) required = false;
+  @property({type: Number}) minlength?: number;
+  @property({type: Number}) maxlength?: number;
+  @property({type: String}) pattern?: string;
+
+  @property({type: Boolean, reflect: true}) disabled = false;
+  @property({type: Boolean, reflect: true}) invalid = false;
+  @property({type: Boolean, reflect: true}) readonly = false;
+
+  constructor() {
+    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;
+    });
+  }
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: block;
+      }
+
+      .form-control {
+        display: flex;
+        flex-direction: column;
+        gap: var(--st-spacing-xs);
+      }
+
+      label {
+        font-size: var(--st-font-size-sm);
+        font-weight: var(--st-font-weight-medium);
+        color: var(--st-color-text);
+        margin-bottom: 0.5em;
+      }
+
+      /* 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);
+      }
+
+      input::placeholder {
+        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 */
+      :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,
+      this._inputEl,
+    );
+  }
+
+  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();
+  }
+
+  reportValidity() {
+    return this._internals.reportValidity();
+  }
+
+  private _handleInput(e: Event) {
+    const target = e.target as HTMLTextAreaElement;
+    this.value = target.value;
+
+    if (this.invalid && target.validity.valid) {
+      this.invalid = false;
+    }
+
+    this.dispatchEvent(new Event("input", {bubbles: true, composed: true}));
+  }
+
+  private _handleChange(e: Event) {
+    this.dispatchEvent(new Event("change", {bubbles: true, composed: true}));
+  }
+
+  render() {
+    return html`
+      <div class="form-control">
+        ${this.label ? html`<label for="input">${this.label}</label>` : ""}
+
+        <div class="input-wrapper">
+          <slot name="prefix"></slot>
+
+          <input
+            id="input"
+            type=${this.type}
+            .name=${this.name}
+            .value=${this.value}
+            placeholder=${this.placeholder}
+            ?disabled=${this.disabled}
+            ?readonly=${this.readonly}
+            ?required=${this.required}
+            minlength=${ifDefined(this.minlength)}
+            maxlength=${ifDefined(this.maxlength)}
+            pattern=${ifDefined(this.pattern)}
+            @input=${this._handleInput}
+            @change=${this._handleChange}
+          />
+
+          <slot name="suffix"></slot>
+        </div>
+
+        ${this.helpText ? html`<div class="help-text">${this.helpText}</div>` : ""}
+      </div>
+    `;
+  }
+}