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

package/dist/components/textarea/textarea.js

@@ -1,231 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { LitElement, html, css } from "lit";
-import { customElement, property, query } from "lit/decorators.js";
-import { ifDefined } from "lit/directives/if-defined.js";
-import { resetStyles } from "../../styles/reset.js";
-let StTextarea = class StTextarea extends LitElement {
-    constructor() {
-        super();
-        this.name = "";
-        this.label = "";
-        this.value = "";
-        this.placeholder = "";
-        this.helpText = "";
-        // Textarea specific properties
-        this.rows = 4;
-        this.resize = "vertical";
-        // Validation
-        this.required = false;
-        // States
-        this.disabled = false;
-        this.invalid = false;
-        this.readonly = false;
-        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;
-        });
-    }
-    updated(changedProperties) {
-        super.updated(changedProperties);
-        if (changedProperties.has("value")) {
-            this._internals.setFormValue(this.value);
-        }
-        this._syncValidity();
-    }
-    _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();
-    }
-    _handleInput(e) {
-        const target = e.target;
-        this.value = target.value;
-        if (this.invalid && target.validity.valid) {
-            this.invalid = false;
-        }
-        this.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
-    }
-    _handleChange(e) {
-        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>
-    `;
-    }
-};
-StTextarea.formAssociated = true;
-StTextarea.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;
-      }
-    `,
-];
-__decorate([
-    query("textarea")
-], StTextarea.prototype, "_textareaEl", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], StTextarea.prototype, "name", void 0);
-__decorate([
-    property({ type: String })
-], StTextarea.prototype, "label", void 0);
-__decorate([
-    property({ type: String })
-], StTextarea.prototype, "value", void 0);
-__decorate([
-    property({ type: String })
-], StTextarea.prototype, "placeholder", void 0);
-__decorate([
-    property({ attribute: "help-text" })
-], StTextarea.prototype, "helpText", void 0);
-__decorate([
-    property({ type: Number })
-], StTextarea.prototype, "rows", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], StTextarea.prototype, "resize", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], StTextarea.prototype, "required", void 0);
-__decorate([
-    property({ type: Number })
-], StTextarea.prototype, "minlength", void 0);
-__decorate([
-    property({ type: Number })
-], StTextarea.prototype, "maxlength", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], StTextarea.prototype, "disabled", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], StTextarea.prototype, "invalid", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], StTextarea.prototype, "readonly", void 0);
-StTextarea = __decorate([
-    customElement("st-textarea")
-], StTextarea);
-export { StTextarea };

package/dist/components/theme-toggle/theme-toggle.d.ts

@@ -1,15 +0,0 @@
-import { LitElement } from "lit";
-export type ThemeMode = "light" | "system" | "dark";
-export declare class StThemeToggle extends LitElement {
-    theme: ThemeMode;
-    static styles: import("lit").CSSResult[];
-    private _handleThemeChange;
-    connectedCallback(): void;
-    render(): import("lit-html").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        "st-theme-toggle": StThemeToggle;
-    }
-}
-//# sourceMappingURL=theme-toggle.d.ts.map

package/dist/components/theme-toggle/theme-toggle.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"theme-toggle.d.ts","sourceRoot":"","sources":["../../../src/components/theme-toggle/theme-toggle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAI1C,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAEpD,qBACa,aAAc,SAAQ,UAAU;IACF,KAAK,EAAE,SAAS,CAAY;IAErE,MAAM,CAAC,MAAM,4BAkDX;IAEF,OAAO,CAAC,kBAAkB;IAajB,iBAAiB,SAOzB;IAED,MAAM,yCAuCL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}

package/dist/components/theme-toggle/theme-toggle.js

@@ -1,130 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { LitElement, html, css } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import { resetStyles } from "../../styles/reset.js";
-let StThemeToggle = class StThemeToggle extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.theme = "system";
-    }
-    _handleThemeChange(newTheme) {
-        this.theme = newTheme;
-        // Dispatch an event so the consuming app knows to update the document root
-        this.dispatchEvent(new CustomEvent("st-theme-change", {
-            detail: { theme: newTheme },
-            bubbles: true,
-            composed: true,
-        }));
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        // Check the html tag for the theme injected by your blocking <head> script
-        const rootTheme = document.documentElement.getAttribute("data-theme");
-        if (rootTheme) {
-            this.theme = rootTheme;
-        }
-    }
-    render() {
-        return html `
-      <button
-        aria-pressed=${this.theme === "light"}
-        title="Light Mode"
-        @click=${() => this._handleThemeChange("light")}
-      >
-        <!-- Sun Icon -->
-        <svg viewBox="0 0 24 24">
-          <circle cx="12" cy="12" r="5"></circle>
-          <path
-            d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"
-          ></path>
-        </svg>
-      </button>
-
-      <button
-        aria-pressed=${this.theme === "system"}
-        title="System Preference"
-        @click=${() => this._handleThemeChange("system")}
-      >
-        <!-- Monitor/System Icon -->
-        <svg viewBox="0 0 24 24">
-          <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
-          <path d="M8 21h8M12 17v4"></path>
-        </svg>
-      </button>
-
-      <button
-        aria-pressed=${this.theme === "dark"}
-        title="Dark Mode"
-        @click=${() => this._handleThemeChange("dark")}
-      >
-        <!-- Moon Icon -->
-        <svg viewBox="0 0 24 24">
-          <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path>
-        </svg>
-      </button>
-    `;
-    }
-};
-StThemeToggle.styles = [
-    resetStyles,
-    css `
-      :host {
-        display: inline-flex;
-        /* Use semantic tokens for the container */
-        background-color: var(--st-color-surface);
-        border: 1px solid var(--st-color-border);
-        border-radius: 999px;
-        padding: 4px;
-        gap: 2px;
-      }
-
-      button {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 28px;
-        height: 28px;
-        border-radius: 50%;
-        border: none;
-        background: transparent;
-        color: var(--st-color-text-muted);
-        cursor: pointer;
-        transition: all 0.2s ease;
-      }
-
-      button:hover {
-        color: var(--st-color-text);
-      }
-
-      /* Active State Styling */
-      button[aria-pressed="true"] {
-        /* Use the main background color so the active pill "pops" out of the surface */
-        background-color: var(--st-color-bg);
-        color: var(--st-color-primary);
-        /* Subtle shadow to lift the active pill */
-        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-      }
-
-      svg {
-        width: 16px;
-        height: 16px;
-        fill: none;
-        stroke: currentColor;
-        stroke-width: 2;
-        stroke-linecap: round;
-        stroke-linejoin: round;
-      }
-    `,
-];
-__decorate([
-    property({ type: String, reflect: true })
-], StThemeToggle.prototype, "theme", void 0);
-StThemeToggle = __decorate([
-    customElement("st-theme-toggle")
-], StThemeToggle);
-export { StThemeToggle };

package/dist/components/vertical-nav/vertical-nav-group.d.ts

@@ -1,9 +0,0 @@
-import { LitElement } from 'lit';
-export declare class StNavGroup extends LitElement {
-    label: string;
-    open: boolean;
-    static styles: import("lit").CSSResult[];
-    private _toggle;
-    render(): import("lit-html").TemplateResult<1>;
-}
-//# sourceMappingURL=vertical-nav-group.d.ts.map

package/dist/components/vertical-nav/vertical-nav-group.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"vertical-nav-group.d.ts","sourceRoot":"","sources":["../../../src/components/vertical-nav/vertical-nav-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,qBACa,UAAW,SAAQ,UAAU;IACZ,KAAK,SAAM;IACK,IAAI,UAAS;IAEzD,MAAM,CAAC,MAAM,4BA8DX;IAEF,OAAO,CAAC,OAAO;IAIf,MAAM,yCAkBL;CACF"}

package/dist/components/vertical-nav/vertical-nav-group.js

@@ -1,111 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { resetStyles } from '../../styles/reset.js';
-let StNavGroup = class StNavGroup extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.label = '';
-        this.open = false;
-    }
-    _toggle() {
-        this.open = !this.open;
-    }
-    render() {
-        return html `
-      <button @click=${this._toggle} aria-expanded=${this.open}>
-        ${this.label}
-        <svg viewBox="0 0 24 24">
-          <path d="M6 9l6 6 6-6"></path>
-        </svg>
-      </button>
-      
-      <div class="drawer">
-        <div class="drawer-content">
-          <!-- We add slight padding top/bottom so the inner links breathe -->
-          <div style="padding: 4px 0;">
-            <slot></slot>
-          </div>
-        </div>
-      </div>
-    `;
-    }
-};
-StNavGroup.styles = [
-    resetStyles,
-    css `
-      :host {
-        display: block;
-        margin-bottom: var(--st-spacing-sm);
-      }
-
-      button {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        width: 100%;
-        background: transparent;
-        border: none;
-        padding: var(--st-spacing-xs) var(--st-spacing-lg);
-        color: var(--st-color-text);
-        font-size: var(--st-font-size-sm);
-        font-weight: var(--st-font-weight-bold);
-        cursor: pointer;
-        text-align: left;
-        transition: color 0.2s ease;
-      }
-
-      button:hover {
-        color: var(--st-color-primary);
-      }
-
-      svg {
-        width: 1rem;
-        height: 1rem;
-        fill: none;
-        stroke: currentColor;
-        stroke-width: 2;
-        stroke-linecap: round;
-        stroke-linejoin: round;
-        transition: transform 0.2s ease;
-      }
-
-      /* Rotate Chevron when open */
-      :host([open]) svg {
-        transform: rotate(180deg);
-      }
-
-      /* Modern CSS Grid Animation trick for accordion height */
-      .drawer {
-        display: grid;
-        grid-template-rows: 0fr;
-        transition: grid-template-rows 0.2s ease-in-out;
-      }
-
-      :host([open]) .drawer {
-        grid-template-rows: 1fr;
-      }
-
-      .drawer-content {
-        overflow: hidden;
-        display: flex;
-        flex-direction: column;
-        gap: 2px;
-      }
-    `
-];
-__decorate([
-    property({ type: String })
-], StNavGroup.prototype, "label", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], StNavGroup.prototype, "open", void 0);
-StNavGroup = __decorate([
-    customElement('st-vertical-nav-group')
-], StNavGroup);
-export { StNavGroup };

package/dist/components/vertical-nav/vertical-nav-item.d.ts

@@ -1,8 +0,0 @@
-import { LitElement } from 'lit';
-export declare class StNavItem extends LitElement {
-    href: string;
-    active: boolean;
-    static styles: import("lit").CSSResult[];
-    render(): import("lit-html").TemplateResult<1>;
-}
-//# sourceMappingURL=vertical-nav-item.d.ts.map

package/dist/components/vertical-nav/vertical-nav-item.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"vertical-nav-item.d.ts","sourceRoot":"","sources":["../../../src/components/vertical-nav/vertical-nav-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,qBACa,SAAU,SAAQ,UAAU;IACX,IAAI,SAAO;IACK,MAAM,UAAS;IAE3D,MAAM,CAAC,MAAM,4BA+BX;IAEF,MAAM,yCAML;CACF"}

package/dist/components/vertical-nav/vertical-nav-item.js

@@ -1,65 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { resetStyles } from '../../styles/reset.js';
-let StNavItem = class StNavItem extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.href = '#';
-        this.active = false;
-    }
-    render() {
-        return html `
-      <a href=${this.href} part="link">
-        <slot></slot>
-      </a>
-    `;
-    }
-};
-StNavItem.styles = [
-    resetStyles,
-    css `
-      :host {
-        display: block;
-      }
-
-      a {
-        display: flex;
-        align-items: center;
-        padding: 6px var(--st-spacing-lg);
-        color: var(--st-color-text-muted);
-        font-size: var(--st-font-size-sm);
-        text-decoration: none;
-        border-left: 2px solid transparent;
-        transition: all 0.15s ease;
-      }
-
-      a:hover {
-        color: var(--st-color-text);
-        background-color: var(--st-color-surface);
-      }
-
-      /* Active state: Purple text with a left border indicator */
-      :host([active]) a {
-        color: var(--st-color-primary);
-        border-left-color: var(--st-color-primary);
-        font-weight: var(--st-font-weight-medium);
-        background-color: transparent;
-      }
-    `
-];
-__decorate([
-    property({ type: String })
-], StNavItem.prototype, "href", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], StNavItem.prototype, "active", void 0);
-StNavItem = __decorate([
-    customElement('st-vertical-nav-item')
-], StNavItem);
-export { StNavItem };