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

package/dist/components/textarea/textarea.js

@@ -0,0 +1,231 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,130 @@
+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

@@ -0,0 +1,10 @@
+import { LitElement } from 'lit';
+export declare class StNavGroup extends LitElement {
+    label: string;
+    open: boolean;
+    depth: number;
+    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

@@ -0,0 +1 @@
+{"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;IAC7B,KAAK,SAAK;IAEtC,MAAM,CAAC,MAAM,4BA8EX;IAEF,OAAO,CAAC,OAAO;IAIf,MAAM,yCAcL;CACF"}

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

@@ -0,0 +1,127 @@
+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;
+        this.depth = 0;
+    }
+    _toggle() {
+        this.open = !this.open;
+    }
+    render() {
+        return html `
+      <button @click=${this._toggle} aria-expanded=${this.open} style="--nav-depth: ${this.depth}">
+        <slot name="icon"></slot>
+        <span class="label">${this.label}</span>
+        <svg class="chevron" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"></path></svg>
+      </button>
+      
+      <div class="drawer">
+        <div class="drawer-content">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+    }
+};
+StNavGroup.styles = [
+    resetStyles,
+    css `
+      :host {
+        display: block;
+        margin-bottom: 2px;
+        overflow: hidden;
+      }
+
+      button {
+        display: flex;
+        align-items: center;
+        gap: var(--st-spacing-sm, 8px);
+        width: 100%;
+        box-sizing: border-box;
+        background: transparent;
+        border: none;
+        padding: var(--st-spacing-sm) var(--st-spacing-xl);
+        padding-left: calc(var(--st-spacing-xl, 24px) + (var(--nav-depth, 0) * 16px));
+        color: var(--st-color-text);
+        font-size: var(--st-font-size-sm);
+        font-weight: var(--st-font-weight-semibold);
+        cursor: pointer;
+        transition: background-color 0.2s ease, color 0.2s ease;
+      }
+
+      button:hover {
+        background-color: var(--st-color-surface-hover, rgba(0,0,0,0.03));
+      }
+
+      /* Styles for slotted icons */
+      ::slotted([slot="icon"]) {
+        width: 1rem;
+        height: 1rem;
+        flex-shrink: 0;
+        color: var(--st-color-text-muted);
+      }
+
+      .label {
+        flex: 1;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        text-align: left;
+      }
+
+      svg.chevron {
+        width: 1rem;
+        height: 1rem;
+        flex-shrink: 0;
+        fill: none;
+        stroke: currentColor;
+        stroke-width: 2;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        transition: transform 0.2s ease;
+      }
+
+      :host([open]) svg.chevron {
+        transform: rotate(180deg);
+      }
+
+      .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;
+      }
+    `
+];
+__decorate([
+    property({ type: String })
+], StNavGroup.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], StNavGroup.prototype, "open", void 0);
+__decorate([
+    property({ type: Number })
+], StNavGroup.prototype, "depth", void 0);
+StNavGroup = __decorate([
+    customElement('st-vertical-nav-group')
+], StNavGroup);
+export { StNavGroup };

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

@@ -0,0 +1,9 @@
+import { LitElement } from 'lit';
+export declare class StNavItem extends LitElement {
+    href: string;
+    active: boolean;
+    depth: number;
+    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

@@ -0,0 +1 @@
+{"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;IAC/B,KAAK,SAAK;IAEtC,MAAM,CAAC,MAAM,4BA8CX;IAEF,MAAM,yCAOL;CACF"}

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

@@ -0,0 +1,85 @@
+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;
+        this.depth = 0;
+    }
+    render() {
+        return html `
+      <a href=${this.href} part="link" style="--nav-depth: ${this.depth}">
+        <slot name="icon"></slot>
+        <slot></slot>
+      </a>
+    `;
+    }
+};
+StNavItem.styles = [
+    resetStyles,
+    css `
+      :host {
+        display: block;
+        overflow: hidden;
+      }
+
+      a {
+        display: flex;
+        align-items: center;
+        gap: var(--st-spacing-sm, 8px);
+        width: 100%;
+        box-sizing: border-box;
+        padding: 8px var(--st-spacing-xl);
+        padding-left: calc(var(--st-spacing-xl, 24px) + (var(--nav-depth, 0) * 16px));
+        color: var(--st-color-text-muted);
+        font-size: var(--st-font-size-sm);
+        text-decoration: none;
+        border-left: 3px solid transparent;
+        transition: all 0.15s ease;
+
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      a:hover {
+        color: var(--st-color-text);
+        background-color: var(--st-color-surface-hover, rgba(0,0,0,0.03));
+      }
+
+      ::slotted([slot="icon"]) {
+        width: 1rem;
+        height: 1rem;
+        flex-shrink: 0;
+        color: inherit;
+      }
+
+      :host([active]) a {
+        color: var(--st-color-primary);
+        border-left-color: var(--st-color-primary);
+        font-weight: var(--st-font-weight-bold);
+        background-color: var(--st-color-primary-light, rgba(98, 0, 238, 0.05));
+      }
+    `
+];
+__decorate([
+    property({ type: String })
+], StNavItem.prototype, "href", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], StNavItem.prototype, "active", void 0);
+__decorate([
+    property({ type: Number })
+], StNavItem.prototype, "depth", void 0);
+StNavItem = __decorate([
+    customElement('st-vertical-nav-item')
+], StNavItem);
+export { StNavItem };