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

package/src/components/tabs/tabs.ts

@@ -1,88 +1,88 @@
-import "./tab.js";
-import "./tab-panel.js";
-
-import {LitElement, html, css} from "lit";
-import {customElement, queryAssignedElements} from "lit/decorators.js";
-import {resetStyles} from "../../styles/reset.js";
-import type {StTab} from "./tab.js";
-import type {StTabPanel} from "./tab-panel.js";
-
-@customElement("st-tabs")
-export class StTabs extends LitElement {
-  @queryAssignedElements({slot: "nav", selector: "st-tab"})
-  private _tabs!: StTab[];
-
-  @queryAssignedElements({selector: "st-tab-panel"})
-  private _panels!: StTabPanel[];
-
-  static styles = [
-    resetStyles,
-    css`
-      :host {
-        display: block;
-      }
-
-      .nav-container {
-        display: flex;
-        /* Creates the track line underneath the tabs */
-        border-bottom: 1px solid var(--st-color-border);
-        gap: var(--st-spacing-xs);
-        overflow-x: auto; /* Allows tabs to scroll horizontally on small screens */
-        scrollbar-width: none; /* Hides scrollbar on Firefox */
-      }
-
-      .nav-container::-webkit-scrollbar {
-        display: none; /* Hides scrollbar on Chrome/Safari */
-      }
-    `,
-  ];
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener("st-tab-select", this._handleTabSelect as EventListener);
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.removeEventListener("st-tab-select", this._handleTabSelect as EventListener);
-  }
-
-  private _handleTabSelect(e: CustomEvent<{panel: string}>) {
-    // 1. Stop the event here so parent <st-tabs> instances don't react to it
-    e.stopPropagation();
-
-    const targetPanel = e.detail.panel;
-
-    // Update active states on all tabs
-    this._tabs.forEach((tab) => {
-      tab.active = tab.panel === targetPanel;
-    });
-
-    // Update active states on all panels
-    this._panels.forEach((panel) => {
-      panel.active = panel.name === targetPanel;
-    });
-  }
-
-  // Ensures the first tab is active by default if none are explicitly set
-  private _handleSlotChange() {
-    if (!this._tabs.length || !this._panels.length) return;
-
-    const hasActiveTab = this._tabs.some((tab) => tab.active);
-    if (!hasActiveTab) {
-      this._tabs[0].active = true;
-      this._panels[0].active = true;
-    }
-  }
-
-  render() {
-    return html`
-      <div class="nav-container" role="tablist">
-        <slot name="nav" @slotchange=${this._handleSlotChange}></slot>
-      </div>
-      <div class="panels-container">
-        <slot></slot>
-      </div>
-    `;
-  }
-}
+import "./tab.js";
+import "./tab-panel.js";
+
+import {LitElement, html, css} from "lit";
+import {customElement, queryAssignedElements} from "lit/decorators.js";
+import {resetStyles} from "../../styles/reset.js";
+import type {StTab} from "./tab.js";
+import type {StTabPanel} from "./tab-panel.js";
+
+@customElement("st-tabs")
+export class StTabs extends LitElement {
+  @queryAssignedElements({slot: "nav", selector: "st-tab"})
+  private _tabs!: StTab[];
+
+  @queryAssignedElements({selector: "st-tab-panel"})
+  private _panels!: StTabPanel[];
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: block;
+      }
+
+      .nav-container {
+        display: flex;
+        /* Creates the track line underneath the tabs */
+        border-bottom: 1px solid var(--st-color-border);
+        gap: var(--st-spacing-xs);
+        overflow-x: auto; /* Allows tabs to scroll horizontally on small screens */
+        scrollbar-width: none; /* Hides scrollbar on Firefox */
+      }
+
+      .nav-container::-webkit-scrollbar {
+        display: none; /* Hides scrollbar on Chrome/Safari */
+      }
+    `,
+  ];
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("st-tab-select", this._handleTabSelect as EventListener);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("st-tab-select", this._handleTabSelect as EventListener);
+  }
+
+  private _handleTabSelect(e: CustomEvent<{panel: string}>) {
+    // 1. Stop the event here so parent <st-tabs> instances don't react to it
+    e.stopPropagation();
+
+    const targetPanel = e.detail.panel;
+
+    // Update active states on all tabs
+    this._tabs.forEach((tab) => {
+      tab.active = tab.panel === targetPanel;
+    });
+
+    // Update active states on all panels
+    this._panels.forEach((panel) => {
+      panel.active = panel.name === targetPanel;
+    });
+  }
+
+  // Ensures the first tab is active by default if none are explicitly set
+  private _handleSlotChange() {
+    if (!this._tabs.length || !this._panels.length) return;
+
+    const hasActiveTab = this._tabs.some((tab) => tab.active);
+    if (!hasActiveTab) {
+      this._tabs[0].active = true;
+      this._panels[0].active = true;
+    }
+  }
+
+  render() {
+    return html`
+      <div class="nav-container" role="tablist">
+        <slot name="nav" @slotchange=${this._handleSlotChange}></slot>
+      </div>
+      <div class="panels-container">
+        <slot></slot>
+      </div>
+    `;
+  }
+}

package/src/components/textarea/textarea.ts

@@ -1,215 +1,215 @@
-import {LitElement, html, css, PropertyValues} from "lit";
-import {customElement, property, query} from "lit/decorators.js";
-import {ifDefined} from "lit/directives/if-defined.js";
-import {resetStyles} from "../../styles/reset.js";
-
-export type TextareaResize = "none" | "vertical" | "horizontal" | "both";
-
-@customElement("st-textarea")
-export class StTextarea extends LitElement {
-  static formAssociated = true;
-  private _internals: ElementInternals;
-
-  @query("textarea") private _textareaEl!: HTMLTextAreaElement;
-
-  @property({type: String, reflect: true}) name = "";
-  @property({type: String}) label = "";
-  @property({type: String}) value = "";
-  @property({type: String}) placeholder = "";
-  @property({attribute: "help-text"}) helpText = "";
-
-  // Textarea specific properties
-  @property({type: Number}) rows = 4;
-  @property({type: String, reflect: true}) resize: TextareaResize = "vertical";
-
-  // Validation
-  @property({type: Boolean, reflect: true}) required = false;
-  @property({type: Number}) minlength?: number;
-  @property({type: Number}) maxlength?: number;
-
-  // States
-  @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._textareaEl.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);
-      }
-
-      textarea {
-        width: 100%;
-        padding: var(--st-spacing-sm) var(--st-spacing-md);
-        font-size: var(--st-font-size-base);
-        font-family: inherit;
-        color: var(--st-color-text);
-        background-color: var(--st-color-bg);
-        border: 1px solid var(--st-color-border);
-        border-radius: 4px;
-        transition:
-          border-color 0.2s ease,
-          box-shadow 0.2s ease;
-
-        /* Map the resize property */
-        resize: vertical;
-      }
-
-      /* Dynamically handle resize constraints based on the host attribute */
-      :host([resize="none"]) textarea {
-        resize: none;
-      }
-      :host([resize="horizontal"]) textarea {
-        resize: horizontal;
-      }
-      :host([resize="both"]) textarea {
-        resize: both;
-      }
-
-      textarea::placeholder {
-        color: var(--st-color-text-muted);
-      }
-
-      textarea:focus {
-        outline: none;
-        border-color: var(--st-color-primary);
-        box-shadow: 0 0 0 1px var(--st-color-primary);
-      }
-
-      /* Validation States */
-      :host([invalid]) textarea {
-        border-color: var(--st-color-error);
-      }
-
-      :host([invalid]) textarea:focus {
-        box-shadow: 0 0 0 1px var(--st-color-error);
-      }
-
-      :host([invalid]) .help-text {
-        color: var(--st-color-error);
-      }
-
-      /* Disabled & Readonly */
-      :host([disabled]) textarea {
-        opacity: 0.5;
-        cursor: not-allowed;
-        background-color: var(--st-color-surface);
-      }
-
-      :host([readonly]) textarea {
-        background-color: var(--st-color-surface);
-      }
-
-      .help-text {
-        font-size: var(--st-font-size-xs);
-        color: var(--st-color-text-muted);
-        margin: 0;
-      }
-    `,
-  ];
-
-  override updated(changedProperties: PropertyValues<this>) {
-    super.updated(changedProperties);
-
-    if (changedProperties.has("value")) {
-      this._internals.setFormValue(this.value);
-    }
-    this._syncValidity();
-  }
-
-  private _syncValidity() {
-    if (!this._textareaEl) return;
-    this._internals.setValidity(
-      this._textareaEl.validity,
-      this._textareaEl.validationMessage,
-      this._textareaEl,
-    );
-  }
-
-  formResetCallback() {
-    this.value = "";
-    this._internals.setFormValue("");
-    this.updateComplete.then(() => this._syncValidity());
-  }
-
-  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="textarea">${this.label}</label>` : ""}
-
-        <textarea
-          id="textarea"
-          .name=${this.name}
-          .value=${this.value}
-          placeholder=${this.placeholder}
-          rows=${this.rows}
-          ?disabled=${this.disabled}
-          ?readonly=${this.readonly}
-          ?required=${this.required}
-          minlength=${ifDefined(this.minlength)}
-          maxlength=${ifDefined(this.maxlength)}
-          @input=${this._handleInput}
-          @change=${this._handleChange}
-        ></textarea>
-
-        ${this.helpText ? html`<div class="help-text">${this.helpText}</div>` : ""}
-      </div>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "st-textarea": StTextarea;
-  }
-}
+import {LitElement, html, css, PropertyValues} from "lit";
+import {customElement, property, query} from "lit/decorators.js";
+import {ifDefined} from "lit/directives/if-defined.js";
+import {resetStyles} from "../../styles/reset.js";
+
+export type TextareaResize = "none" | "vertical" | "horizontal" | "both";
+
+@customElement("st-textarea")
+export class StTextarea extends LitElement {
+  static formAssociated = true;
+  private _internals: ElementInternals;
+
+  @query("textarea") private _textareaEl!: HTMLTextAreaElement;
+
+  @property({type: String, reflect: true}) name = "";
+  @property({type: String}) label = "";
+  @property({type: String}) value = "";
+  @property({type: String}) placeholder = "";
+  @property({attribute: "help-text"}) helpText = "";
+
+  // Textarea specific properties
+  @property({type: Number}) rows = 4;
+  @property({type: String, reflect: true}) resize: TextareaResize = "vertical";
+
+  // Validation
+  @property({type: Boolean, reflect: true}) required = false;
+  @property({type: Number}) minlength?: number;
+  @property({type: Number}) maxlength?: number;
+
+  // States
+  @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._textareaEl.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);
+      }
+
+      textarea {
+        width: 100%;
+        padding: var(--st-spacing-sm) var(--st-spacing-md);
+        font-size: var(--st-font-size-base);
+        font-family: inherit;
+        color: var(--st-color-text);
+        background-color: var(--st-color-bg);
+        border: 1px solid var(--st-color-border);
+        border-radius: 4px;
+        transition:
+          border-color 0.2s ease,
+          box-shadow 0.2s ease;
+
+        /* Map the resize property */
+        resize: vertical;
+      }
+
+      /* Dynamically handle resize constraints based on the host attribute */
+      :host([resize="none"]) textarea {
+        resize: none;
+      }
+      :host([resize="horizontal"]) textarea {
+        resize: horizontal;
+      }
+      :host([resize="both"]) textarea {
+        resize: both;
+      }
+
+      textarea::placeholder {
+        color: var(--st-color-text-muted);
+      }
+
+      textarea:focus {
+        outline: none;
+        border-color: var(--st-color-primary);
+        box-shadow: 0 0 0 1px var(--st-color-primary);
+      }
+
+      /* Validation States */
+      :host([invalid]) textarea {
+        border-color: var(--st-color-error);
+      }
+
+      :host([invalid]) textarea:focus {
+        box-shadow: 0 0 0 1px var(--st-color-error);
+      }
+
+      :host([invalid]) .help-text {
+        color: var(--st-color-error);
+      }
+
+      /* Disabled & Readonly */
+      :host([disabled]) textarea {
+        opacity: 0.5;
+        cursor: not-allowed;
+        background-color: var(--st-color-surface);
+      }
+
+      :host([readonly]) textarea {
+        background-color: var(--st-color-surface);
+      }
+
+      .help-text {
+        font-size: var(--st-font-size-xs);
+        color: var(--st-color-text-muted);
+        margin: 0;
+      }
+    `,
+  ];
+
+  override updated(changedProperties: PropertyValues<this>) {
+    super.updated(changedProperties);
+
+    if (changedProperties.has("value")) {
+      this._internals.setFormValue(this.value);
+    }
+    this._syncValidity();
+  }
+
+  private _syncValidity() {
+    if (!this._textareaEl) return;
+    this._internals.setValidity(
+      this._textareaEl.validity,
+      this._textareaEl.validationMessage,
+      this._textareaEl,
+    );
+  }
+
+  formResetCallback() {
+    this.value = "";
+    this._internals.setFormValue("");
+    this.updateComplete.then(() => this._syncValidity());
+  }
+
+  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="textarea">${this.label}</label>` : ""}
+
+        <textarea
+          id="textarea"
+          .name=${this.name}
+          .value=${this.value}
+          placeholder=${this.placeholder}
+          rows=${this.rows}
+          ?disabled=${this.disabled}
+          ?readonly=${this.readonly}
+          ?required=${this.required}
+          minlength=${ifDefined(this.minlength)}
+          maxlength=${ifDefined(this.maxlength)}
+          @input=${this._handleInput}
+          @change=${this._handleChange}
+        ></textarea>
+
+        ${this.helpText ? html`<div class="help-text">${this.helpText}</div>` : ""}
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-textarea": StTextarea;
+  }
+}