sp-component 0.0.2 → 0.0.3

package/dist/components/table/sp-table.template.js

@@ -1,103 +1,373 @@
 import { nothing as s, html as e } from "lit";
-import { classMap as h } from "lit/directives/class-map.js";
-function p() {
-  const c = this.data.length > 0 && this.selectedRows.size === this.data.length, n = this.selectedRows.size > 0 && this.selectedRows.size < this.data.length, i = this.columns.length + (this.selectable ? 1 : 0);
+import { classMap as g } from "lit/directives/class-map.js";
+import { SpConfig as h } from "../../config.js";
+function m() {
+  const c = this._visibleColumns, o = this._pagedData, $ = o.length > 0 && this.selectedRows.size === o.length, u = this.selectedRows.size > 0 && this.selectedRows.size < o.length, p = c.length + (this.selectable ? 1 : 0) + (this.actions.length ? 1 : 0), b = this._filteredData, d = this._hasActiveFilters, n = this.virtual ? this._virtualSlice : null;
   return e`
-    <div class="sp-table-wrapper">
+    <!-- ── Toolbar ── -->
+    ${this.searchable || this.columns.length > 0 ? e`
+        <div class="sp-table-toolbar">
+          ${this.searchable ? e`
+              <div class="sp-table-search">
+                <span class="sp-table-search-icon">
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+                    <circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
+                  </svg>
+                </span>
+                <input
+                  class="sp-table-search-input"
+                  type="search"
+                  placeholder=${h.locale.table.searchPlaceholder}
+                  .value=${this._globalSearch}
+                  @input=${(t) => this._handleGlobalSearch(t.target.value)}
+                />
+                ${this._globalSearch ? e`<button class="sp-table-search-clear" @click=${this._clearFilters} title="Clear search">✕</button>` : s}
+              </div>
+            ` : s}
+
+          <div class="sp-table-toolbar-end">
+            ${d ? e`
+                <button class="sp-table-chip-clear" @click=${this._clearFilters}>
+                  ${h.locale.table.clearFilters}
+                </button>
+              ` : s}
+
+            <!-- Column visibility picker -->
+            <div class="sp-table-col-picker-wrap">
+              <button
+                class="sp-table-icon-btn"
+                title="Show/hide columns"
+                @click=${() => {
+    this._showColPicker = !this._showColPicker;
+  }}
+                aria-expanded=${this._showColPicker}
+              >
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/>
+                  <rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/>
+                </svg>
+                ${h.locale.table.columnsLabel}
+              </button>
+              ${this._showColPicker ? e`
+                  <div class="sp-table-col-picker" @click=${(t) => t.stopPropagation()}>
+                    <div class="sp-table-col-picker-title">Toggle columns</div>
+                    ${this._orderedColumns.map((t) => e`
+                      <label class="sp-table-col-picker-item">
+                        <input
+                          type="checkbox"
+                          .checked=${!this._hiddenCols.has(t.key)}
+                          @change=${() => this._toggleColumn(t.key)}
+                        />
+                        ${t.label}
+                      </label>
+                    `)}
+                  </div>
+                ` : s}
+            </div>
+
+            ${b.length !== this.data.length ? e`<span class="sp-table-count">${b.length} / ${this.data.length} rows</span>` : e`<span class="sp-table-count">${this.data.length} rows</span>`}
+
+            ${this.pageSize && this.pageSizeOptions.length > 1 ? e`
+                <div class="sp-table-page-size">
+                  <label class="sp-table-page-size-label">${h.locale.table.rowsLabel}</label>
+                  <select
+                    class="sp-table-page-size-select"
+                    .value=${String(this.pageSize)}
+                    @change=${(t) => this._handlePageSizeChange(Number(t.target.value))}
+                    aria-label="Rows per page"
+                  >
+                    ${this.pageSizeOptions.map((t) => e`
+                      <option value=${t} ?selected=${this.pageSize === t}>${t}</option>
+                    `)}
+                  </select>
+                </div>
+              ` : s}
+          </div>
+        </div>
+      ` : s}
+
+    <!-- ── Table ── -->
+    <div
+      class="sp-table-wrapper"
+      style=${this.virtual ? `max-height: ${this.maxHeight}; overflow-y: auto;` : s}
+      @scroll=${this.virtual ? this._onVirtualScroll : s}
+      @click=${() => {
+    this._showColPicker = !1, this._openFilterCol = null;
+  }}
+    >
       <table class="sp-table">
         ${this.caption ? e`<caption class="sp-table-caption">${this.caption}</caption>` : s}
+
         <thead>
+          <!-- Column header row -->
           <tr>
-            ${this.selectable ? e`
-                  <th class="sp-table-th sp-table-th--checkbox" scope="col">
-                    <input
-                      type="checkbox"
-                      .checked=${c}
-                      .indeterminate=${n}
-                      @change=${(t) => this._handleSelectAll(
-    t.target.checked
-  )}
-                      aria-label="Select all rows"
-                    />
-                  </th>
-                ` : s}
-            ${this.columns.map(
-    (t) => e`
-                <th
-                  class=${h({
-      "sp-table-th": !0,
-      "sp-table-th--sortable": !!t.sortable,
-      "sp-table-th--sorted": this.sortKey === t.key,
-      "sp-table-th--sticky": this.stickyHeader
-    })}
-                  scope="col"
-                  style=${t.width ? `width: ${t.width}` : s}
-                  aria-sort=${t.sortable ? this.sortKey === t.key ? this.sortDirection === "asc" ? "ascending" : this.sortDirection === "desc" ? "descending" : "none" : "none" : s}
-                  @click=${() => this._handleSort(t)}
+            ${this.selectable ? e`<th class="sp-table-th sp-table-th--checkbox" scope="col">
+                  <input
+                    type="checkbox"
+                    .checked=${$}
+                    .indeterminate=${u}
+                    @change=${(t) => this._handleSelectAll(t.target.checked)}
+                    aria-label="Select all rows"
+                  />
+                </th>` : s}
+
+            ${c.map((t, l) => e`
+              <th
+                class=${g({
+    "sp-table-th": !0,
+    "sp-table-th--sortable": !!t.sortable,
+    "sp-table-th--sorted": this.sortKey === t.key,
+    "sp-table-th--sticky": this.stickyHeader,
+    "sp-table-th--dragging": this._dragFromIndex === l,
+    "sp-table-th--dragover": this._dragOverIndex === l,
+    "sp-table-th--reorderable": this.reorderable
+  })}
+                scope="col"
+                style=${t.width ? `width: ${t.width}` : s}
+                draggable=${this.reorderable ? "true" : "false"}
+                aria-sort=${t.sortable ? this.sortKey === t.key ? this.sortDirection === "asc" ? "ascending" : this.sortDirection === "desc" ? "descending" : "none" : "none" : s}
+                @click=${() => this._handleSort(t)}
+                @dragstart=${(a) => this._handleDragStart(a, l)}
+                @dragover=${(a) => this._handleDragOver(a, l)}
+                @dragleave=${this._handleDragLeave}
+                @drop=${(a) => this._handleDrop(a, l)}
+                @dragend=${this._handleDragEnd}
+              >
+                <span
+                  class="sp-table-th-content"
+                  style=${t.align ? `justify-content: ${t.align === "right" ? "flex-end" : t.align === "center" ? "center" : "flex-start"}` : s}
                 >
-                  <span
-                    class="sp-table-th-content"
-                    style=${t.align ? `justify-content: ${t.align === "right" ? "flex-end" : t.align === "center" ? "center" : "flex-start"}` : s}
-                  >
-                    ${t.label}
-                    ${t.sortable ? e`<span class="sp-table-sort-icon">${this.sortKey === t.key ? this.sortDirection === "asc" ? "↑" : this.sortDirection === "desc" ? "↓" : "↕" : "↕"}</span>` : s}
-                  </span>
-                </th>
-              `
-  )}
+                  ${this.reorderable ? e`<span class="sp-table-drag-handle" title="Drag to reorder">⋮⋮</span>` : s}
+                  ${t.label}
+                  ${t.sortable ? e`<span class="sp-table-sort-icon">
+                        ${this.sortKey === t.key ? this.sortDirection === "asc" ? "↑" : this.sortDirection === "desc" ? "↓" : "↕" : "↕"}
+                      </span>` : s}
+                  ${t.filterable ? e`
+                      <button
+                        class="sp-table-filter-icon-btn ${this._filters[t.key] ? "sp-table-filter-icon-btn--active" : ""}"
+                        title="Filter by ${t.label}"
+                        aria-label="Filter by ${t.label}"
+                        @click=${(a) => {
+    a.stopPropagation(), this._toggleFilterCol(t.key);
+  }}
+                      >
+                        <svg width="11" height="11" viewBox="0 0 24 24" fill="currentColor" stroke="none">
+                          <path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"/>
+                        </svg>
+                      </button>
+                    ` : s}
+                </span>
+
+                ${t.filterable && this._openFilterCol === t.key ? e`
+                    <div class="sp-table-col-filter-pop" @click=${(a) => a.stopPropagation()}>
+                      <div class="sp-table-col-filter-pop-label">${h.locale.table.filterLabel.replace("{col}", t.label)}</div>
+                      <div class="sp-table-col-filter-pop-row">
+                        <input
+                          class="sp-table-col-filter-pop-input"
+                          type="search"
+                          placeholder="Type to filter…"
+                          .value=${this._filters[t.key] ?? ""}
+                          @input=${(a) => this._handleFilter(t.key, a.target.value)}
+                          aria-label="Filter by ${t.label}"
+                        />
+                        ${this._filters[t.key] ? e`
+                            <button
+                              class="sp-table-col-filter-pop-clear"
+                              title="Clear filter"
+                              @click=${() => {
+    this._handleFilter(t.key, ""), this._openFilterCol = null;
+  }}
+                            >✕</button>
+                          ` : s}
+                      </div>
+                    </div>
+                  ` : s}
+              </th>
+            `)}
+
+            ${this.actions.length ? e`<th class="sp-table-th sp-table-th--actions" scope="col">${h.locale.table.actionsLabel}</th>` : s}
           </tr>
         </thead>
+
         <tbody>
           ${this.loading ? e`
+              <tr>
+                <td colspan=${p} class="sp-table-empty">
+                  <div class="sp-table-loading">
+                    <svg class="sp-table-spin" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+                      <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
+                    </svg>
+                    ${h.locale.table.loading}
+                  </div>
+                </td>
+              </tr>
+            ` : o.length === 0 ? e`
                 <tr>
-                  <td colspan=${i} class="sp-table-empty">
-                    <div class="sp-table-loading">Loading...</div>
+                  <td colspan=${p} class="sp-table-empty">
+                    <div class="sp-table-empty-inner">
+                      <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="color:var(--sp-border-strong,#9ca3af)">
+                        <circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
+                      </svg>
+                      <span>${d ? "No results match the current filters." : this.emptyText}</span>
+                      ${d ? e`<button class="sp-table-chip-clear" @click=${this._clearFilters}>${h.locale.table.clearFilters}</button>` : s}
+                    </div>
                   </td>
                 </tr>
-              ` : this.data.length === 0 ? e`
-                  <tr>
-                    <td colspan=${i} class="sp-table-empty">${this.emptyText}</td>
-                  </tr>
-                ` : this.data.map(
-    (t, a) => e`
-                    <tr
-                      class=${h({
+              ` : this.virtual && n ? e`
+                  <tr style="height: ${n.topPad}px; border: none;"><td colspan="${p}" style="padding:0;border:0;"></td></tr>
+                  ${n.rows.map((t, l) => {
+    const a = n.startIndex + l, i = a;
+    return e`
+                      <tr class=${g({
       "sp-table-row": !0,
       "sp-table-row--striped": this.striped && a % 2 === 1,
       "sp-table-row--selected": this.selectedRows.has(a)
-    })}
-                    >
-                      ${this.selectable ? e`
+    })}>
+                        ${this.selectable ? e`
                             <td class="sp-table-td sp-table-td--checkbox">
                               <input
                                 type="checkbox"
                                 .checked=${this.selectedRows.has(a)}
-                                @change=${(l) => this._handleRowSelect(
-      a,
-      l.target.checked
-    )}
+                                @change=${(r) => this._handleRowSelect(a, r.target.checked)}
                                 aria-label="Select row ${a + 1}"
                               />
                             </td>
                           ` : s}
-                      ${this.columns.map(
-      (l) => e`
+
+                        ${c.map((r) => e`
                           <td
                             class="sp-table-td"
-                            style=${l.align ? `text-align: ${l.align}` : s}
+                            style=${r.align ? `text-align: ${r.align}` : s}
                           >
-                            ${t[l.key] ?? ""}
+                            ${r.render ? e`${r.render(t[r.key], t)}` : t[r.key] ?? ""}
                           </td>
-                        `
-    )}
-                    </tr>
-                  `
-  )}
+                        `)}
+
+                        ${this.actions.length ? e`
+                            <td class="sp-table-td sp-table-td--actions">
+                              <div class="sp-table-actions">
+                                ${this.actions.map((r) => e`
+                                  <button
+                                    class="sp-table-action-btn sp-table-action-btn--${r.variant ?? "ghost"}"
+                                    title=${r.label}
+                                    @click=${(v) => {
+      v.stopPropagation(), this._handleAction(r, t, i);
+    }}
+                                  >
+                                    ${r.icon ? e`<span>${r.icon}</span>` : s}
+                                    ${r.label}
+                                  </button>
+                                `)}
+                              </div>
+                            </td>
+                          ` : s}
+                      </tr>
+                    `;
+  })}
+                  <tr style="height: ${n.bottomPad}px; border: none;"><td colspan="${p}" style="padding:0;border:0;"></td></tr>
+                ` : o.map((t, l) => {
+    const a = this.pageSize ? (this._page - 1) * this.pageSize + l : l;
+    return e`
+                      <tr class=${g({
+      "sp-table-row": !0,
+      "sp-table-row--striped": this.striped && l % 2 === 1,
+      "sp-table-row--selected": this.selectedRows.has(l)
+    })}>
+                        ${this.selectable ? e`
+                            <td class="sp-table-td sp-table-td--checkbox">
+                              <input
+                                type="checkbox"
+                                .checked=${this.selectedRows.has(l)}
+                                @change=${(i) => this._handleRowSelect(l, i.target.checked)}
+                                aria-label="Select row ${l + 1}"
+                              />
+                            </td>
+                          ` : s}
+
+                        ${c.map((i) => e`
+                          <td
+                            class="sp-table-td"
+                            style=${i.align ? `text-align: ${i.align}` : s}
+                          >
+                            ${i.render ? e`${i.render(t[i.key], t)}` : t[i.key] ?? ""}
+                          </td>
+                        `)}
+
+                        ${this.actions.length ? e`
+                            <td class="sp-table-td sp-table-td--actions">
+                              <div class="sp-table-actions">
+                                ${this.actions.map((i) => e`
+                                  <button
+                                    class="sp-table-action-btn sp-table-action-btn--${i.variant ?? "ghost"}"
+                                    title=${i.label}
+                                    @click=${(r) => {
+      r.stopPropagation(), this._handleAction(i, t, a);
+    }}
+                                  >
+                                    ${i.icon ? e`<span>${i.icon}</span>` : s}
+                                    ${i.label}
+                                  </button>
+                                `)}
+                              </div>
+                            </td>
+                          ` : s}
+                      </tr>
+                    `;
+  })}
         </tbody>
       </table>
     </div>
+
+    <!-- ── Pagination footer ── -->
+    ${this.pageSize && this._totalPages > 1 && !this.virtual ? e`
+        <div class="sp-table-pagination">
+          <span class="sp-table-page-info">
+            ${(this._page - 1) * this.pageSize + 1}–${Math.min(this._page * this.pageSize, b.length)}
+            ${h.locale.table.ofTotal.replace("{total}", String(b.length))}
+          </span>
+          <div class="sp-table-page-btns">
+            <button
+              class="sp-table-page-btn"
+              ?disabled=${this._page === 1}
+              @click=${() => this._goToPage(1)}
+              title="First page"
+            >«</button>
+            <button
+              class="sp-table-page-btn"
+              ?disabled=${this._page === 1}
+              @click=${() => this._goToPage(this._page - 1)}
+              title="Previous page"
+            >‹</button>
+
+            ${Array.from({ length: this._totalPages }, (t, l) => l + 1).filter((t) => Math.abs(t - this._page) <= 2 || t === 1 || t === this._totalPages).reduce(
+    (t, l, a, i) => (a > 0 && l - i[a - 1] > 1 && t.push("..."), t.push(l), t),
+    []
+  ).map(
+    (t) => t === "..." ? e`<span class="sp-table-page-ellipsis">…</span>` : e`
+                    <button
+                      class="sp-table-page-btn ${t === this._page ? "sp-table-page-btn--active" : ""}"
+                      @click=${() => this._goToPage(t)}
+                    >${t}</button>
+                  `
+  )}
+
+            <button
+              class="sp-table-page-btn"
+              ?disabled=${this._page === this._totalPages}
+              @click=${() => this._goToPage(this._page + 1)}
+              title="Next page"
+            >›</button>
+            <button
+              class="sp-table-page-btn"
+              ?disabled=${this._page === this._totalPages}
+              @click=${() => this._goToPage(this._totalPages)}
+              title="Last page"
+            >»</button>
+          </div>
+        </div>
+      ` : s}
   `;
 }
 export {
-  p as tableTemplate
+  m as tableTemplate
 };

package/dist/components/table/sp-table.types.d.ts

@@ -3,8 +3,19 @@ export interface SpTableColumn {
     key: string;
     label: string;
     sortable?: boolean;
+    filterable?: boolean;
+    hidden?: boolean;
     width?: string;
     align?: "left" | "center" | "right";
+    /** Custom cell renderer — receives the cell value and full row */
+    render?: (value: unknown, row: Record<string, unknown>) => string;
+}
+export interface SpTableAction {
+    label: string;
+    icon?: string;
+    variant?: "primary" | "secondary" | "ghost" | "destructive";
+    /** Called with the row data and row index */
+    onClick: (row: Record<string, unknown>, index: number) => void;
 }
 export interface SpTableProps {
     columns: SpTableColumn[];
@@ -20,5 +31,16 @@ export interface SpTableProps {
     stickyHeader: boolean;
     selectable: boolean;
     caption: string;
+    reorderable: boolean;
+    searchable: boolean;
+    pageSize: number;
+    pageSizeOptions: number[];
+    actions: SpTableAction[];
+    /** Enables virtual scrolling (replaces pagination) */
+    virtual: boolean;
+    /** Row height in px for virtual scroll calculations */
+    rowHeight: number;
+    /** Container height for virtual scroll */
+    maxHeight: string;
 }
 //# sourceMappingURL=sp-table.types.d.ts.map

package/dist/components/table/sp-table.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sp-table.types.d.ts","sourceRoot":"","sources":["../../../src/components/table/sp-table.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,oBAAoB,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;AAE3D,MAAM,WAAW,aAAa;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;CACrC;AAED,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,aAAa,EAAE,CAAC;IACzB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;IAChC,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,EAAE,oBAAoB,CAAC;IACpC,YAAY,EAAE,OAAO,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;CACjB"}
+{"version":3,"file":"sp-table.types.d.ts","sourceRoot":"","sources":["../../../src/components/table/sp-table.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,oBAAoB,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;AAE3D,MAAM,WAAW,aAAa;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,kEAAkE;IAClE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,MAAM,CAAC;CACnE;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,aAAa,CAAC;IAC5D,6CAA6C;IAC7C,OAAO,EAAE,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAChE;AAED,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,aAAa,EAAE,CAAC;IACzB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;IAChC,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,EAAE,oBAAoB,CAAC;IACpC,YAAY,EAAE,OAAO,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,eAAe,EAAE,MAAM,EAAE,CAAC;IAC1B,OAAO,EAAE,aAAa,EAAE,CAAC;IACzB,sDAAsD;IACtD,OAAO,EAAE,OAAO,CAAC;IACjB,uDAAuD;IACvD,SAAS,EAAE,MAAM,CAAC;IAClB,0CAA0C;IAC1C,SAAS,EAAE,MAAM,CAAC;CACnB"}

package/dist/components/tabs/sp-tab.css.js

@@ -1,4 +1,4 @@
-const t = ":host{display:inline-block}.sp-tab-button{background:none;border:none;cursor:pointer;padding:10px 16px;font-size:14px;font-weight:500;color:var(--sp-text-muted, #6b7280);border-bottom:2px solid transparent;transition:color .15s,border-color .15s;white-space:nowrap;font-family:inherit}.sp-tab-button:hover:not(:disabled){color:var(--sp-text-secondary, #374151)}.sp-tab-button--active{color:var(--sp-primary, #3b82f6);border-bottom-color:var(--sp-primary, #3b82f6)}.sp-tab-button:disabled{opacity:.5;cursor:not-allowed}:host([active]) .sp-tab-button{color:var(--sp-primary, #3b82f6);border-bottom-color:var(--sp-primary, #3b82f6)}.sp-tab-button:focus-visible{outline:2px solid var(--sp-primary, #3b82f6);outline-offset:2px;border-radius:4px}.sp-tab-icon{display:inline-flex;align-items:center;margin-right:6px;font-size:16px;line-height:1}.sp-tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;margin-left:6px;font-size:11px;font-weight:600;border-radius:9px;background:var(--sp-border-subtle, #e5e7eb);color:var(--sp-text-secondary, #374151);line-height:1}.sp-tab-button--active .sp-tab-badge{background:var(--sp-primary-bg-hover, #dbeafe);color:var(--sp-primary-active, #1d4ed8)}.sp-tab-close{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:6px;border-radius:3px;font-size:14px;line-height:1;color:var(--sp-text-placeholder, #9ca3af);cursor:pointer}.sp-tab-close:hover{background:var(--sp-border-subtle, #e5e7eb);color:var(--sp-text-secondary, #374151)}@media(prefers-reduced-motion:reduce){.sp-tab-button{transition:none}}";
+const e = "*,*:before,*:after{box-sizing:border-box}:host{display:inline-block}.sp-tab-button{background:none;border:none;cursor:pointer;padding:10px 16px;font-size:14px;font-weight:500;color:var(--sp-text-muted, #6b7280);border-bottom:2px solid transparent;transition:color .15s,border-color .15s;white-space:nowrap;font-family:inherit}.sp-tab-button:hover:not(:disabled){color:var(--sp-text-secondary, #374151)}.sp-tab-button--active{color:var(--sp-primary, #3b82f6);border-bottom-color:var(--sp-primary, #3b82f6)}.sp-tab-button:disabled{opacity:.5;cursor:not-allowed}:host([active]) .sp-tab-button{color:var(--sp-primary, #3b82f6);border-bottom-color:var(--sp-primary, #3b82f6)}.sp-tab-button:focus-visible{outline:2px solid var(--sp-primary, #3b82f6);outline-offset:2px;border-radius:4px}.sp-tab-icon{display:inline-flex;align-items:center;margin-right:6px;font-size:16px;line-height:1}.sp-tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;margin-left:6px;font-size:11px;font-weight:600;border-radius:9px;background:var(--sp-border-subtle, #e5e7eb);color:var(--sp-text-secondary, #374151);line-height:1}.sp-tab-button--active .sp-tab-badge{background:var(--sp-primary-bg-hover, #dbeafe);color:var(--sp-primary-active, #1d4ed8)}.sp-tab-close{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:6px;border-radius:3px;font-size:14px;line-height:1;color:var(--sp-text-placeholder, #9ca3af);cursor:pointer}.sp-tab-close:hover{background:var(--sp-border-subtle, #e5e7eb);color:var(--sp-text-secondary, #374151)}@media(prefers-reduced-motion:reduce){.sp-tab-button{transition:none}}";
 export {
-  t as default
+  e as default
 };

package/dist/components/tabs/sp-tabs.css.js

@@ -1,4 +1,4 @@
-const e = ':host{display:block}.sp-tabs-nav-wrapper{position:relative;display:flex;align-items:center}.sp-tabs-nav{display:flex;border-bottom:1px solid var(--sp-border-subtle, #e5e7eb);overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}.sp-tabs-nav::-webkit-scrollbar{display:none}.sp-tabs-scroll-btn{flex-shrink:0;background:none;border:none;cursor:pointer;font-size:20px;color:var(--sp-text-muted, #6b7280);padding:0 4px;line-height:1;border-bottom:1px solid var(--sp-border-subtle, #e5e7eb);height:100%;display:flex;align-items:center}.sp-tabs-scroll-btn:hover{color:var(--sp-text-secondary, #374151);background:var(--sp-bg-muted, #f3f4f6)}.sp-tabs-scroll-btn:focus-visible{outline:2px solid var(--sp-primary, #3b82f6);outline-offset:-2px}.sp-tabs-content{padding:16px 0}:host([placement="left"]) .sp-tabs,:host([placement="right"]) .sp-tabs{display:flex;gap:0}:host([placement="left"]) .sp-tabs-nav-wrapper{flex-direction:column;border-right:1px solid var(--sp-border-subtle, #e5e7eb)}:host([placement="left"]) .sp-tabs-nav{flex-direction:column;border-bottom:none;padding-right:0}:host([placement="right"]) .sp-tabs-nav-wrapper{flex-direction:column;border-left:1px solid var(--sp-border-subtle, #e5e7eb);order:1}:host([placement="right"]) .sp-tabs-nav{flex-direction:column;border-bottom:none}:host([placement="left"]) .sp-tabs-content,:host([placement="right"]) .sp-tabs-content{flex:1;padding:0 16px}:host([placement="bottom"]) .sp-tabs{display:flex;flex-direction:column-reverse}:host([placement="bottom"]) .sp-tabs-nav{border-bottom:none;border-top:1px solid var(--sp-border-subtle, #e5e7eb)}:host([placement="bottom"]) .sp-tabs-scroll-btn{border-bottom:none;border-top:1px solid var(--sp-border-subtle, #e5e7eb)}:host([placement="left"]) sp-tab .sp-tab-button,:host([placement="right"]) sp-tab .sp-tab-button{border-bottom:none;border-right:2px solid transparent}';
+const e = '*,*:before,*:after{box-sizing:border-box}:host{display:block}.sp-tabs-nav-wrapper{position:relative;display:flex;align-items:center}.sp-tabs-nav{display:flex;border-bottom:1px solid var(--sp-border-subtle, #e5e7eb);overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}.sp-tabs-nav::-webkit-scrollbar{display:none}.sp-tabs-scroll-btn{flex-shrink:0;background:none;border:none;cursor:pointer;font-size:20px;color:var(--sp-text-muted, #6b7280);padding:0 4px;line-height:1;border-bottom:1px solid var(--sp-border-subtle, #e5e7eb);height:100%;display:flex;align-items:center}.sp-tabs-scroll-btn:hover{color:var(--sp-text-secondary, #374151);background:var(--sp-bg-muted, #f3f4f6)}.sp-tabs-scroll-btn:focus-visible{outline:2px solid var(--sp-primary, #3b82f6);outline-offset:-2px}.sp-tabs-content{padding:16px 0}:host([placement="left"]) .sp-tabs,:host([placement="right"]) .sp-tabs{display:flex;gap:0}:host([placement="left"]) .sp-tabs-nav-wrapper{flex-direction:column;border-right:1px solid var(--sp-border-subtle, #e5e7eb)}:host([placement="left"]) .sp-tabs-nav{flex-direction:column;border-bottom:none;padding-right:0}:host([placement="right"]) .sp-tabs-nav-wrapper{flex-direction:column;border-left:1px solid var(--sp-border-subtle, #e5e7eb);order:1}:host([placement="right"]) .sp-tabs-nav{flex-direction:column;border-bottom:none}:host([placement="left"]) .sp-tabs-content,:host([placement="right"]) .sp-tabs-content{flex:1;padding:0 16px}:host([placement="bottom"]) .sp-tabs{display:flex;flex-direction:column-reverse}:host([placement="bottom"]) .sp-tabs-nav{border-bottom:none;border-top:1px solid var(--sp-border-subtle, #e5e7eb)}:host([placement="bottom"]) .sp-tabs-scroll-btn{border-bottom:none;border-top:1px solid var(--sp-border-subtle, #e5e7eb)}:host([placement="left"]) sp-tab .sp-tab-button,:host([placement="right"]) sp-tab .sp-tab-button{border-bottom:none;border-right:2px solid transparent}';
 export {
   e as default
 };

package/dist/components/tag/sp-tag.css.js

@@ -1,4 +1,4 @@
-const e = ':host{display:inline-flex}:host([disabled]){opacity:.5;pointer-events:none}.sp-tag{display:inline-flex;align-items:center;gap:4px;border-radius:4px;font-weight:500;white-space:nowrap}:host([size="sm"]) .sp-tag{padding:1px 6px;font-size:11px}:host([size="md"]) .sp-tag{padding:2px 8px;font-size:12px}:host([size="lg"]) .sp-tag{padding:4px 12px;font-size:14px}:host([variant="primary"]) .sp-tag{background:var(--sp-primary-bg-hover, #dbeafe);color:var(--sp-primary-active, #1d4ed8)}:host([variant="secondary"]) .sp-tag{background:var(--sp-bg-muted, #f3f4f6);color:var(--sp-text-secondary, #374151)}:host([variant="success"]) .sp-tag{background:#dcfce7;color:#15803d}:host([variant="warning"]) .sp-tag{background:#fef9c3;color:#a16207}:host([variant="danger"]) .sp-tag{background:#fee2e2;color:#b91c1c}:host([variant="neutral"]) .sp-tag{background:var(--sp-border-subtle, #e5e7eb);color:#4b5563}.sp-tag-remove{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:0;opacity:.7;color:inherit;line-height:1}.sp-tag-remove:hover{opacity:1}.sp-tag-remove:focus-visible{outline:2px solid var(--sp-primary, #3b82f6);outline-offset:2px}@media(prefers-reduced-motion:reduce){:host{transition:none!important}button,a,[role=button]{transition:none!important}}';
+const e = '*,*:before,*:after{box-sizing:border-box}:host{display:inline-flex}:host([disabled]){opacity:.5;pointer-events:none}.sp-tag{display:inline-flex;align-items:center;gap:4px;border-radius:4px;font-weight:500;white-space:nowrap}:host([size="sm"]) .sp-tag{padding:1px 6px;font-size:11px}:host([size="md"]) .sp-tag{padding:2px 8px;font-size:12px}:host([size="lg"]) .sp-tag{padding:4px 12px;font-size:14px}:host([variant="primary"]) .sp-tag{background:var(--sp-primary-bg-hover, #dbeafe);color:var(--sp-primary-active, #1d4ed8)}:host([variant="secondary"]) .sp-tag{background:var(--sp-bg-muted, #f3f4f6);color:var(--sp-text-secondary, #374151)}:host([variant="success"]) .sp-tag{background:#dcfce7;color:#15803d}:host([variant="warning"]) .sp-tag{background:#fef9c3;color:#a16207}:host([variant="danger"]) .sp-tag{background:#fee2e2;color:#b91c1c}:host([variant="neutral"]) .sp-tag{background:var(--sp-border-subtle, #e5e7eb);color:#4b5563}.sp-tag-remove{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:0;opacity:.7;color:inherit;line-height:1}.sp-tag-remove:hover{opacity:1}.sp-tag-remove:focus-visible{outline:2px solid var(--sp-primary, #3b82f6);outline-offset:2px}@media(prefers-reduced-motion:reduce){:host{transition:none!important}button,a,[role=button]{transition:none!important}}';
 export {
   e as default
 };

package/dist/components/tag-input/sp-tag-input.css.js

@@ -1,4 +1,4 @@
-const p = ":host{display:block}.sp-tag-input{display:flex;flex-direction:column;gap:4px;font-family:inherit}.sp-tag-input-label{display:block;font-size:14px;font-weight:500;color:var(--sp-text-secondary, #374151);margin-bottom:4px}.sp-tag-input-field{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:6px 10px;border:1px solid var(--sp-border, #d1d5db);border-radius:6px;background:var(--sp-bg, #ffffff);cursor:text;transition:border-color .2s,box-shadow .2s;min-height:40px;box-sizing:border-box}.sp-tag-input--focused .sp-tag-input-field,.sp-tag-input-field:focus-within{border-color:var(--sp-primary, #3b82f6);box-shadow:0 0 0 3px var(--sp-primary-focus, rgba(59, 130, 246, .15));outline:none}.sp-tag-input--error .sp-tag-input-field{border-color:var(--sp-error, #FF4D4F);box-shadow:0 0 0 3px var(--sp-error-focus, rgba(255, 77, 79, .15))}.sp-tag-input--disabled .sp-tag-input-field{background:var(--sp-bg-subtle, #f9fafb);cursor:not-allowed;opacity:.6}.sp-tag-input--sm .sp-tag-input-field{padding:4px 8px;min-height:32px;font-size:12px}.sp-tag-input--md .sp-tag-input-field{padding:6px 10px;min-height:40px;font-size:14px}.sp-tag-input--lg .sp-tag-input-field{padding:8px 12px;min-height:48px;font-size:16px}.sp-tag-input-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;background:var(--sp-primary-bg, #eff6ff);border:1px solid var(--sp-primary-bg-hover, #bfdbfe);border-radius:999px;font-size:13px;color:var(--sp-primary-active, #1d4ed8);animation:sp-chip-enter .15s ease;flex-shrink:0}@keyframes sp-chip-enter{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}.sp-tag-input-chip-label{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sp-tag-input-chip-remove{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:none;border-radius:50%;background:transparent;color:var(--sp-primary-active, #1d4ed8);cursor:pointer;font-size:12px;line-height:1;transition:background .15s;flex-shrink:0}.sp-tag-input-chip-remove:hover{background:var(--sp-primary-bg-hover, #bfdbfe)}.sp-tag-input-input{flex:1;min-width:80px;border:none;outline:none;background:transparent;font-family:inherit;font-size:inherit;color:var(--sp-text, #111827);padding:2px 0}.sp-tag-input-input::placeholder{color:var(--sp-text-placeholder, #9ca3af)}.sp-tag-input-input:disabled{cursor:not-allowed}.sp-tag-input-hint{font-size:12px;color:var(--sp-text-muted, #6b7280);margin-top:2px}.sp-tag-input-error{font-size:12px;color:var(--sp-error, #FF4D4F);margin-top:2px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}";
+const i = "*,*:before,*:after{box-sizing:border-box}:host{display:block}.sp-tag-input{display:flex;flex-direction:column;gap:4px;font-family:inherit}.sp-tag-input-label{display:block;font-size:14px;font-weight:500;color:var(--sp-text-secondary, #374151);margin-bottom:4px}.sp-tag-input-field{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:6px 10px;border:1px solid var(--sp-border, #d1d5db);border-radius:6px;background:var(--sp-bg, #ffffff);cursor:text;transition:border-color .2s,box-shadow .2s;min-height:40px;box-sizing:border-box}.sp-tag-input--focused .sp-tag-input-field,.sp-tag-input-field:focus-within{border-color:var(--sp-primary, #3b82f6);box-shadow:0 0 0 3px var(--sp-primary-focus, rgba(59, 130, 246, .15));outline:none}.sp-tag-input--error .sp-tag-input-field{border-color:var(--sp-error, #FF4D4F);box-shadow:0 0 0 3px var(--sp-error-focus, rgba(255, 77, 79, .15))}.sp-tag-input--disabled .sp-tag-input-field{background:var(--sp-bg-subtle, #f9fafb);cursor:not-allowed;opacity:.6}.sp-tag-input--sm .sp-tag-input-field{padding:4px 8px;min-height:32px;font-size:12px}.sp-tag-input--md .sp-tag-input-field{padding:6px 10px;min-height:40px;font-size:14px}.sp-tag-input--lg .sp-tag-input-field{padding:8px 12px;min-height:48px;font-size:16px}.sp-tag-input-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;background:var(--sp-primary-bg, #eff6ff);border:1px solid var(--sp-primary-bg-hover, #bfdbfe);border-radius:999px;font-size:13px;color:var(--sp-primary-active, #1d4ed8);animation:sp-chip-enter .15s ease;flex-shrink:0}@keyframes sp-chip-enter{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}.sp-tag-input-chip-label{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sp-tag-input-chip-remove{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:none;border-radius:50%;background:transparent;color:var(--sp-primary-active, #1d4ed8);cursor:pointer;font-size:12px;line-height:1;transition:background .15s;flex-shrink:0}.sp-tag-input-chip-remove:hover{background:var(--sp-primary-bg-hover, #bfdbfe)}.sp-tag-input-input{flex:1;min-width:80px;border:none;outline:none;background:transparent;font-family:inherit;font-size:inherit;color:var(--sp-text, #111827);padding:2px 0}.sp-tag-input-input::placeholder{color:var(--sp-text-placeholder, #9ca3af)}.sp-tag-input-input:disabled{cursor:not-allowed}.sp-tag-input-hint{font-size:12px;color:var(--sp-text-muted, #6b7280);margin-top:2px}.sp-tag-input-error{font-size:12px;color:var(--sp-error, #FF4D4F);margin-top:2px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}";
 export {
-  p as default
+  i as default
 };

package/dist/components/textarea/sp-textarea.css.js

@@ -1,4 +1,4 @@
-const e = ':host{display:block;font-family:inherit}.sp-textarea-label{display:block;font-size:14px;font-weight:500;color:var(--sp-text-secondary, #374151);margin-bottom:4px}.sp-required{color:var(--sp-error, #FF4D4F)}textarea{width:100%;padding:8px 12px;border:1px solid var(--sp-border, #d1d5db);border-radius:4px;font-family:inherit;font-size:14px;color:var(--sp-text, #111827);background:var(--sp-bg, white);outline:none;box-sizing:border-box;transition:border-color .2s;resize:vertical;min-height:80px}textarea:focus-visible{border-color:var(--sp-primary, #3b82f6);outline:2px solid var(--sp-primary-focus, rgba(59, 130, 246, .2));outline-offset:-1px}textarea.sp-textarea--error{border-color:var(--sp-error, #FF4D4F)}textarea.sp-textarea--error:focus-visible{border-color:var(--sp-error, #FF4D4F);outline-color:var(--sp-error-focus, rgba(255, 77, 79, .2))}:host([resize="none"]) textarea{resize:none}:host([resize="horizontal"]) textarea{resize:horizontal}:host([resize="both"]) textarea{resize:both}:host([disabled]) textarea{opacity:.5;cursor:not-allowed;background:var(--sp-bg-subtle, #f9fafb);resize:none}:host([readonly]) textarea{background:var(--sp-bg-subtle, #f9fafb)}.sp-textarea-footer{display:flex;justify-content:space-between;align-items:center;margin-top:4px}.sp-textarea-error{font-size:12px;color:var(--sp-error, #FF4D4F)}.sp-textarea-hint{font-size:12px;color:var(--sp-text-muted, #6b7280)}.sp-textarea-count{font-size:12px;color:var(--sp-text-placeholder, #9ca3af);margin-left:auto}textarea.sp-textarea--auto-resize{resize:none;overflow:hidden}@media(max-width:479px){:host{width:100%}.sp-textarea-wrapper{width:100%}textarea{width:100%;box-sizing:border-box}}@media(prefers-reduced-motion:reduce){textarea{transition:none}}';
+const e = '*,*:before,*:after{box-sizing:border-box}:host{display:block;font-family:inherit}.sp-textarea-label{display:block;font-size:14px;font-weight:500;color:var(--sp-text-secondary, #374151);margin-bottom:4px}.sp-required{color:var(--sp-error, #FF4D4F)}textarea{width:100%;padding:8px 12px;border:1px solid var(--sp-border, #d1d5db);border-radius:4px;font-family:inherit;font-size:14px;color:var(--sp-text, #111827);background:var(--sp-bg, white);outline:none;box-sizing:border-box;transition:border-color .2s;resize:vertical;min-height:80px}textarea:focus-visible{border-color:var(--sp-primary, #3b82f6);outline:2px solid var(--sp-primary-focus, rgba(59, 130, 246, .2));outline-offset:-1px}textarea.sp-textarea--error{border-color:var(--sp-error, #FF4D4F)}textarea.sp-textarea--error:focus-visible{border-color:var(--sp-error, #FF4D4F);outline-color:var(--sp-error-focus, rgba(255, 77, 79, .2))}:host([resize="none"]) textarea{resize:none}:host([resize="horizontal"]) textarea{resize:horizontal}:host([resize="both"]) textarea{resize:both}:host([disabled]) textarea{opacity:.5;cursor:not-allowed;background:var(--sp-bg-subtle, #f9fafb);resize:none}:host([readonly]) textarea{background:var(--sp-bg-subtle, #f9fafb)}.sp-textarea-footer{display:flex;justify-content:space-between;align-items:center;margin-top:4px}.sp-textarea-error{font-size:12px;color:var(--sp-error, #FF4D4F)}.sp-textarea-hint{font-size:12px;color:var(--sp-text-muted, #6b7280)}.sp-textarea-count{font-size:12px;color:var(--sp-text-placeholder, #9ca3af);margin-left:auto}textarea.sp-textarea--auto-resize{resize:none;overflow:hidden}@media(max-width:479px){:host{width:100%}.sp-textarea-wrapper{width:100%}textarea{width:100%;box-sizing:border-box}}@media(prefers-reduced-motion:reduce){textarea{transition:none}}';
 export {
   e as default
 };

package/dist/components/time-picker/sp-time-picker.css.js

@@ -1,4 +1,4 @@
-const e = ':host{display:block;font-family:inherit;position:relative}.sp-time-picker-label{display:block;font-size:14px;font-weight:500;color:var(--sp-text-secondary, #374151);margin-bottom:4px}.sp-required{color:var(--sp-error, #FF4D4F)}.sp-time-picker-field{display:flex;align-items:center;gap:8px;padding:0 12px;border:1px solid var(--sp-border, #d1d5db);border-radius:6px;background:var(--sp-bg, white);cursor:pointer;transition:border-color .2s,box-shadow .2s;min-width:160px}.sp-time-picker-field:hover:not(.sp-time-picker-field--disabled){border-color:var(--sp-border-strong, #9ca3af)}.sp-time-picker-field--open{border-color:var(--sp-primary, #3b82f6);box-shadow:0 0 0 2px var(--sp-primary-focus, rgba(59, 130, 246, .2))}.sp-time-picker-field--error{border-color:var(--sp-error, #FF4D4F)}.sp-time-picker-field--disabled{opacity:.5;cursor:not-allowed;background:var(--sp-bg-subtle, #f9fafb)}.sp-time-picker-icon{color:var(--sp-text-placeholder, #9ca3af);flex-shrink:0}.sp-time-picker-input{flex:1;border:none;outline:none;background:transparent;font-size:14px;font-family:inherit;color:var(--sp-text, #111827);padding:8px 0;cursor:pointer;min-width:0}.sp-time-picker-input::placeholder{color:var(--sp-text-placeholder, #9ca3af)}.sp-time-picker-input:disabled{cursor:not-allowed}.sp-time-picker-clear{border:none;background:none;cursor:pointer;color:var(--sp-text-placeholder, #9ca3af);padding:0;font-size:18px;line-height:1;display:flex;align-items:center}.sp-time-picker-clear:hover{color:var(--sp-text-secondary, #374151)}.sp-time-picker-panel{position:absolute;top:calc(100% + 6px);left:0;z-index:1000;width:220px;background:var(--sp-bg, white);border:1px solid var(--sp-border-subtle, #e5e7eb);border-radius:10px;box-shadow:0 10px 25px #0000001f,0 4px 8px #0000000f;overflow:hidden}.sp-time-picker-columns{display:flex;align-items:center;justify-content:center;gap:4px;padding:16px 16px 8px}.sp-time-picker-col{display:flex;flex-direction:column;align-items:center;gap:4px}.sp-time-picker-sep{font-size:20px;font-weight:600;color:var(--sp-text-secondary, #374151);margin-bottom:2px}.sp-time-picker-arrow{border:none;background:none;cursor:pointer;color:var(--sp-text-muted, #6b7280);font-size:10px;padding:4px 8px;border-radius:4px;line-height:1;transition:background .15s,color .15s}.sp-time-picker-arrow:hover{background:var(--sp-bg-muted, #f3f4f6);color:var(--sp-text, #111827)}.sp-time-picker-value{font-size:20px;font-weight:600;font-family:monospace;color:var(--sp-text, #111827);min-width:2ch;text-align:center}.sp-time-picker-col--period .sp-time-picker-value{font-size:16px;font-family:inherit}.sp-time-picker-presets{max-height:160px;overflow-y:auto;border-top:1px solid var(--sp-bg-muted, #f3f4f6);padding:4px 0;scrollbar-width:thin;scrollbar-color:var(--sp-border, #d1d5db) transparent}.sp-time-picker-option{display:block;width:100%;padding:6px 16px;border:none;background:none;cursor:pointer;text-align:left;font-size:13px;font-family:monospace;color:var(--sp-text-secondary, #374151);transition:background .1s}.sp-time-picker-option:hover{background:var(--sp-bg-muted, #f3f4f6)}.sp-time-picker-option--selected{background:var(--sp-primary-bg, #eff6ff);color:var(--sp-primary-hover, #2563eb);font-weight:600}.sp-time-picker-actions{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-top:1px solid var(--sp-bg-muted, #f3f4f6);gap:8px}.sp-time-picker-now,.sp-time-picker-ok{border:none;cursor:pointer;border-radius:6px;padding:6px 14px;font-size:13px;font-family:inherit;font-weight:500;transition:background .15s}.sp-time-picker-now{background:var(--sp-bg-muted, #f3f4f6);color:var(--sp-text-secondary, #374151)}.sp-time-picker-now:hover{background:var(--sp-border-subtle, #e5e7eb)}.sp-time-picker-ok{background:var(--sp-primary, #3b82f6);color:var(--sp-bg, white)}.sp-time-picker-ok:hover{background:var(--sp-primary-hover, #2563eb)}.sp-time-picker-error{display:block;font-size:12px;color:var(--sp-error, #FF4D4F);margin-top:4px}.sp-time-picker-hint{display:block;font-size:12px;color:var(--sp-text-muted, #6b7280);margin-top:4px}:host([size="sm"]) .sp-time-picker-field{padding:0 8px}:host([size="sm"]) .sp-time-picker-input{padding:5px 0;font-size:12px}:host([size="lg"]) .sp-time-picker-field{padding:0 16px}:host([size="lg"]) .sp-time-picker-input{padding:12px 0;font-size:16px}:host([disabled]) .sp-time-picker-field{opacity:.5;cursor:not-allowed;background:var(--sp-bg-subtle, #f9fafb)}@media(prefers-reduced-motion:reduce){.sp-time-picker-field,.sp-time-picker-arrow,.sp-time-picker-option,.sp-time-picker-now,.sp-time-picker-ok{transition:none}}';
+const e = '*,*:before,*:after{box-sizing:border-box}:host{display:block;font-family:inherit;position:relative}.sp-time-picker-label{display:block;font-size:14px;font-weight:500;color:var(--sp-text-secondary, #374151);margin-bottom:4px}.sp-required{color:var(--sp-error, #FF4D4F)}.sp-time-picker-field{display:flex;align-items:center;gap:8px;padding:0 12px;border:1px solid var(--sp-border, #d1d5db);border-radius:6px;background:var(--sp-bg, white);cursor:pointer;transition:border-color .2s,box-shadow .2s;min-width:160px}.sp-time-picker-field:hover:not(.sp-time-picker-field--disabled){border-color:var(--sp-border-strong, #9ca3af)}.sp-time-picker-field--open{border-color:var(--sp-primary, #3b82f6);box-shadow:0 0 0 2px var(--sp-primary-focus, rgba(59, 130, 246, .2))}.sp-time-picker-field--error{border-color:var(--sp-error, #FF4D4F)}.sp-time-picker-field--disabled{opacity:.5;cursor:not-allowed;background:var(--sp-bg-subtle, #f9fafb)}.sp-time-picker-icon{color:var(--sp-text-placeholder, #9ca3af);flex-shrink:0}.sp-time-picker-input{flex:1;border:none;outline:none;background:transparent;font-size:14px;font-family:inherit;color:var(--sp-text, #111827);padding:8px 0;cursor:pointer;min-width:0}.sp-time-picker-input::placeholder{color:var(--sp-text-placeholder, #9ca3af)}.sp-time-picker-input:disabled{cursor:not-allowed}.sp-time-picker-clear{border:none;background:none;cursor:pointer;color:var(--sp-text-placeholder, #9ca3af);padding:0;font-size:18px;line-height:1;display:flex;align-items:center}.sp-time-picker-clear:hover{color:var(--sp-text-secondary, #374151)}.sp-time-picker-panel{position:absolute;top:calc(100% + 6px);left:0;z-index:1000;width:220px;background:var(--sp-bg, white);border:1px solid var(--sp-border-subtle, #e5e7eb);border-radius:10px;box-shadow:0 10px 25px #0000001f,0 4px 8px #0000000f;overflow:hidden}.sp-time-picker-columns{display:flex;align-items:center;justify-content:center;gap:4px;padding:16px 16px 8px}.sp-time-picker-col{display:flex;flex-direction:column;align-items:center;gap:4px}.sp-time-picker-sep{font-size:20px;font-weight:600;color:var(--sp-text-secondary, #374151);margin-bottom:2px}.sp-time-picker-arrow{border:none;background:none;cursor:pointer;color:var(--sp-text-muted, #6b7280);font-size:10px;padding:4px 8px;border-radius:4px;line-height:1;transition:background .15s,color .15s}.sp-time-picker-arrow:hover{background:var(--sp-bg-muted, #f3f4f6);color:var(--sp-text, #111827)}.sp-time-picker-value{font-size:20px;font-weight:600;font-family:monospace;color:var(--sp-text, #111827);min-width:2ch;text-align:center}.sp-time-picker-col--period .sp-time-picker-value{font-size:16px;font-family:inherit}.sp-time-picker-presets{max-height:160px;overflow-y:auto;border-top:1px solid var(--sp-bg-muted, #f3f4f6);padding:4px 0;scrollbar-width:thin;scrollbar-color:var(--sp-border, #d1d5db) transparent}.sp-time-picker-option{display:block;width:100%;padding:6px 16px;border:none;background:none;cursor:pointer;text-align:left;font-size:13px;font-family:monospace;color:var(--sp-text-secondary, #374151);transition:background .1s}.sp-time-picker-option:hover{background:var(--sp-bg-muted, #f3f4f6)}.sp-time-picker-option--selected{background:var(--sp-primary-bg, #eff6ff);color:var(--sp-primary-hover, #2563eb);font-weight:600}.sp-time-picker-actions{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-top:1px solid var(--sp-bg-muted, #f3f4f6);gap:8px}.sp-time-picker-now,.sp-time-picker-ok{border:none;cursor:pointer;border-radius:6px;padding:6px 14px;font-size:13px;font-family:inherit;font-weight:500;transition:background .15s}.sp-time-picker-now{background:var(--sp-bg-muted, #f3f4f6);color:var(--sp-text-secondary, #374151)}.sp-time-picker-now:hover{background:var(--sp-border-subtle, #e5e7eb)}.sp-time-picker-ok{background:var(--sp-primary, #3b82f6);color:var(--sp-bg, white)}.sp-time-picker-ok:hover{background:var(--sp-primary-hover, #2563eb)}.sp-time-picker-error{display:block;font-size:12px;color:var(--sp-error, #FF4D4F);margin-top:4px}.sp-time-picker-hint{display:block;font-size:12px;color:var(--sp-text-muted, #6b7280);margin-top:4px}:host([size="sm"]) .sp-time-picker-field{padding:0 8px}:host([size="sm"]) .sp-time-picker-input{padding:5px 0;font-size:12px}:host([size="lg"]) .sp-time-picker-field{padding:0 16px}:host([size="lg"]) .sp-time-picker-input{padding:12px 0;font-size:16px}:host([disabled]) .sp-time-picker-field{opacity:.5;cursor:not-allowed;background:var(--sp-bg-subtle, #f9fafb)}@media(prefers-reduced-motion:reduce){.sp-time-picker-field,.sp-time-picker-arrow,.sp-time-picker-option,.sp-time-picker-now,.sp-time-picker-ok{transition:none}}';
 export {
   e as default
 };

package/dist/components/timeline/sp-timeline.css.js

@@ -1,4 +1,4 @@
-const e = ":host{display:block}.sp-timeline{display:flex;flex-direction:column}.sp-timeline-item{display:flex;gap:16px}.sp-timeline-indicator{display:flex;flex-direction:column;align-items:center;flex-shrink:0}.sp-timeline-dot{width:12px;height:12px;border-radius:50%;background:var(--sp-border, #d1d5db);border:2px solid var(--sp-bg, white);box-shadow:0 0 0 2px var(--sp-border, #d1d5db);flex-shrink:0;margin-top:3px}.sp-timeline-item--default .sp-timeline-dot{background:var(--sp-text-muted, #6b7280);box-shadow:0 0 0 2px var(--sp-text-muted, #6b7280)}.sp-timeline-item--success .sp-timeline-dot{background:#22c55e;box-shadow:0 0 0 2px #22c55e}.sp-timeline-item--warning .sp-timeline-dot{background:var(--sp-warning, #FAAD14);box-shadow:0 0 0 2px var(--sp-warning, #FAAD14)}.sp-timeline-item--error .sp-timeline-dot{background:var(--sp-error, #FF4D4F);box-shadow:0 0 0 2px var(--sp-error, #FF4D4F)}.sp-timeline-item--info .sp-timeline-dot{background:var(--sp-primary, #3b82f6);box-shadow:0 0 0 2px var(--sp-primary, #3b82f6)}.sp-timeline-line{width:2px;flex:1;background:var(--sp-timeline-line-color, var(--sp-border-subtle, #e5e7eb));min-height:24px;margin-top:4px}.sp-timeline-content{padding-bottom:24px;flex:1}.sp-timeline-header{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}.sp-timeline-label{font-size:14px;font-weight:600;color:var(--sp-text, #111827)}.sp-timeline-time{font-size:12px;color:var(--sp-text-placeholder, #9ca3af);flex-shrink:0}.sp-timeline-description{font-size:14px;color:var(--sp-text-muted, #6b7280);margin:4px 0 0;line-height:1.5}.sp-timeline-dot--icon{display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1}.sp-timeline--alternate .sp-timeline-item{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:flex-start}.sp-timeline--alternate .sp-timeline-content{padding-bottom:24px}.sp-timeline--alternate .sp-timeline-content--alt{text-align:right}.sp-timeline--alternate .sp-timeline-indicator{grid-column:2}@media(max-width:640px){.sp-timeline--alternate .sp-timeline-item{display:flex;grid-template-columns:unset}.sp-timeline--alternate .sp-timeline-content--alt{display:none}.sp-timeline--alternate .sp-timeline-item--right .sp-timeline-content{display:block}.sp-timeline--alternate .sp-timeline-item--right .sp-timeline-indicator{grid-column:unset}}@media(prefers-reduced-motion:reduce){:host{transition:none!important}}";
+const e = "*,*:before,*:after{box-sizing:border-box}:host{display:block}.sp-timeline{display:flex;flex-direction:column}.sp-timeline-item{display:flex;gap:16px}.sp-timeline-indicator{display:flex;flex-direction:column;align-items:center;flex-shrink:0}.sp-timeline-dot{width:12px;height:12px;border-radius:50%;background:var(--sp-border, #d1d5db);border:2px solid var(--sp-bg, white);box-shadow:0 0 0 2px var(--sp-border, #d1d5db);flex-shrink:0;margin-top:3px}.sp-timeline-item--default .sp-timeline-dot{background:var(--sp-text-muted, #6b7280);box-shadow:0 0 0 2px var(--sp-text-muted, #6b7280)}.sp-timeline-item--success .sp-timeline-dot{background:#22c55e;box-shadow:0 0 0 2px #22c55e}.sp-timeline-item--warning .sp-timeline-dot{background:var(--sp-warning, #FAAD14);box-shadow:0 0 0 2px var(--sp-warning, #FAAD14)}.sp-timeline-item--error .sp-timeline-dot{background:var(--sp-error, #FF4D4F);box-shadow:0 0 0 2px var(--sp-error, #FF4D4F)}.sp-timeline-item--info .sp-timeline-dot{background:var(--sp-primary, #3b82f6);box-shadow:0 0 0 2px var(--sp-primary, #3b82f6)}.sp-timeline-line{width:2px;flex:1;background:var(--sp-timeline-line-color, var(--sp-border-subtle, #e5e7eb));min-height:24px;margin-top:4px}.sp-timeline-content{padding-bottom:24px;flex:1}.sp-timeline-header{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}.sp-timeline-label{font-size:14px;font-weight:600;color:var(--sp-text, #111827)}.sp-timeline-time{font-size:12px;color:var(--sp-text-placeholder, #9ca3af);flex-shrink:0}.sp-timeline-description{font-size:14px;color:var(--sp-text-muted, #6b7280);margin:4px 0 0;line-height:1.5}.sp-timeline-dot--icon{display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1}.sp-timeline--alternate .sp-timeline-item{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:flex-start}.sp-timeline--alternate .sp-timeline-content{padding-bottom:24px}.sp-timeline--alternate .sp-timeline-content--alt{text-align:right}.sp-timeline--alternate .sp-timeline-indicator{grid-column:2}@media(max-width:640px){.sp-timeline--alternate .sp-timeline-item{display:flex;grid-template-columns:unset}.sp-timeline--alternate .sp-timeline-content--alt{display:none}.sp-timeline--alternate .sp-timeline-item--right .sp-timeline-content{display:block}.sp-timeline--alternate .sp-timeline-item--right .sp-timeline-indicator{grid-column:unset}}@media(prefers-reduced-motion:reduce){:host{transition:none!important}}";
 export {
   e as default
 };

package/dist/components/toast/sp-toast.css.js

@@ -1,4 +1,4 @@
-const o = ':host{display:block;pointer-events:none}:host([open]){pointer-events:auto}.sp-toast{position:relative;display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:6px;box-shadow:0 4px 12px #00000026;font-size:14px;max-width:360px;opacity:0;transform:translateY(-8px);transition:opacity .25s,transform .25s;pointer-events:none;overflow:hidden}.sp-toast--open{opacity:1;transform:translateY(0);pointer-events:auto}.sp-toast-icon{flex-shrink:0;font-size:16px}.sp-toast-message{flex:1;line-height:1.4}.sp-toast-close{background:none;border:none;cursor:pointer;opacity:.6;font-size:14px;padding:0;flex-shrink:0}.sp-toast-close:hover{opacity:1}.sp-toast-action{background:none;border:none;cursor:pointer;font-size:13px;font-weight:600;padding:2px 6px;border-radius:4px;flex-shrink:0;text-decoration:none}:host([variant="neutral"]) .sp-toast{background:var(--sp-text-secondary, #1f2937);color:var(--sp-bg, white)}:host([variant="neutral"]) .sp-toast-action{color:#93c5fd}:host([variant="info"]) .sp-toast{background:var(--sp-primary-bg, #eff6ff);border:1px solid #bfdbfe;color:#1e40af}:host([variant="info"]) .sp-toast-action{color:var(--sp-primary-active, #1d4ed8)}:host([variant="success"]) .sp-toast{background:#f0fdf4;border:1px solid #bbf7d0;color:#166534}:host([variant="success"]) .sp-toast-action{color:#15803d}:host([variant="warning"]) .sp-toast{background:var(--sp-warning-bg, #FFFBE6);border:1px solid #fde68a;color:#92400e}:host([variant="warning"]) .sp-toast-action{color:#b45309}:host([variant="error"]) .sp-toast{background:var(--sp-error-bg, #FFF2F0);border:1px solid #fecaca;color:#991b1b}:host([variant="error"]) .sp-toast-action{color:#b91c1c}.sp-toast-close:focus-visible,.sp-toast-action:focus-visible{outline:2px solid var(--sp-primary, #3b82f6);outline-offset:2px}@keyframes sp-toast-progress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.sp-toast-progress{position:absolute;bottom:0;left:0;right:0;height:3px;background:currentColor;opacity:.35;transform-origin:left;animation:sp-toast-progress linear forwards}@media(max-width:480px){:host{width:100%}.sp-toast{max-width:100%;width:100%;box-sizing:border-box}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}:host{animation:none;transition:none}}';
+const o = '*,*:before,*:after{box-sizing:border-box}:host{display:block;pointer-events:none}:host([open]){pointer-events:auto}.sp-toast{position:relative;display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:6px;box-shadow:0 4px 12px #00000026;font-size:14px;max-width:360px;opacity:0;transform:translateY(-8px);transition:opacity .25s,transform .25s;pointer-events:none;overflow:hidden}.sp-toast--open{opacity:1;transform:translateY(0);pointer-events:auto}.sp-toast-icon{flex-shrink:0;font-size:16px}.sp-toast-message{flex:1;line-height:1.4}.sp-toast-close{background:none;border:none;cursor:pointer;opacity:.6;font-size:14px;padding:0;flex-shrink:0}.sp-toast-close:hover{opacity:1}.sp-toast-action{background:none;border:none;cursor:pointer;font-size:13px;font-weight:600;padding:2px 6px;border-radius:4px;flex-shrink:0;text-decoration:none}:host([variant="neutral"]) .sp-toast{background:var(--sp-text-secondary, #1f2937);color:var(--sp-bg, white)}:host([variant="neutral"]) .sp-toast-action{color:#93c5fd}:host([variant="info"]) .sp-toast{background:var(--sp-primary-bg, #eff6ff);border:1px solid #bfdbfe;color:#1e40af}:host([variant="info"]) .sp-toast-action{color:var(--sp-primary-active, #1d4ed8)}:host([variant="success"]) .sp-toast{background:#f0fdf4;border:1px solid #bbf7d0;color:#166534}:host([variant="success"]) .sp-toast-action{color:#15803d}:host([variant="warning"]) .sp-toast{background:var(--sp-warning-bg, #FFFBE6);border:1px solid #fde68a;color:#92400e}:host([variant="warning"]) .sp-toast-action{color:#b45309}:host([variant="error"]) .sp-toast{background:var(--sp-error-bg, #FFF2F0);border:1px solid #fecaca;color:#991b1b}:host([variant="error"]) .sp-toast-action{color:#b91c1c}.sp-toast-close:focus-visible,.sp-toast-action:focus-visible{outline:2px solid var(--sp-primary, #3b82f6);outline-offset:2px}@keyframes sp-toast-progress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.sp-toast-progress{position:absolute;bottom:0;left:0;right:0;height:3px;background:currentColor;opacity:.35;transform-origin:left;animation:sp-toast-progress linear forwards}@media(max-width:480px){:host{width:100%}.sp-toast{max-width:100%;width:100%;box-sizing:border-box}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}:host{animation:none;transition:none}}';
 export {
   o as default
 };

package/dist/components/toast/sp-toast.d.ts

@@ -34,6 +34,7 @@ export declare class SpToastComponent extends LitElement {
     actionHref: string;
     pauseOnHover: boolean;
     private _timer;
+    private _afterHideTimer;
     private _pausedAt;
     private _remainingTime;
     private _startTime;