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

package/dist/components/select/select.js

@@ -4,169 +4,477 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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';
+import { LitElement, html, css } from "lit";
+import { customElement, property, state, query } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
 let StSelect = class StSelect extends LitElement {
     constructor() {
         super();
-        this.size = 'md';
-        this.variant = 'outline';
-        this.color = 'default';
-        // Internal state to handle the chevron animation when the slotted select is focused
-        this.focused = false;
-        // Track focus states to animate the chevron
-        this.addEventListener('focusin', () => this.focused = true);
-        this.addEventListener('focusout', () => this.focused = false);
+        this.name = "";
+        this.label = "";
+        this.value = "";
+        this.required = false;
+        this.multiple = false;
+        this.searchable = false;
+        this.options = [];
+        this.error = "";
+        this.disabled = false;
+        this.invalid = false;
+        this.autocomplete = "off";
+        this.open = false;
+        this.filterText = "";
+        this.nativeError = "";
+        this.touched = false;
+        this.internals = this.attachInternals();
+        this.handleClickOutside = this.handleClickOutside.bind(this);
+    }
+    // 2. Public API methods expected by st-form
+    checkValidity() {
+        return this.internals.checkValidity();
+    }
+    reportValidity() {
+        const isValid = this.checkValidity();
+        this.touched = true; // Force UI to reveal the error
+        this.invalid = !isValid;
+        return isValid;
+    }
+    // 3. Override native focus to target the internal combobox button
+    focus(options) {
+        this.buttonElement?.focus(options);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener("click", this.handleClickOutside);
+        this.addEventListener("invalid", () => {
+            this.touched = true;
+            this.invalid = true;
+        });
+    }
+    disconnectedCallback() {
+        document.removeEventListener("click", this.handleClickOutside);
+        super.disconnectedCallback();
+    }
+    willUpdate(changedProperties) {
+        if (changedProperties.has("value") ||
+            changedProperties.has("required") ||
+            changedProperties.has("error")) {
+            this.validate();
+        }
+    }
+    get selectedValues() {
+        if (!this.value)
+            return [];
+        return this.value
+            .split(",")
+            .map((v) => v.trim())
+            .filter(Boolean);
+    }
+    validate() {
+        this.internals.setFormValue(this.value);
+        const isMissing = this.required && this.selectedValues.length === 0;
+        if (this.error) {
+            this.internals.setValidity({ customError: true }, this.error);
+            this.nativeError = this.error;
+        }
+        else if (isMissing) {
+            const msg = "Please make a selection.";
+            this.internals.setValidity({ valueMissing: true }, msg);
+            this.nativeError = msg;
+        }
+        else {
+            this.internals.setValidity({});
+            this.nativeError = "";
+            this.invalid = false;
+        }
+    }
+    handleClickOutside(e) {
+        const path = e.composedPath();
+        if (!path.includes(this)) {
+            if (this.open) {
+                this.touched = true;
+            }
+            this.open = false;
+            this.filterText = "";
+        }
+    }
+    toggleOpen() {
+        if (this.disabled)
+            return;
+        if (this.open) {
+            this.touched = true;
+        }
+        this.open = !this.open;
+        if (this.open) {
+            setTimeout(() => {
+                if (this.searchable && this.searchInputEl) {
+                    this.searchInputEl.focus();
+                }
+                else {
+                    const first = this.shadowRoot?.querySelector(".option");
+                    first?.focus();
+                }
+            }, 0);
+        }
+        else {
+            this.filterText = "";
+        }
+    }
+    handleOptionClick(optValue, e) {
+        e.stopPropagation();
+        this.touched = true;
+        if (this.multiple) {
+            const current = this.selectedValues;
+            const index = current.indexOf(optValue);
+            let updated;
+            if (index > -1) {
+                updated = current.filter((v) => v !== optValue);
+            }
+            else {
+                updated = [...current, optValue];
+            }
+            this.value = updated.join(",");
+        }
+        else {
+            this.value = optValue;
+            this.open = false;
+            this.buttonElement?.focus();
+        }
+        this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+    }
+    handleSearchInput(e) {
+        this.filterText = e.target.value;
+    }
+    handleButtonKeydown(e) {
+        if (this.disabled)
+            return;
+        if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
+            e.preventDefault();
+            this.toggleOpen();
+        }
     }
     render() {
+        const currentValues = this.selectedValues;
+        const selectedOptions = this.options.filter((opt) => currentValues.includes(opt.value));
+        // 4. Update isInvalid to also respect the new property fallback
+        const isInvalid = this.invalid || (this.touched && !this.internals.validity.valid) || !!this.error;
+        const displayError = isInvalid ? this.error || this.nativeError : "";
+        const filteredOptions = this.searchable
+            ? this.options.filter((opt) => opt.label.toLowerCase().includes(this.filterText.toLowerCase()))
+            : this.options;
         return html `
-      <div class="select-wrapper">
-        <slot></slot>
-        <svg class="chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      ${this.label ? html `<label id="select-label">${this.label}</label>` : ""}
+
+      <button
+        type="button"
+        ?disabled=${this.disabled}
+        class=${classMap({
+            combobox: true,
+            "is-placeholder": selectedOptions.length === 0,
+            "is-invalid": isInvalid,
+        })}
+        role="combobox"
+        aria-haspopup="listbox"
+        aria-expanded="${this.open}"
+        aria-labelledby="select-label"
+        aria-controls="select-listbox"
+        @click=${this.toggleOpen}
+        @keydown=${this.handleButtonKeydown}
+      >
+        <div class="selection-container">
+          ${selectedOptions.length > 0
+            ? this.multiple
+                ? selectedOptions.map((opt) => html `<span class="chip">${opt.label}</span>`)
+                : html `<span>${selectedOptions[0].label}</span>`
+            : html `<span>Select option...</span>`}
+        </div>
+        <svg
+          style="width:16px;height:16px;flex-shrink:0"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+        >
           <polyline points="6 9 12 15 18 9"></polyline>
         </svg>
-      </div>
+      </button>
+
+      ${this.open
+            ? html `
+            <div class="listbox-container">
+              ${this.searchable
+                ? html `
+                    <div class="search-wrapper" @click=${(e) => e.stopPropagation()}>
+                      <input
+                        type="text"
+                        class="search-input"
+                        placeholder="Search options..."
+                        autocomplete="off"
+                        .value=${this.filterText}
+                        @input=${this.handleSearchInput}
+                      />
+                    </div>
+                  `
+                : ""}
+
+              <ul
+                id="select-listbox"
+                class="listbox"
+                role="listbox"
+                aria-multiselectable="${this.multiple}"
+              >
+                ${filteredOptions.length > 0
+                ? filteredOptions.map((opt) => {
+                    const isSelected = currentValues.includes(opt.value);
+                    return html `
+                        <li
+                          class="option"
+                          role="option"
+                          aria-selected="${isSelected}"
+                          @click=${(e) => this.handleOptionClick(opt.value, e)}
+                        >
+                          <span>${opt.label}</span>
+                          ${this.multiple && isSelected ? html `<span>✓</span>` : ""}
+                        </li>
+                      `;
+                })
+                : html `<li
+                      class="option"
+                      style="color:var(--st-color-text-muted); cursor:default;"
+                    >
+                      No options found
+                    </li>`}
+              </ul>
+            </div>
+          `
+            : ""}
+      ${displayError ? html `<span class="error-msg">${displayError}</span>` : ""}
+
+      <select
+        class="hidden-native"
+        name="${this.name}"
+        .autocomplete="${this.autocomplete}"
+        ?multiple=${this.multiple}
+        tabindex="-1"
+        aria-hidden="true"
+        ?disabled=${this.disabled}
+      >
+        <option value=""></option>
+        ${this.options.map((opt) => html `
+            <option value="${opt.value}" ?selected=${currentValues.includes(opt.value)}>
+              ${opt.label}
+            </option>
+          `)}
+      </select>
     `;
     }
 };
-StSelect.styles = [
-    resetStyles,
-    css `
-      :host {
-        display: inline-block;
-        width: 100%;
-        position: relative;
-      }
-
-      .select-wrapper {
-        position: relative;
-        display: flex;
-        align-items: center;
-        width: 100%;
-      }
-
-      /* 
-        Target the native select provided by the user in the Light DOM.
-        This completely bypasses the browser rendering bug.
-      */
-      ::slotted(select) {
-        appearance: none;
-        -webkit-appearance: none;
-        width: 100%;
-        font-family: inherit;
-        background-color: transparent;
-        border-radius: var(--st-radius-md, 0.5rem);
-        color: var(--st-color-text);
-        cursor: pointer;
-        outline: none;
-        transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
-      }
-
-      ::slotted(select:disabled) {
-        opacity: 0.6;
-        cursor: not-allowed;
-      }
-
-      /* ==========================================================
-         Sizes
-         ========================================================== */
-      :host([size="sm"]) ::slotted(select) {
-        padding: 0.25rem 2rem 0.25rem 0.75rem;
-        font-size: 0.875rem;
-        height: 2rem;
-      }
-      :host([size="md"]) ::slotted(select) {
-        padding: 0.5rem 2.5rem 0.5rem 1rem;
-        font-size: 1rem;
-        height: 2.5rem;
-      }
-      :host([size="lg"]) ::slotted(select) {
-        padding: 0.75rem 3rem 0.75rem 1.25rem;
-        font-size: 1.125rem;
-        height: 3rem;
-      }
-
-      /* Multiple select formatting (No fixed height, no right padding for chevron) */
-      ::slotted(select[multiple]) {
-        height: auto !important;
-        padding-right: 1rem !important;
-      }
-
-      /* ==========================================================
-         Variants & Colors
-         ========================================================== */
-      :host([variant="outline"]) ::slotted(select) {
-        border: 1px solid var(--st-color-border);
-      }
-      :host([variant="outline"][color="default"]) ::slotted(select:focus-visible) {
-        border-color: var(--st-color-primary);
-        box-shadow: 0 0 0 2px rgba(var(--st-color-primary-rgb, 99, 102, 241), 0.2);
-      }
-
-      :host([variant="filled"]) ::slotted(select) {
-        border: 1px solid transparent;
-        background-color: var(--st-color-surface-hover, rgba(0, 0, 0, 0.05));
-      }
-      :host([variant="filled"]) ::slotted(select:not(:disabled):hover) {
-        background-color: var(--st-color-surface-active, rgba(0, 0, 0, 0.1));
-      }
-      :host([variant="filled"][color="default"]) ::slotted(select:focus-visible) {
-        border-color: var(--st-color-primary);
-        background-color: transparent;
-      }
-
-      /* Error Color State */
-      :host([color="error"]) ::slotted(select) {
-        border-color: var(--st-color-error, #ef4444);
-      }
-      :host([color="error"]) ::slotted(select:focus-visible) {
-        box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
-      }
-
-      /* Primary Color State */
-      :host([color="primary"]) ::slotted(select) {
-        border-color: var(--st-color-primary);
-      }
-
-      /* ==========================================================
-         Chevron Icon
-         ========================================================== */
-      .chevron {
-        position: absolute;
-        right: 0.75rem;
-        width: 1.25rem;
-        height: 1.25rem;
-        pointer-events: none;
-        color: var(--st-color-text-muted);
-        transition: transform 0.2s ease, color 0.2s ease;
-      }
-
-      /* Animate chevron when the wrapper detects focus */
-      :host([focused]) .chevron {
-        transform: rotate(180deg);
-        color: var(--st-color-primary);
-      }
-
-      /* Hide chevron if the user slots a native multiple select */
-      ::slotted(select[multiple]) ~ .chevron {
-        display: none;
-      }
-    `
-];
-__decorate([
-    property({ type: String, reflect: true })
-], StSelect.prototype, "size", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], StSelect.prototype, "variant", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], StSelect.prototype, "color", void 0);
+StSelect.formAssociated = true;
+StSelect.styles = css `
+    :host {
+      display: block;
+      font-family: inherit;
+      position: relative;
+    }
+
+    label {
+      display: block;
+      font-size: var(--st-font-size-sm);
+      font-weight: 500;
+      color: var(--st-color-text-muted);
+      margin-bottom: var(--st-spacing-xs);
+    }
+
+    .combobox {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: 100%;
+      min-height: 42px;
+      padding: var(--st-spacing-xs) var(--st-spacing-md);
+      background: var(--st-color-surface);
+      border: 1px solid var(--st-color-border);
+      border-radius: var(--st-radius-md);
+      font-size: var(--st-font-size-base);
+      color: var(--st-color-text);
+      cursor: pointer;
+      text-align: left;
+      box-sizing: border-box;
+      transition:
+        border-color 0.2s,
+        box-shadow 0.2s,
+        background-color 0.2s;
+    }
+
+    .combobox:disabled {
+      background: var(--st-color-surface-muted);
+      cursor: not-allowed;
+      opacity: 0.7;
+    }
+
+    .combobox.is-invalid {
+      border-color: var(--st-color-danger, #dc2626);
+    }
+
+    .combobox:focus-visible {
+      outline: none;
+      border-color: var(--st-color-primary);
+      box-shadow: 0 0 0 2px var(--st-color-primary-muted);
+    }
+
+    .combobox.is-placeholder {
+      color: var(--st-color-text-muted);
+    }
+
+    .selection-container {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 4px;
+      align-items: center;
+      flex: 1;
+      overflow: hidden;
+    }
+
+    .chip {
+      display: inline-flex;
+      align-items: center;
+      background: var(--st-color-surface-muted);
+      border: 1px solid var(--st-color-border);
+      border-radius: var(--st-radius-sm);
+      padding: 2px 6px;
+      font-size: var(--st-font-size-xs);
+      color: var(--st-color-text);
+    }
+
+    .listbox-container {
+      position: absolute;
+      top: calc(100% + 4px);
+      left: 0;
+      right: 0;
+      z-index: 1;
+      background: var(--st-color-surface);
+      border: 1px solid var(--st-color-border);
+      border-radius: var(--st-radius-md);
+      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+      overflow: hidden;
+    }
+
+    .search-wrapper {
+      padding: var(--st-spacing-xs);
+      border-bottom: 1px solid var(--st-color-border);
+    }
+
+    .search-input {
+      width: 100%;
+      padding: var(--st-spacing-xs) var(--st-spacing-sm);
+      background: var(--st-color-surface-muted);
+      border: 1px solid var(--st-color-border);
+      border-radius: var(--st-radius-sm);
+      font-size: var(--st-font-size-sm);
+      color: var(--st-color-text);
+      box-sizing: border-box;
+    }
+
+    .search-input:focus {
+      outline: none;
+      border-color: var(--st-color-primary);
+    }
+
+    .listbox {
+      margin: 0;
+      padding: var(--st-spacing-xs) 0;
+      max-height: 220px;
+      overflow-y: auto;
+      list-style: none;
+    }
+
+    .option {
+      padding: var(--st-spacing-sm) var(--st-spacing-md);
+      cursor: pointer;
+      color: var(--st-color-text);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .option:hover {
+      background: var(--st-color-surface-muted);
+    }
+
+    .option[aria-selected="true"] {
+      font-weight: 500;
+      color: var(--st-color-primary);
+    }
+
+    .error-msg {
+      display: block;
+      margin-top: var(--st-spacing-xs);
+      font-size: var(--st-font-size-xs);
+      color: var(--st-color-danger, #dc2626);
+    }
+
+    .hidden-native {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      border: 0;
+    }
+  `;
+__decorate([
+    property({ type: String })
+], StSelect.prototype, "name", void 0);
+__decorate([
+    property({ type: String })
+], StSelect.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], StSelect.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean })
+], StSelect.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean })
+], StSelect.prototype, "multiple", void 0);
+__decorate([
+    property({ type: Boolean })
+], StSelect.prototype, "searchable", void 0);
+__decorate([
+    property({ type: Array })
+], StSelect.prototype, "options", void 0);
+__decorate([
+    property({ type: String })
+], StSelect.prototype, "error", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
-], StSelect.prototype, "focused", void 0);
+], StSelect.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], StSelect.prototype, "invalid", void 0);
+__decorate([
+    property({ type: String })
+], StSelect.prototype, "autocomplete", void 0);
+__decorate([
+    state()
+], StSelect.prototype, "open", void 0);
+__decorate([
+    state()
+], StSelect.prototype, "filterText", void 0);
+__decorate([
+    state()
+], StSelect.prototype, "nativeError", void 0);
+__decorate([
+    state()
+], StSelect.prototype, "touched", void 0);
+__decorate([
+    query(".combobox")
+], StSelect.prototype, "buttonElement", void 0);
+__decorate([
+    query(".search-input")
+], StSelect.prototype, "searchInputEl", void 0);
 StSelect = __decorate([
-    customElement('st-select')
+    customElement("st-select")
 ], StSelect);
 export { StSelect };

package/dist/components/tabs/tab-panel.d.ts

@@ -5,4 +5,9 @@ export declare class StTabPanel extends LitElement {
     static styles: import("lit").CSSResult[];
     render(): import("lit-html").TemplateResult<1>;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        "st-tab-panel": StTabPanel;
+    }
+}
 //# sourceMappingURL=tab-panel.d.ts.map

package/dist/components/tabs/tab-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tab-panel.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tab-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,qBACa,UAAW,SAAQ,UAAU;IACG,IAAI,SAAM;IACT,MAAM,UAAS;IAE3D,MAAM,CAAC,MAAM,4BAYX;IAEF,MAAM,yCAML;CACF"}
+{"version":3,"file":"tab-panel.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tab-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,qBACa,UAAW,SAAQ,UAAU;IACG,IAAI,SAAM;IACT,MAAM,UAAS;IAE3D,MAAM,CAAC,MAAM,4BAYX;IAEF,MAAM,yCAML;CACF;AACD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,UAAU,CAAC;KAC5B;CACF"}

package/dist/components/tabs/tab.d.ts

@@ -6,4 +6,9 @@ export declare class StTab extends LitElement {
     private _handleClick;
     render(): import("lit-html").TemplateResult<1>;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        "st-tab": StTab;
+    }
+}
 //# sourceMappingURL=tab.d.ts.map

package/dist/components/tabs/tab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tab.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,qBACa,KAAM,SAAQ,UAAU;IACQ,KAAK,SAAM;IACV,MAAM,UAAS;IAE3D,MAAM,CAAC,MAAM,4BA6CX;IAEF,OAAO,CAAC,YAAY;IAQpB,MAAM,yCAWL;CACF"}
+{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tab.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,qBACa,KAAM,SAAQ,UAAU;IACQ,KAAK,SAAM;IACV,MAAM,UAAS;IAE3D,MAAM,CAAC,MAAM,4BA6CX;IAEF,OAAO,CAAC,YAAY;IAQpB,MAAM,yCAWL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,QAAQ,EAAE,KAAK,CAAC;KACjB;CACF"}

package/dist/components/tabs/tabs.d.ts

@@ -11,4 +11,9 @@ export declare class StTabs extends LitElement {
     private _handleSlotChange;
     render(): import("lit-html").TemplateResult<1>;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        "st-tabs": StTabs;
+    }
+}
 //# sourceMappingURL=tabs.d.ts.map

package/dist/components/tabs/tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tabs.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,CAAC;AAClB,OAAO,gBAAgB,CAAC;AAExB,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAM1C,qBACa,MAAO,SAAQ,UAAU;IAEpC,OAAO,CAAC,KAAK,CAAW;IAGxB,OAAO,CAAC,OAAO,CAAgB;IAE/B,MAAM,CAAC,MAAM,4BAoBX;IAEF,iBAAiB,SAGhB;IAED,oBAAoB,SAGnB;IAED,OAAO,CAAC,gBAAgB;IAkBxB,OAAO,CAAC,iBAAiB;IAUzB,MAAM,yCASL;CACF"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tabs.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,CAAC;AAClB,OAAO,gBAAgB,CAAC;AAExB,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAM1C,qBACa,MAAO,SAAQ,UAAU;IAEpC,OAAO,CAAC,KAAK,CAAW;IAGxB,OAAO,CAAC,OAAO,CAAgB;IAE/B,MAAM,CAAC,MAAM,4BAoBX;IAEF,iBAAiB,SAGhB;IAED,oBAAoB,SAGnB;IAED,OAAO,CAAC,gBAAgB;IAkBxB,OAAO,CAAC,iBAAiB;IAUzB,MAAM,yCASL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}